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 非常普遍的應用。延伸閱讀