CSS text-decoration

CSS text-decoration 用來替網頁的文字做特效,例如增加文字的上線、文字底線或刪除線的效果,取代以往用 HTML 標籤一個個去標註網頁文字的耗時工作,透過 text-decoration 可以輕鬆快速的管理網頁內的文字特效,網頁設計師常常利用此計巧,直接管理整個網頁內的文字超連結底線,text-decoration 是 CSS 文字特效的標準語法,目前所有主流的瀏覽器都已經支援。

CSS text-decoration 基本語法

text-decoration: 文字特效參數;


語法中的文字特效參數最常用到的就是上線(overline)、底線(underline)以及刪除線(line-through),您可以透過以下表格查詢到這幾個特效的參數與寫法,其中預設參數 none 是不用顯示任何文字特效,其實也就是不需要用到此功能的意思。

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;繼承自父層的文字效果無測試效果

常用參數表中的最後兩個參數 blink 與 inherit 建議都不要使用,讓文字呈現閃爍效果的 blink 似乎已經取消,多數瀏覽器都不支援這個參數,原本 FireFox 還有支援 blink 屬性,但後來不知道為什麼就不支援了,未來是否會重新支援還不清楚,而 inherit 則是因為某些瀏覽器不支援繼承父層屬性的效果,特別是 IE7 或更早的瀏覽器,為了避免寫了沒效果,應該盡量避免使用。

CSS text-decoration 範例一、文字刪除線
<span style="text-decoration:line-through">文字標示刪除線</span>
範例輸出
文字標示刪除線
透過 span 標籤將文字標示起來再加上 style 樣式是一種常見的標準做法,同樣的技巧也可以用在 DIV 區塊,另外,style 也可以寫在 HTML font 文字標籤內,但 HTML5 並不支援 HTML font 文字標籤內的屬性,所以還是以 CSS 的標準寫法為主。

CSS text-decoration 範例二、移除超連結預設底線
<a href="#" style="text-decoration:none;">測試移除超連結預設底線</a>
範例輸出瀏覽器預設的超連結通常是有底線的,為了符合網頁設計的風格,設計師常常會將超連結的底線隱藏,如範例在超連結內加入『style="text-decoration:none;"』這樣的寫法,代表這一條超連結的顯示風格是沒有底線的,修改超連結是 text-decotation 非常普遍的應用。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012