CSS Eigenschaft Text-Decoration – Text unterstreichen
Mit der CSS-Eigenschaft text-decoration kann man Text unterstreichen, durchstreichen oder überstreichen. Unterstreichen bzw. Überstreichen nennt man auch Unterstrich bzw. Überstrich.
Beschreibung | mögliche Werte | Standardwert | Kategorie |
---|---|---|---|
Text-Dekoration | none underline overline line-through blink initial inherit |
none | Textdarstellung Text |
Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft text-decoration
Beachte:-
Die Eigenschaft wird standardmäßig in folgender Form verwendet:
-
keine Linie zeichnen ➜
text-decoration: none
-
mit einfacher Linie unterstreichen ➜
text-decoration: underline
-
mit einfacher Linie überstreichen ➜
text-decoration: overline
-
mit einfacher Linie durchstreichen ➜
text-decoration: line-through
-
keine Linie zeichnen ➜
-
Optional kann man zusätzlich die Strichfarbe der Linie angeben. Die Strichfarbe kann man z.B mit dem HTML Farb-Code #RRGGBB definieren. Alternativ zum Hex-Code kann man Farben auch mit einem HTML Farbnamen definieren.
-
Optional kann man zusätzlich die Strichstärke angeben.
-
Optional kann man zusätzlich den Strichtyp festlegen. Folgende Werte sind möglich:
- solid ➜ einfache durchgezogene Linie
- double ➜ doppelte durchgezogene Linie
- dotted ➜ einfache gepunktete Linie /li>
- dashed ➜ einfache unterbrochene Linie
- wavy ➜ einfache Wellen-Linie
-
Der Wert blink ist veraltet und sollte nicht mehr benutzt werden. Alle gängigen Browser unterstützen blink nicht mehr.
-
initial erzwingt die Wiederherstellung der ursprünglichen Textdekoration, d.h. der Wert initial stellt für die Eigenschaft text-decoration den Standardwert ein.
/* Absatz */
p
{
/* 10% größer als Standard */
font-size
: 1.1em
;
/* Schriftfarbe schwarz */
color
: black
;
}
/* Text rot unterstrichen */
u
{
/* doppelt stark unterstreichen */
text-decoration
: underline
red
2px
double
;
}
Im HTML-Code kann man das U-Tag (u für Englisch: underline) verwenden, um Text auszuzeichnen, der anders als normaler Text dargestellt werden soll. Dies können z.B. falsch geschriebene Wörter sein. In der HTML-Spezifikation wird die Verwendung des u-Tags kritisiert. Um Text zu unterstreichen, ist die Definition einer eigenen Klasse (underline) die bessere Wahl.
.underline
{
/* Text unterstreichen */
text-decoration
: underline
;
}
Im HTML-Code wird der Text, der unterstrichen werden soll, z.B. mit
eingeleitet und mit <span
class=
"underline"
>
abgeschlossen.</span>
Um zu vermeiden, dass der unterstrichene Text mit einem Link verwechselt werden könnte, sollte man Text möglichst nicht durch Unterstreichen hervorheben.