站長(zhǎng)資訊網(wǎng)
css刪除線代碼是“文本元素{text-decoration:line-through;}”。css text-decoration屬性用于規(guī)定添加到文本的修飾，例如下劃線、上劃線、刪除線等；當(dāng)該屬性的值設(shè)置為“l(fā)ine-through”時(shí)，可定義穿過文本的一條線，即實(shí)現(xiàn)刪除線效果。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中，可以利用text-decoration屬性來實(shí)現(xiàn)刪除線效果，實(shí)現(xiàn)代碼為：
文本元素{text-decoration:line-through;}
text-decoration 屬性規(guī)定添加到文本的修飾，下劃線、上劃線、刪除線等。
| 值 | 描述 |
|---|---|
| none | 默認(rèn)。定義標(biāo)準(zhǔn)的文本。 |
| underline | 定義文本下的一條線。 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線。 |
| blink | 定義閃爍的文本。 |
說明：
這個(gè)屬性允許對(duì)文本設(shè)置某種效果，如加刪除線。如果后代元素沒有自己的裝飾，祖先元素上設(shè)置的裝飾會(huì)“延伸”到后代元素中。不要求用戶代理支持 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>
通過例子可以看出，通過設(shè)置text-decoration:line-through;為p元素里的文本文字添加了刪除線，方法簡(jiǎn)單、方便。且可以通過css設(shè)置簡(jiǎn)單修飾刪除線樣式，比如：顏色，例：
<!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>
這樣我們結(jié)合text-decoration：line-through和<span></span>樣式定義文本字體顏色的樣式，就可以實(shí)現(xiàn)css中刪除線與文字顏色不一的樣式效果，是不是很簡(jiǎn)單！
（學(xué)習(xí)視頻分享：web前端入門）
