CSS 参考手帳

CSS @ルール(RULES)

CSS属性全書

CSS3 text-decoration-style 属性 CSS3 text-decoration-color 属性

CSS3 text-decoration-line属性の使用方法及び例

このtext-decoration-lineCSS属性は、要素に追加されるデザインを指定します。この属性は、1つまたは複数のスペースで区切られた値を受け入れます。

以下のテーブルは、この属性の使用方法とバージョン履歴、javascriptスクリプトでの使用方法を示しています。

デフォルト値：	none
適用範囲：	すべての要素。::firstも適用されます。-letterと::first-line。
継承：	ありません
アニメーション可能：	いいえ。参照してください：アニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文：	object.style.textDecorationLine="underline"

text-decoration-lineの使用構文

この属性の構文は以下の通りです：

text-decoration-line:　none　|　[　underline　|　overline　|　line-through　|　blink　]　one　or　more　values　|　initial　|　inherit

以下の例では、textを使用する方法を示しています。-decoration-line属性。

例

p　{
　　　　-moz-text-decoration-line:　underline;　/*　Firefox　*/
　　　　text-decoration-line:　underline;　
}
p.multiple　{
　　　　-moz-text-decoration-line:　underline　overline;　/*　Firefox　*/
　　　　text-decoration-line:　underline　overline;　
}

テストして見て‹/›

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
none	テキストに装飾はありません。デフォルトの値です。
underline	各行のテキストに下線が付いています。
overline	各行の文字の上に線があります。
line-through	各行の文字の中央に線があります。
blink	テキストが見えると見えないの間で切り替わるようにします。この値の使用は推奨されません。代わりに、アニメーション。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のtextを采用します。-decoration-lineの属性値。

ブラウザの互換性

text-decoration-line多くのブラウザではこの属性をサポートしていません。

	Firefox 6+ ^-moz-，36+ Google Chrome× Internet Explorer × Apple Safari × Opera ×

警告：text-decoration-line多くのブラウザではこの属性をサポートしていません。この属性の使用は避けるのが望ましいです。

さらに詳しく

以下のチュートリアルを参照してください：CSSのテキスト，CSSの境界線。

CSS3 text-decoration-style 属性 CSS3 text-decoration-color 属性