CSS text-decoration 屬性 - 網頁設計教學站

CSS text-decoration 屬性的功能是可以用來設計網頁文字的修飾線條，例如常見的文字上線（overline）、文字刪除線（line-through）以及文字底線（underline）都可以用 CSS text-decoration 屬性來設計，以前還有一種叫做閃爍（blink）的文字特效，也可以用 text-decoration 來設計，不過現在越來越少人用，畢竟網頁文字動不動就閃來閃去也挺奇怪的，所以現在 text-decoration 屬性主要還是以設計文字的線條為主，常套用至超連結修改連結底線是否要顯示，先來看看 text-decoration 屬性基本的語法規則。

CSS text-decoration 屬性語法

text-decoration: 文字特效;

只要在需要加入特效的文字，套用 text-decoration 屬性並設定好特效的參數值即可，常見的參數效果整理成下表。

CSS text-decoration 屬性的參數效果

特效參數	實際語法	特效說明	呈現結果
none	text-decoration:none;	預設值，無額外文字特效	這是 none 的效果
overline	text-decoration:overline;	文字增加上線特效	這是 overline 的效果
underline	text-decoration:underline;	文字增加底線特效	這是 underline 的效果
line-through	text-decoration:line-through;	文字增加刪除線特效	這是 line-through 的效果
blink	text-decoration:blink;	文字增加閃爍特效，已被取消。	這是 blink 的效果，無效
inherit	text-decoration:inherit;	繼承自父層的文字特效	不建議使用

CSS text-decoration 屬性實際範例一、套用在 DIV 區塊內的文字

範例的視覺效果

這是 DIV 區塊內的文字，透過 text-decoration 增加文字底線
就算換行還是有文字底線的特效

如果你需要的是 DIV 區塊內所有的文字線條特效都一樣，就可以在開頭的 DIV 區塊內使用 text-decoration 屬性直接設定，如此一來整個 DIV 區塊內的文字都會有線條預設值，很簡單吧！？如果其中有一小段文字要用其他種特效呢？請看範例二。

CSS text-decoration 屬性實際範例二、用 span 修改部分文字

範例的視覺效果

這是 DIV 區塊內的文字，預設沒有文字刪除線
其他沒有刪除線的文字，唯獨這一段有文字刪除線，其他沒有刪除線的文字
這是 DIV 區塊內的文字，預設沒有文字刪除線

範例二的 DIV 區塊把所有文字線條預設為＂無線條＂特效，只有在其中一段文字增加文字刪除線特效，只需要用 span 標籤把要顯示刪除線特效的的文字包起來，套用「text-decoration:line-through;」即可，當然，要套用其他文字特效也是可以的唷！

CSS text-decoration 屬性實際範例三、移除超連結底線

範例的視覺效果

這是預設的超連結文字底線效果 → 這是移除超連結文字底線的效果

範例三應該算是 CSS text-decoration 非常常用到的情況，就是把 text-decoration 屬性的各種特效套用到超連結上，例如網頁預設的超連結會有一條底線，與網頁風格不搭，這時候就可以用「text-decoration:none;」讓超連結底線消失，相當的方便。

還有一種超連結底線特效是滑鼠移到連結上才出線底線，需要用到 CSS 的 a 監聽屬性，適用於不希望超連結有底線的網頁風格，詳細設計方式請參閱《滑鼠移到超連結上才顯示超連結底線的設計語法》篇的介紹。

其他網頁文字設計