Websiteentwicklung: CSS: Textdekoration
Mit Hilfe der Eigenschaft text-decoration lassen sich Textdekorationen angeben.
Zum Text werden dazu zumeist zusätzliche Strukturen wie Striche in der Textfarbe color hinzugefügt.
Mögliche Werte sind:
- 'inherit' geerbt
- 'none' keine Dekoration, der Initialwert
- 'underline' unterstrichen
- 'overline' Linie über dem Text
- 'line-through' durchstreichen
- 'blink' blinken - Wechsel zwischen sichtbar und nicht sichtbar
Die Eigenschaft ist anwendbar auf alle Elemente bei visuellen Medien und wird nicht vererbt.
Hinsichtlich der Vererbung ist allerdings anzumerken, dass sich die Dekoration des Elternelementes über inzeiligen Inhalt hin fortsetzt, obwohl die Eigenschaft nicht vererbt wird. Die Frage der Fortsetzung ist bei tabellenartigen Blockelementen undefiniert, der Autor sollte bei einer Abweichung vom Initialwert im Zweifelsfalle die Eigenschaft immer explizit setzen, um ein definiertes Verhalten zu bekommen. Ähnlich undefiniert ist das Verhalten, wenn das Elternelement unsichtbar ist, das Kindelement aber sichtbar, und die Eigenschaft beim Elternelement angegeben ist. Die Eigenschaft setzt sich auch nicht in absolut positionierte Kindelemente fort oder solche, die per float aus dem normalen Textfluß genommen wurden. Die Eigenschaft findet ferner nur Anwendung auf die Glyphen, einschließlich Leerzeichen, nicht auf ersetzte Elemente wie Bilder oder auf inzeilige Blöcke.
Hinsichtlich 'blink' ist zu bedenken, dass dies Zugänglichkeitsprobleme verursachen kann, weil der Leser die Blinkerei nicht gezielt deaktivieren kann, ohne die gesamte Stilvorlage zu deaktivieren, von daher ist von einer Verwendung abzuraten. Auch das zeitliche Verhalten des Blinkens kann nicht eingestellt werden. Generell ist für CSS 3 ein Modul in Vorbereitung, wo man ähnliche Effekte definiert per Animation erreichen kann. Bei SVG ist deklarative Animation bereits jetzt möglich.
Weil die Farbe der Dekoration bestimmt wird durch den Wert von color von dem Element, für welches text-decoration angegeben ist, ermöglicht dies über einen Umweg bei geeigneter Struktur des Dokumentes auch eine Dekoration in anderer Farbe als der des dekorierten Textes. Zu dem Zwecke ist die Textfarbe beim Kindelement zu ändern.
Beispiele:
p {
text-decoration: underline
}
Dies unterstreicht den Text.
Wie ist das Verhalten bei höher- und tiefergestelltem Text?
Was passiert bei Änderung der Schriftgröße?
p {
text-decoration: line-through
}
Dies streicht den Text durch.
Wie ist das Verhalten bei höher- und tiefergestelltem Text?
Was passiert bei Änderung der Schriftgröße?
Oft werden Verweise mit 'underline' unterstrichen. Dies hat aber – je nach Schriftart – den Nachteil, dass ein gesetzter Unterstrich eventuell nicht sichtbar ist.
- Unterstrich_hier_dazwischen.
Um diesen Effekt zu vermeiden kann für Unterstreichungen auch ein Rahmen verwendet werden (border-bottom: 1px solid #000).
- Unterstrich_hier_dazwischen
p {
text-decoration: underline;
color: blue;
background: white
}
p > span
{
text-decoration: none;
color: red
}
roter Text blau unterstrichen