Dec. 12th,2020
プロパティについて
＃
概要
| 初期値 | “text-decoration-style: solid;” |
| 適用対象 | すべての要素 |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定したキーワード |
| アニメーション | 離散 |
“text-decoration-style”プロパティは“text-decoration-line”プロパティでテキストに引く下線、上線、打ち消し線の見た目を指定するプロパティです。
“text-decoration-style”プロパティは子要素に継承されませんが、それでも下線や上線、取り消し線は子孫のものも含むすべてのテキストに設定が反映されます。子孫要素に別途“text-decoration”プロパティや“text-decoration-style”プロパティを適用したとしても設定を上書きすることはできません。
サンプルコード
span { text-decoration-style: wavy;}
＃
＃
使用例
＃
テキストに引く線の見た目を指定する
<p>
彼女は「<span>猫は上のかぎり黒くてことはみな白き</span>」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
</p>
span {
text-decoration-line: underline;
text-decoration-style: solid;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-decoration-line: underline;
text-decoration-style: double;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-decoration-line: underline;
text-decoration-style: dotted;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-decoration-line: underline;
text-decoration-style: dashed;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span {
text-decoration-line: underline;
text-decoration-style: wavy;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
