Mit CSS Texte dekorieren
Auf Websites müssen Texte zum Zwecke der Dekoration oft mit bestimmten Strichen versehen werden. Beispielsweise ist häufig erwünscht, bestimmte Textpassagen zu unterstreichen, durchzustreichen oder mit einem Oberstrich zu versehen. Bei bestimmten Situationen kann es auch notwendig sein, die Striche zu entfernen. Wenn eine Website Textlinks enthält, dann werden sie standardmäßig unterstrichen dargestellt. Diese sind manchmal unpassend, z.B. sind sie bei komplexen Menüstrukturen oft ein Grund dafür, dass das Menü unübersichtlich wirkt. Manchmal möchten die Entwickler die Unterstriche bei Hyperlinks nur bei bestimmten Situationen entfernen, z.B. wenn man mit dem Mauszeiger auf den Text zeigt (Hover).
Für solche dekorativen Striche kann man die Eigenschaft text-decoration verwenden. Nachfolgend ist ein Beispielcode abgebildet, mit dem das Element mit einem Unterstrich versehen wird.
Werte für text-decoration
Die folgenden Werte kann man für text-decoration verwenden.
- none (Ohne Dekoration)
- underline (Unterstrich)
- overline (Oberstrich)
- line-through (Durchgestrichen)
- initial (Setzt auf den Standardwert)
- inherit (Vererbt vom Elternelement)
Nachfolgend sind einige Beispiele mit CSS-Codes und den Abbildungen, so wie sie im Browser dargestellt werden.
Beispiel mit dem Wert overline
.selektor {
text-decoration: overline;
}
Beispiel mit dem Wert line-through
.selektor {
text-decoration: line-through;
}
Beispiel mit allen drei Werten
.selektor {
text-decoration: underline overline line-through;
}
text-decoration als Shorthand-Eigenschaft
Relativ unbekannt ist, dass text-decoration eigentlich eine Kurzform (Shorthand) für die folgenden Eigenschaften ist.
- text-decoration-style (Linienart)
- text-decoration-color (Linienfarbe)
- text-decoration-line (Linienposition)
Gemäß dem Stand von 7/2015 funktionieren diese Eigenschaften zwar bei den gängigen Browsern eigenständig. Jedoch konnte man die Werte mit einem Leerzeichen getrennt bei text-decoration angeben und das funktionierte zumindest in Firefox 38. Die Werte konnten dabei wie folgt angegeben werden.
Linienart
- solid (Durchgezogene Linie)
- double (Doppelte Linie)
- dotted (Punktierte Linie)
- dashed (Strichlinie)
- wavy (Wellenlinie)
Linienfarbe
- Über den Farbnamen, z.B. blue, red, green, yellow etc.
- Als Hexadezimalwert, z.B. #ff0000
- Als verkürzter Hexadezimalwert, z.B. #f00
- Als RGB-Wert, z.B. rgb(255,0,0)
- Als RGBa-Wert mit Alpha-Transparenz, z.B. rgba(255,0,0,0.5)
- Als HSL-Wert, z.B. hsl(0,100%,50%)
- Als HSLa-Wert mit Alpha-Tranparenz, z.B. hsla(0,100%,50%,0.5)
Nachfolgend ein Beispielcode und die Abbildung von der Darstellung im Browser.
.selektor1 {
text-decoration: overline double red;
}
.selektor2 {
text-decoration: line-through solid #ff0000;
}
.selektor3 {
text-decoration: underline dotted #f00;
}
.selektor4 {
text-decoration: overline dashed rgb(255,0,0);
}
.selektor5 {
text-decoration: underline wavy hsl(0,100%,50%);
}
In den CSS-Spezifikationen ist auch der Wert blink enthalten, mit dem der Text blinken soll. Allerdings wird das von den gängigen Browsern nicht unterstützt und es ist fraglich, ob der Wert in Zukunft weiterhin enthalten sein wird.