iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
13
Modern Web

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

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

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
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Font-style - 金魚都能懂的CSS必學屬性
下一篇
Line-height - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

2 則留言

0
King Tzeng
iT邦新手 4 級 ‧ 2020-09-21 15:23:47

師傅今天也太早發文了!!

CSScoke iT邦新手 4 級 ‧ 2020-09-21 15:41:35 檢舉

/images/emoticon/emoticon01.gif

0
Alice Chiu
iT邦新手 5 級 ‧ 2020-10-15 15:00:55

text-underline-offset 這屬性太棒了

CSScoke iT邦新手 4 級 ‧ 2020-10-15 15:57:45 檢舉

有沒有相見恨晚XD

我要留言

立即登入留言