css去掉下劃線的方法:可以利用text-decoration屬性來實(shí)現(xiàn),如【text-decoration: none;】,屬性值none表示沒有文本裝飾。
本文操作環(huán)境:windows10系統(tǒng)、css 3、thinkpad t480電腦。
可以使用text-decoration 屬性來取消文本下劃線,該屬性規(guī)定添加到文本的修飾,下劃線、上劃線、刪除線等。
基本語法:
/*關(guān)鍵值*/ text-decoration: none; /*沒有文本裝飾*/ text-decoration: underline red; /*紅色下劃線*/ text-decoration: underline wavy red; /*紅色波浪形下劃線*/ /*全局值*/ text-decoration: inherit; text-decoration: initial; text-decoration: unset;
屬性值:
-
none 默認(rèn)。定義標(biāo)準(zhǔn)的文本。
-
underline 定義文本下的一條線。
-
overline 定義文本上的一條線。
-
line-through 定義穿過文本下的一條線。
-
blink 定義閃爍的文本。
-
inherit 規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值。
(學(xué)習(xí)視頻分享:css視頻教程)
代碼示例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> h1.under { text-decoration: underline; } h1.over { text-decoration: overline; } p.line { text-decoration: line-through; } p.blink { text-decoration: blink; } a.none { text-decoration: none; } p.underover { text-decoration: underline overline; } </style> </head> <body> <h1 class="under">下劃線</h1> <p class="line">刪除線</p> <p class="blink">閃爍效果,但瀏覽器不會(huì)顯示</p> <h1 class="over">下劃線</h1> <p>這是一個(gè) <a class="none" href="#">鏈接</a>,默認(rèn)情況下鏈接是有下劃線的,這邊我們移除它。</p> <p class="underover">上劃線與下劃線</p> </body> </html>