HTML 網頁文字加入底線

網頁文字一定要有超連結才可以有底線嗎?那可不一定唷!有什後需要在某些文字加上底線來標示其重要性的時候,可以使用 HTML 中用來設定文字底線的標籤 <u> 來處理,也可以使用 CSStext-decoration 來設計,這兩種方式都算容易,但 text-decoration 變化比較多,還可以加上刪除線或上線等效果,以下準備兩種不同的寫法範例供參考。

HTML 網頁文字加入底線範例一、使用 <u> 標籤
<u>我是加了底線的文字</u>
範例呈現效果如
我是加了底線的文字
透過 <u> 標籤來替文字加底線是非常傳統的做法,標準的 u 標籤是由 <u> 開始,以及 </u> 結束,包在標籤內的文字就會被加上底線,無論是不是超連結的狀態,其他常用的特殊標籤還有 <b> 代表粗體、<I> 代表斜體,更多請參閱《HTML font 文字》的特效表。

HTML 網頁文字加入底線範例二、使用 CSS text-decoration 語法
<span style="text-decoration:underline;">我是加了底線的文字</span>
範例呈現效果如
我是加了底線的文字
此範例是先用 span 標籤將要標示的文字包起來,並使用 style 設定樣式,其中 text-decoration 的參數 underline 代表下底線,其他參數還有刪除線 line-through、上線 overline 等多種不同樣式,變化比單純的 <u> 標籤豐富許多,且獲得主流瀏覽器的支援。

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