text-decoration

Übersicht

Die text-decoration CSS Eigenschaft wird dazu verwendet, die Textformatierung auf underline, overline, line-through oder blink zu setzen. Unter- und Überstrichdekorationen werden unterhalb des Texts positioniert, Durchstreichungen über dem Text.

Textdekorationen werden auf Unterelemente gezeichnet. Das bedeutet, dass es nicht möglich ist, die Textdekoration, die für ein übergeordnetes Element angegeben wurde, für ein Unterelement zu deaktivieren. Zum Beispiel würde in folgendem Markup <p>Dieser Text hat <em>ein paar hervorgehobene Wörter</em>.</p> die Stilregel p { text-decoration: underline; } den gesamten Absatz unterstreichen. Die Stilregel em { text-decoration: none; } würde nichts ändern; der gesamte Absatz wäre immer noch unterstrichen. Jedoch würde die Regel em { text-decoration: overline; } eine zweite Dekoration für "ein paar hervorgehobene Wörter" erscheinen lassen.

Hinweis: CSS Text Decoration Level 3 hat diese Eigenschaft zu einer Kurzschreibweise für die drei neuen CSS Eigenschaften text-decoration-color, text-decoration-line und text-decoration-style gemacht. Wie für andere Kurzschreibweiseeigenschaften bedeutet dies, dass sie deren Werte auf deren Standardwerte zurücksetzt, falls diese nicht explizit in der Kurzschreibweiseeigenschaft angegeben sind.

Initialwert	wie die jeweiligen Kurzschreibweisen: `text-decoration-color`: `currentcolor` `text-decoration-style`: `solid` `text-decoration-line`: `none`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `text-decoration-line`: wie angegeben `text-decoration-style`: wie angegeben `text-decoration-color`: berechnete Farbe
Animationstyp	wie die jeweiligen Kurzschreibweisen: `text-decoration-color`: Farbe `text-decoration-style`: diskret `text-decoration-line`: diskret
Kanonische Reihenfolge	Reihenfolge des Auftretens in der formalen Grammatik der Werte

Syntax

/* Schlüsselwortwerte */
text-decoration: none;                 /* Keine Textdekoration */
text-decoration: underline red;        /* Rote Unterstreichung */
text-decoration: underline wavy red;   /* Rote gewellte Unterstreichung */

/* Globale Werte */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Werte

Die text-decoration Eigenschaft ist eine Kurzschreibweise und kann die Werte jeder der drei Langschreibweiseeigenschaften annehmen: text-decoration-line, text-decoration-color und text-decoration-style

Formale Syntax

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

Beispiele

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

<h1 class="under">Unterstrichene Überschrift</h1>
<p class="line">Falls Text durchgestrichen werden soll, verwende <code>line-through</code>.</p>
<p class="blink">Dieser Text könnte blinken.</p>
<h1 class="over">Und jetzt eine überstrichene Überschrift.</h1>
<p>Dieser <a class="none" href="textdecoration.html">Link wird nicht unterstrichen</a>, wie das bei den meisten Links standardmäßig ist. Vorsicht beim Entfernen der Textdekoration bei Links, da die meisten Benutzer davon ausgehen, dass Hyperlinks unterstrichen sind.</p>
<p class="underover">Dieser Text hat beides, eine Unter- und eine Überstreichung.</p>

Spezifikationen

Spezifikation	Status	Kommentar
CSS Text Decoration Module Level 3 Die Definition von 'text-decoration' in dieser Spezifikation.	Anwärter Empfehlung	Hat die Eigenschaft in eine Kurzschreibweiseeigenschaft ungewandelt. Unterstützung für den Wert von `text-decoration-style` wurde hinzugefügt.
CSS Level 2 (Revision 1) Die Definition von 'text-decoration' in dieser Spezifikation.	Empfehlung	Keine wesentlichen Änderungen
CSS Level 1 Die Definition von 'text-decoration' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Desktop
Mobile

Merkmal	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Grundlegende Unterstützung	1.0 (1.7 oder früher)	1.0	3.0	3.5	1.0
`blink` Wert	1.0 (1.7 oder früher) 23.0 (23.0)^[1]	(Ja)^[1]	(Ja)^[1]	4.0 15.0^[1]	(Ja)^[1]
Kurzschreibweiseeigenschaft	6.0 (6.0)^[3] 36.0 (36.0)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	7.1^[2]

Merkmal	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	1.0 (1.0)	(Ja)	(Ja)	(Ja)	(Ja)
`blink` Wert	1.0 (1.7 oder früher) 23.0 (23.0)^[1]	(Ja)^[1]	(Ja)^[1]	4.0^[1]	(Ja)^[1]
Kurzschreibweiseeigenschaft	6.0 (6.0)^[3] 36.0 (36.0)	?	?	?	8^[1]

[1] Der blink Wert hat keinen Effekt.

[2] Safari unterstützt text-decoration-style nicht.

[3] Diese Version von Gecko hat eine teilweise Implementierung.

Siehe auch

Das list-style Attribut steuert die Darstellung von Einträgen in HTML <ol> und <ul> Listen.