css刪除線代碼是“文本元素{text-decoration:line-through;}”。css text-decoration屬性用于規(guī)定添加到文本的修飾,例如下劃線、上劃線、刪除線等;當該屬性的值設置為“l(fā)ine-through”時,可定義穿過文本的一條線,即實現(xiàn)刪除線效果。
前端(vue)入門到精通課程:進入學習
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中,可以利用text-decoration屬性來實現(xiàn)刪除線效果,實現(xiàn)代碼為:
文本元素{text-decoration:line-through;}
text-decoration 屬性規(guī)定添加到文本的修飾,下劃線、上劃線、刪除線等。
值 | 描述 |
---|---|
none | 默認。定義標準的文本。 |
underline | 定義文本下的一條線。 |
overline | 定義文本上的一條線。 |
line-through | 定義穿過文本下的一條線。 |
blink | 定義閃爍的文本。 |
說明:
這個屬性允許對文本設置某種效果,如加刪除線。如果后代元素沒有自己的裝飾,祖先元素上設置的裝飾會“延伸”到后代元素中。不要求用戶代理支持 blink。
代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css添加文本文字的刪除線</title> <style> p{ text-decoration:line-through; } </style> </head> <body> <p>這里有一條刪除線</p> </body> </html>
通過例子可以看出,通過設置text-decoration:line-through;
為p元素里的文本文字添加了刪除線,方法簡單、方便。且可以通過css設置簡單修飾刪除線樣式,比如:顏色,例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css添加文本文字的刪除線</title> <style> p{ text-decoration:line-through; color: red; } span{ color: black; } </style> </head> <body> <p><span>這里有一條刪除線</span></p> </body> </html>
這樣我們結合text-decoration:line-through
和<span></span>
樣式定義文本字體顏色的樣式,就可以實現(xiàn)css中刪除線與文字顏色不一的樣式效果,是不是很簡單!
(學習視頻分享:web前端入門)