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 屬性的參數效果
特效參數實際語法特效說明呈現結果
nonetext-decoration:none;預設值,無額外文字特效這是 none 的效果
overlinetext-decoration:overline;文字增加上線特效這是 overline 的效果
underlinetext-decoration:underline;文字增加底線特效這是 underline 的效果
line-throughtext-decoration:line-through;文字增加刪除線特效這是 line-through 的效果
blinktext-decoration:blink;文字增加閃爍特效,已被取消。這是 blink 的效果,無效
inherittext-decoration:inherit;繼承自父層的文字特效不建議使用

CSS text-decoration 屬性實際範例一、套用在 DIV 區塊內的文字
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div style="text-decoration:underline;border:1px gray solid;padding:5px;">
這是 DIV 區塊內的文字,透過 text-decoration 增加文字底線<br>
就算換行還是有文字底線的特效
</div>
範例的視覺效果
這是 DIV 區塊內的文字,透過 text-decoration 增加文字底線
就算換行還是有文字底線的特效
如果你需要的是 DIV 區塊內所有的文字線條特效都一樣,就可以在開頭的 DIV 區塊內使用 text-decoration 屬性直接設定,如此一來整個 DIV 區塊內的文字都會有線條預設值,很簡單吧!?如果其中有一小段文字要用其他種特效呢?請看範例二。

CSS text-decoration 屬性實際範例二、用 span 修改部分文字
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div style="text-decoration:none;border:1px gray solid;padding:5px;">
這是 DIV 區塊內的文字,預設沒有文字刪除線<br>
其他沒有刪除線的文字,<span style="text-decoration:line-through;">唯獨這一段有文字刪除線</span>,其他沒有刪除線的文字<br>
這是 DIV 區塊內的文字,預設沒有文字刪除線
</div>
範例的視覺效果
這是 DIV 區塊內的文字,預設沒有文字刪除線
其他沒有刪除線的文字,唯獨這一段有文字刪除線,其他沒有刪除線的文字
這是 DIV 區塊內的文字,預設沒有文字刪除線
範例二的 DIV 區塊把所有文字線條預設為"無線條"特效,只有在其中一段文字增加文字刪除線特效,只需要用 span 標籤把要顯示刪除線特效的的文字包起來,套用「text-decoration:line-through;」即可,當然,要套用其他文字特效也是可以的唷!

CSS text-decoration 屬性實際範例三、移除超連結底線
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<a href="#" style="text-decoration:underline;">這是預設的超連結文字底線效果</a> →
<a href="#" style="text-decoration:none;">這是移除超連結文字底線的效果</a>
範例的視覺效果範例三應該算是 CSS text-decoration 非常常用到的情況,就是把 text-decoration 屬性的各種特效套用到超連結上,例如網頁預設的超連結會有一條底線,與網頁風格不搭,這時候就可以用「text-decoration:none;」讓超連結底線消失,相當的方便。

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

其他網頁文字設計
© Copyright webtech.tw Since 2010