text-decoration-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die text-decoration-style
CSS Eigenschaft legt den Stil der Linien fest, die durch text-decoration-line
spezifiziert werden. Der Stil gilt für alle Linien, die mit text-decoration-line
festgelegt werden.
Probieren Sie es aus
Wenn die angegebene Dekoration eine spezifische semantische Bedeutung hat, wie z. B. eine durchgestrichene Linie, die bedeutet, dass ein Text gelöscht wurde, werden Autoren dazu ermutigt, diese Bedeutung mit einem HTML-Tag zu kennzeichnen, wie <del>
oder <s>
. Da Browser in einigen Fällen das Styling deaktivieren können, verschwindet die semantische Bedeutung in einer solchen Situation nicht.
Wenn mehrere Linienstil-Eigenschaften gleichzeitig gesetzt werden sollen, kann es praktischer sein, die Kurzschreibweise text-decoration
zu verwenden.
Syntax
/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;
Werte
Formale Definition
Initialer Wert | solid |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Eine wellenförmige Unterstreichung einstellen
Das folgende Beispiel erstellt eine rote, wellenförmige Unterstreichung:
CSS
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
HTML
<p class="wavy">This text has a wavy red line beneath it.</p>
Ergebnisse
Spezifikationen
Specification |
---|
CSS Text Decoration Module Level 3 # text-decoration-style-property |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Wenn mehrere Linienstil-Eigenschaften gleichzeitig gesetzt werden sollen, kann es praktischer sein, die Kurzschreibweise
text-decoration
zu verwenden. text-decoration-line
text-decoration-color
text-decoration-thickness
text-underline-offset