Text-decoration - 金魚都能懂的CSS必學屬性 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 6

Modern Web

金魚都能懂的CSS必學屬性系列第 6 篇

Text-decoration - 金魚都能懂的CSS必學屬性

12th鐵人賽金魚都能懂 css教學 css 網頁教學

CSScoke

2020-09-21 15:22:26

23669 瀏覽

分享至

Text-decoration是一個網頁開發者必學的CSS屬性了，因為用到的機會太多了，尤其是超連結的底線去除，Amos不知道被問到多少次了，此外對於有些需要強調的文字段落來說，這也是一個text-decoration應用的好時機，就讓我們來看看text-decoration的設定方式吧。

Text-decoration 的規則

text-decoration基本上僅需指定一個值，其撰寫方式像是這樣

text-decoration: none;

text-decoration的作用是設定文字的裝飾，其中設定的值主要是以關鍵字為主，多數使用者可能比較常用到的會是像「none」或是「underline」這樣的值，text-decoration可以設定的值有

none (無效果)
overline (頂線)
line-through (中線/刪除線)
underline (底線)
inherit (繼承)

Text-decoration 的組成

在大多數的狀況下，我們在頁面設定中只會設定Text-decoration: none; 這樣的設定，但實際一個 Text-decoration是由三個屬性組成的，分別是

text-decoration-line (線段位置)
text-decoration-color (線段色彩)
text-decoration-style (線段樣式)

看起來很像是CSS border的設定吧，其實根本就可以說差不多了，只是差別在border設定線條的粗細，而text-decoration是設定線條的位置。所以依照這樣的原理來看，我們可以直接參照border的設定方式，把三個值直接一次設定完，像是下面這樣

text-decoration: underline red dotted;

這樣我們就能夠讓一段文字的底線呈現紅色點線，是不是非常方便呢?

Text-decoration 常見的應用

由於就是一個頂線、中線、底線、無裝飾的變化，常見的變化其實是滿有限的，此外線條的位置是無法設定的，比起border來說，這個問題就導致了我們應用上面的限制，以下就幾個我們常見的應用來做個簡單的分享。

超連結預設底線去除

一般來說超連結都會有一個預設的底線，主要是為了讓使用者可以一眼識別哪段文字是超連結，但往往這樣的預設效果，在視覺設計師眼中可能不會是這麼順眼的，所以我們可能會採用把底線去除，改用別的視覺提示來達成告知使用者的目的，所以我們僅需使用下面這樣的CSS設定，就能將超連結預設的底線去除囉

a{
	text-decoration: none;
}

摸到超連結出現底線

了解怎麼去除超連結預設的底線後，當然我們也會有一種設計方式是在摸到超連結時，讓文字出現底線，這樣的設計可以讓視覺提示更加明確，一方面由於出現底線後，跟大家認知上面的超連結產生了關聯，就更能夠確定此段文字能夠被點擊了，設定方式如下

a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

超連結的底線改點線與色彩

由於超連結底線實在太明顯了，這樣感覺會有點破壞視覺設計阿，身為一個視覺設計師當然是無法接受這樣的外觀了，所以讓我們來改造一下吧!

a{
    text-decoration: dotted #ccc underline;
}

像是上面這樣的設定，就能一次搞定線段位置、線段色彩、線段樣式，三個願望一次滿足，是不是很開心啊(~~下次小孩要買XX出奇蛋的話就寫這個給他吧~~)

同時顯示頂線與底線

雖然說這需求有點奇怪，Amos實際上用到的機會不多，比較常見的還是設定border居多，但作為一個技巧學習，學起來搞不好哪天需要用到時，就能順手用上啦!

a{
	text-decoration-line: overline underline;
    text-decoration-color: gray;
    text-decoration-style: dotted;
}

這樣就能同時設定頂線與底線啦，可是這樣的設定要三行，可以更省一點嗎?會這樣問當然是可以啦，我們可以採用跟border設定相同的觀念去寫，像是下面這樣就搞定啦~

a{
    text-decoration: overline gray dotted;
	text-decoration-line: overline underline;
}

有沒有更多相關屬性可設定

其實跟text-decoration相關的屬性中，還有兩個屬性或許你會用的上，但要特別注意這兩個屬性目前只有在Firefox中才有支援喔，甚麼!那根本講心酸的啊啊啊!!!不管你心不心酸，先來看看原始碼吧，或許哪天其它瀏覽器也跟著支援的話，我們就能用上啦!

a{
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 3px;
}

text-underline-offset基本上就是設定線段與文字之間的距離，這邊是不是就解決了前面所說的，text-decoration無法設定線段距離的問題了呢?(~~但其它瀏覽器不支援有屁用啊~~)，而text-decoration-thickness則是設定線段的粗細(厚度)，所以如果我們想要把線條加粗的話，也都沒問題了，是不是很棒啊!(快改用Firefox吧)

註: text-underline-offset僅能作用在underline，其它線段位置是沒有作用的喔。

「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧