CSS樣式：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 常用特效參數與效果

參數	語法	說明	呈現
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;	繼承自父層的文字效果	無測試效果

常用參數表中的最後兩個參數 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 非常普遍的應用。