text-decoration-style - テキスト傍線のスタイルを指定する
この記事では「text-decoration-style - テキスト傍線のスタイルを指定する」について、基本の意味と使い方を初心者向けにやさしく説明します。
text-decoration-styleプロパティは、 text-decoration-lineプロパティでテキストにつけた傍線のスタイルを指定する際に使用します。
text-decoration-styleプロパティで要素に線スタイルを指定した場合、その子孫ボックスに異なるスタイルが指定されていたとしても、テキストにつけられる傍線のスタイルは同じとなります。
値
- solid
- 実線（初期値）
- double
- 二重線
- dotted
- 点線
- dashed
- 破線
- wavy
- 波線
初期値・適用対象・値の継承
- 初期値
- solid
- 適用対象
- すべての要素
- 値の継承
- しない
Sample
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
HTML source
<p class="uline s1">text-decoration-style: solid;</p>
<p class="uline s2">text-decoration-style: double;</p>
<p class="uline s3">text-decoration-style: dotted;</p>
<p class="uline s4">text-decoration-style: dashed;</p>
<p class="uline s5">text-decoration-style: wavy;</p>
<hr>
<p class="oline s1">text-decoration-style: solid;</p>
<p class="oline s2">text-decoration-style: double;</p>
<p class="oline s3">text-decoration-style: dotted;</p>
<p class="oline s4">text-decoration-style: dashed;</p>
<p class="oline s5">text-decoration-style: wavy;</p>
CSS source
.uline {text-decoration-line: underline;}
.oline {text-decoration-line: overline;}
.s1 {text-decoration-style: solid;}
.s2 {text-decoration-style: double;}
.s3 {text-decoration-style: dotted;}
.s4 {text-decoration-style: dashed;}
.s5 {text-decoration-style: wavy;}
Browser support
