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 (en-US) 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.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter (en-US) und ::first-line (en-US).
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

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 (en-US)

Formale Syntax

<'text-decoration-line'> || <'text-decoration-style'> (en-US) || <'text-decoration-color'> || <'text-decoration-thickness'> (en-US)

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 (en-US) 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

BCD tables only load in the browser

Siehe auch

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