Home >Web Front-end >HTML Tutorial >How to use text-decoration

How to use text-decoration

php中世界最好的语言Original: 2018-05-30 11:49:005545browse

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:/www.php.cn">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.

How to use text-decoration

Related articles