例
改變下劃線文本中下劃線的顏色:
p
{
text-decoration: underline;
text-decoration-color: red;
-moz-text-decoration-color: red; /* 針對 Firefox 的代碼 */
}
瀏覽器支持
幾乎所有的主流瀏覽器都不支持 text-decoration-color 屬性。
Firefox 支持另一個可替代該屬性的屬性,即 -moz-text-decoration-color 屬性。
定義和用法
text-decoration-color 屬性規定文本修飾(下劃線 underline、上劃線 overline、中劃線 line-through)的顏色。
注意:只有在帶有可見的 text-decoration 的元素上,text-decoration-color 屬性才起作用。
默認值: | currentColor |
---|---|
繼承: | 否 |
可動畫化: | 是。請參閱 可動畫化(animatable)。嘗試一下 |
版本: | CSS3 |
JavaScript 語法: | object.style.textDecorationColor="red"嘗試一下 |
CSS 語法
text-decoration-color: color|initial|inherit;
屬性值
值 | 描述 | 測試 |
---|---|---|
color | 規定文本修飾的顏色。 | 測試 ? |
initial | 設置該屬性為它的默認值。請參閱 initial。 | 測試 ? |
inherit | 從父元素繼承該屬性。請參閱 inherit。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
過CSS文本裝飾可以為文本添加裝飾線、為裝飾線設置顏色、為裝飾線指定風格、為裝飾線設置厚度等效果。
為文本添加裝飾線通過 text-decoration-line 屬性實現,可以結合一個以上的值,如上劃線和下劃線,來顯示文本上方和下方的線條。具體的值有三個:
overline,在文本上方添加線條修飾。
line-through,在文本中間添加線條修飾,實現了刪除線的效果。
underline,在文本下方添加線條修飾,實現了下劃線的效果。
我們來做個例子。
打開編輯器,在 005 文件夾下創建 decoration.html 文件,構建好基本代碼。
添加 h1,h2,h3,p 四個元素。分別填入一些文本。
在 005 文件夾下再創建一個 mystyle-3.css 文件,
定義 h1 選擇器,聲明樣式屬性 text-decoration-line,值為 overline。
定義 h2 選擇器,也聲明樣式屬性 text-decoration-line,值為 line-through。
定義 h3 選擇器,再聲明樣式屬性 text-decoration-line,值為 underline。
回到頁面,通過 link 元素引入 mystyle-3.css 這個外部樣式。
在瀏覽器上預覽效果,我們看:上邊線、刪除線和下劃線就做好了!
實際上,可以同時給文本添加多個線條,實現方法是給 text-decoration-line
[?dek??re??n】屬性設置多個值,每個值通過空格分開。
在 mystyle-3.css 再定義一個 p 選擇器,聲明樣式屬性 text-decoration-line,值寫為 overline underline (讀作overline 空格 underline )。
看一下效果,段落被添加了兩條裝飾線。
有的小伙伴還記得,給文本添加鏈接后,瀏覽器會默認給這個文本添加一個下劃線。所以,添加了鏈接的文本就不要使用 underline 下劃線裝飾了。
為文本設置裝飾線的顏色通過 text-decoration-color 屬性實現,屬性值為任意合法的顏色值。
給 h1 元素設置 text-decoration-color 屬性,顏色值設置為 red。再快速的給 h2,h3,p 元素設置 text-decoration-color 屬性,值分別為 blue,green,purple。
我們看,線條都有了顏色。
為裝飾線指定風格通過 text-decoration-style 屬性實現,屬性值有五個:
solid,實線。
double,雙實線。
dotted,圓點線。
dashed[d??t],虛線。
wavy[?we?vi],波浪線。
為了演示方便,在 html 中再添加一個標題 h4,填入一些文本,在 css 中將全部元素的 text-decoration-line 樣式屬性都設置為 underline。再定義一個 h4 選擇器,聲明樣式 text-decoration-line: underline。
給 h1, h2,h3,h4,p 全部添加 text-decoration-style 屬性,值分別為 solid,double,dotted,dashed[d??t],wavy。
這樣,各種線條的風格就設置好了!
通過 text-decoration-thickness 屬性為線條設置厚度,也就是線條的粗細。屬性值有三種設置方法:
auto, 默認值,這個值是不確定的,和所修飾的文字大小有關系。
px,像素大小,是一個絕對值。比如 5px。
%,是一個相對值,根據修飾文字的高度計算出來。比如 25%。
在 h1 元素上聲明樣式屬性 text-decoration-thickness,值為 auto。在 h2,h3 上也聲明這個樣式屬性,值分別為 5px,50%。
在瀏覽器里仔細觀察,h1 上的下劃線厚度是瀏覽器給的默認值。h2 上的下劃線厚度是 5px。h3 上的下劃線厚度為文字高度的一半。
回到樣式表代碼,我們分析一下:每個文本修飾的屬性名,均為三個單詞連接起來的,這樣寫起來比較啰嗦,能不能簡化一下呢?可以的!
h1 {
/* text-decoration-line: overline; */
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: auto;
}
ext-decoration屬性介紹#
text-decoration屬性值說明表#
值作用none去掉文本修飾線underline設置下劃線overline設置上劃線line-through設置刪除線
HTML標簽自帶修飾線#
u標簽#
Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>設置文本修飾線</title> </head> <body> <u>成功不是擊敗別人,而是改變自己</u> </body> </html>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。