Text-decoration | css link底線
Text-decoration是一個網頁開發者必學的CSS屬性了,因為用到的機會太多了,尤其是超連結的底線去除,Amos不知道被問到多少次了,此外對於有些需要強調的文字段落來說,這也是一個text-decoration應用的好時機,就讓我們來看看text-decoration的設定方式吧。Text-decoration的規則text-decoration基本上僅需指定一個值,其撰寫方式像是這樣text-decoration:none;text-decoration的作用是設定文字的裝飾,其中設定的值主要是以關鍵字為主,多數使用者可能比較常用到的會是像「none」或是「underline」這樣的值,text-decoration可以設定...
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來說,這個問題就導致了我們應用上...