スポンサード リンク
text-decorationプロパティ
下線の表示、非表示、上線の表示、打ち消し線、文字の点滅が指定できます使い方(書式)
セレクタ { text-decoration: 値; }
text-decorationプロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素 |
子要素へのスタイルの継承 | しない |
プロパティの値 | 説明 |
none | 下線を非表示にする |
underline | 下線を表示する |
overline | 上線を表示する |
line-through | 打ち消し線を表示する |
blink | 文字を点滅する (FireFox、Operaのみ) |
実際の指定方法
a { text-decoration: none; } /* リンクの下線を消す */
.hoge2 { text-decoration: underline; } /* 下線を表示する */
.hoge3 { text-decoration: overline; } /* 上線を表示する */
.hoge4 { text-decoration: line-through; } /* 打ち消し線を表示する */
.hoge5 { text-decoration: blink; } /* 文字を点滅する(FireFox、Operaのみ) */
html部分
<p><a href="#">下線を非表示にしたリンク</a></p> <p class="hoge2">下線を表示</p> <p class="hoge3">上線を表示</p> <p class="hoge4">打ち消し線を表示</p> <p class="hoge5">文字を点滅する(FireFox、Operaのみ)</p>
実際の表示
下線を表示
上線を表示
打ち消し線を表示
文字を点滅する(FireFox、Operaのみ)
複数の値を適用
複数の値を適用できます
p { text-decoration: underline overline; } /* 下線、上線を表示する */
html部分
<p>下線、上線を表示</p>
実際の表示
下線、上線を表示