Home >Web Front-end >HTML Tutorial >How to use text-decoration
We often use CSS code to underline text content on web pages. Then we have to use text-decoration. How to use it? Today we will give you a good introduction.
Use CSS attribute words:
text-decoration : none || underline || blink || overline || line-through
text-decoration underline CSS word value parameter :
none : No decoration
blink : Blink
underline : Underline
line-through : Throughline
overline : Overline Underline
text-decoration:none No decoration, usually remove the underline style for html underline tags
text-decoration:underline Underline style
text-decoration:line-through Strikethrough style - throughline style
text-decoration:overline Overline style
HTML regular underline tag
Underline tag "U" in HTML u tag Object text is underlined in HTML.
Example:
<u>我被U标签加下滑线</u>
CSS control object underline attribute style
html u underline and CSS underline comparison application case
CSS removehtml tagUnderline style
If we want to remove the strikethrough style of the corresponding html s tag, remove the html u underline, and remove the html overline style.
1. Remove the html s strikethrough line style
.p s{text-decoration:none}
Remove the html s label style attribute in the p class object box
2. Remove the html u underline style
.p u{text-decoration:none}
Remove the u label underline style attribute in the p class object box
5. Hyperlink Advanced use of underline - TOP
Next we will explain common CSS hyperlinks. Text objects will be underlined when passing by them.
The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>下划线演示</title>
<style>
.yangshi a{ text-decoration:none;}
/* css注释： 鼠标经过热点文字被加下划线 */
.yangshi a:hover{ text-decoration:underline;}
/* 鼠标经过热点文字被加下划线 */
</style>
</head>
<body>
<p>
<span class="yangshi">
<a href="http:/m.sbmmt.com">p</a>
</span>
</p>
</body>
</html>Please copy the above code and create a new HTML to view the example style.
We set the text underline, text strikethrough style, and font overline style for the three box objects respectively.
1. CSS code snippet:
.p{text-decoration:underline}
.p_1{text-decoration:line-through}
.p_2{text-decoration:overline}
2. HTML code snippet:
ef07cb678f54c8f87d9ed1b6b13206d0I am underlined94b3e26ee717c64999d7867364b1b4a3
76cde12e55a1914624e179a9954b02b8I am struck through94b3e26ee717c64999d7867364b1b4a3
39b52546c41252af47dd107d89d0baddI am underlined94b3e26ee717c64999d7867364b1b4a3
I have introduced so much, I believe you have mastered text-decoration. Friends in need can save it. Please also continue to pay attention to other updates on this site.
Related reading:
The above is the detailed content of How to use text-decoration. For more information, please follow other related articles on the PHP Chinese website!