Ü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:
|
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Nein |
Medien | visuell |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
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'> || <'text-decoration-thickness'>
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; }
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 3 | Opera Vollständige Unterstützung 3.5 | Safari Vollständige Unterstützung 1 | WebView Android Vollständige Unterstützung ≤37 | Chrome Android Vollständige Unterstützung 18 | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android Vollständige Unterstützung Ja |
blink | Chrome Keine Unterstützung Nein | Edge Keine Unterstützung Nein | Firefox Keine Unterstützung 1 — 23 | IE Keine Unterstützung Nein | Opera Keine Unterstützung 4 — 15 | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Firefox Android Keine Unterstützung 4 — 23 | Opera Android Keine Unterstützung 10.1 — 14 | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Vollständige Unterstützung 7.0 |
Shorthand | Chrome Vollständige Unterstützung 57 | Edge Keine Unterstützung Nein | Firefox
Vollständige Unterstützung
36
| IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 44 | Safari
Vollständige Unterstützung
8
| WebView Android Vollständige Unterstützung 57 | Chrome Android Vollständige Unterstützung 57 | Firefox Android
Vollständige Unterstützung
36
| Opera Android Vollständige Unterstützung 43 | Safari iOS
Vollständige Unterstützung
8
| Samsung Internet Android Vollständige Unterstützung Ja |
text-decoration-thickness included in shorthand | Chrome Keine Unterstützung Nein | Edge Keine Unterstützung Nein | Firefox Vollständige Unterstützung 70 | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Firefox Android Keine Unterstützung Nein | Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Keine Unterstützung Nein |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
- Experimentell. Das Verhalten kann sich zukünftig ändern.
- Experimentell. Das Verhalten kann sich zukünftig ändern.
- Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
- Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
- Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
- Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
- Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
- Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Siehe auch
- Das
list-style
Attribut steuert die Darstellung von Einträgen in HTML<ol>
und<ul>
Listen.