我們在word 常用底線來說明此文字的重要性，而在網頁中底線是拿來提醒使用者，這裡是有連結的意思（設連結時，自動加底線），此處不說連結，而是來說明文字如果要加入底線或刪除線的用法！CSS 提供了 text-decoration的屬性，來給文字加點修飾。
先來寫html 吧！
<!doctype html> <html> <head> <meta charset="utf-8"> <title>魚和橙</title> </head> <body> <h1>Text Decoration</h1> <p id="line1"> This is underline </p> <p id="line2"> This is overline </p> <p id="line3"> This is line-through </p> </body> </html>
先來看輸出如何！
接著我們加入css 吧！
<style type="text/css"> #line1 { text-decoration: underline; } #line2 { text-decoration: overline; } #line3 { text-decoration: line-through; } </style>
#line1 設 text-decoration: underlin; 就可以設成底線。
#line2 設 text-decoration: overline; 就可以設成上橫線。
#line3 設 text-decoration: underlin; 就可以設成刪除線。
看看輸出結果
如果各位想要複合式，也就是想要底線又要刪除線，要如設定呢？你可以將#line1 改成以下程式！
<style type="text/css"> #line1 { text-decoration: underline line-through; } </style>
可以同時設定兩個條件，可以輸出成以下
這個設定也相同有繼承的，所以當你父類有設定修飾，子類也會一起設定，如果想要子類去除設定，還是要設成 text-decoration: none，才能解除設定！
沒有留言:
張貼留言