CSS文字裝飾

透過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;

}

h2 {

/* text-decoration-line: line-through; */

text-decoration-line: underline;

text-decoration-color: blue;

text-decoration-style: double;

text-decoration-thickness: 5px;

}

h3 {

text-decoration-line: underline;

text-decoration-color: green;

text-decoration-style: dotted;

text-decoration-thickness: 50%;

}

h4 {

text-decoration-line: underline;

text-decoration-style: dashed;

}

p {

/* text-decoration-line: overline underline; */

text-decoration-line: underline;

text-decoration-color: purple;

text-decoration-style: wavy;

}

我們可以去掉第三個單詞，使用 text-decoration 這個樣式屬性來實現，text-decoration 是一個簡寫的屬性，它的值是透過空格分隔的

text-decoration-line、

text-decoration-color、

text-decoration-style

以及 text-decoration-thickness 的一個或多個值。

其中，text-decoration-line 必須設定，其他三個可選。

舉幾個例子：

這裡的 text-decoration: underline，表示給文字設定下滑線裝飾，線條的顏色、風格和粗細都採用預設值，也就是黑色、實線、自動粗細。

這裡的 text-decoration: underline red，表示給文字設定下滑線裝飾，線條顏色為紅色，其他修飾屬性都採用預設值。

這裡的 text-decoration: underline red double，表示給文字設定下滑線裝飾，線條顏色為紅色、雙線條。線條的粗細採用預設值。

這裡的 text-decoration: underline red double 5px，表示給文字設定下滑線裝飾，線條顏色為紅色、雙線條、厚度為5px。

h1 {

text-decoration: underline;

}

h2 {

text-decoration: underline red;

}

h3 {

text-decoration: underline red double;

}

p {

text-decoration: underline red double 5px;

}

這裡你可能會問，四個值的順序可以顛倒嗎？答案是沒有要求。但是，text-decoration-line 這個屬性的值，必須設定！比如上邊例子的 underline。

回到樣式表程式碼，我們試著改寫一下 h1 的 樣式宣告，註釋掉以前的程式碼，宣告 text-decoration 屬性，順序可以按照上面樣式書寫的順序，依次抄下來即可。因為這幾個值沒有順序要求，但是必須設定 underline。

我們看，h1 的文字裝飾效果依然存在！

HTML中的所有連結預設都有下劃線。有時你會看到別人的頁面，連結的樣式沒有下劃線。如何實現的呢？

給 a 元素宣告 text-decoration: none，可以去除連結的下滑線，大家自己試一試吧！

a {

text-decoration: none;

}