Textformatierung
text-decoration | text-transform | letter-spacing | word-spacing | white-space | line-height | text-indent | text-align | vertical-align
text-decorationzur Übersicht 
Mit der Eigenschaft text-decoration können Texte verziert werden, z.B. unterstreichen.
Werte
none | underline | overline | line-through | blink
Der Internet Explorer und der Konqueror interpretieren den Wert blink nicht. Es ist erlaubt auch mehrere
Werte zu notieren.
Standardwert ist none
Vererbung
Nein
Beispiel
a:link{ text-decoration: none;}
a:visited{ text-decoration: line-through;}
a:hover{ text-decoration: overline;}
a:active{ text-decoration: underline;}
text-transformzur Übersicht
Die gesetzte Eigenschaft text-transform erzwingt eine bestimmte Groß- und/oder Kleinschreibung.
Werte
none | capitalize | uppercase | lowercase | inherit
Der Wert none führt zu keiner Veränderung. Mit dem Wert capitalize wird jeder erste
Buchstabe eines Wortes großgeschrieben. Ist der Wert uppercase gesetzt, werden alle Buchstaben in
Großbuchstaben umgewandelt; der Wert lowercase wandelt sie in Kleinbuchstaben um.
Standardwert ist none
Vererbung
Ja
Beispiel
p{ text-transform: capitalize;}
letter-spacingzur Übersicht
Mit der Eigenschaft letter-spacing können die Abstände zwischen den Buchstaben (das Kerning) manipuliert werden.
Die Werte für den Abstand können sowohl absolut als auch relativ angegeben werden, sogar Negativwerte sind erlaubt. Es ist
empfehlenswert die Eigenschaft mit relativen Werten anzugeben, damit das Kerning gleichmäßig bei Schriftgrößenänderungen
angewendet wird.
Werte
normal | [Wert Abstand] | inherit
Standardwert ist normal
Vererbung
Ja
Beispiel
h1{ letter-spacing: 0.8em;}
word-spacingzur Übersicht
Entsprechend der Eigenschaft letter-spacing verändert die Eigenschaft word-spacing die Abstände zwischen den Wörtern.
Auch hier empfiehlt es sich die Eigenschaft mit relativen Werten anzugeben.
Werte
normal | [Wert Abstand] | inherit
Standardwert ist normal
Vererbung
Ja
Beispiel
blockquote{ word-spacing: 1em; font-weight: bold;}
white-spacezur Übersicht
Die Eigenschaft white-space legt fest, wie mit Weißraumzeichen (Zeilenumbruch, Leerzeichen, Tabulator) umgegangen werden soll.
Werte
normal | pre | nowrap | inherit
Der Wert normal zeigt bei mehreren hintereinander stehenden Leerzeichen nur eines an. Der Text wird nach Bedarf nach einem Leerzeichen
umgebrochen. Mit dem Wert pre wird der Text wie in präformatierten Zustand behandelt, alle Leerzeichen werden wiedergegeben und der
Text wird nicht automatisch umgebrochen. Mit dem Wert nowrap werden die Leerzeichen normal behandelt, es findet aber kein automatischer
Zeilenumbruch statt.
Standardwert ist normal
Vererbung
Ja
Beispiel
code{ white-space: pre;}
line-heightzur Übersicht
Die Eigenschaft line-height legt die Zeilenhöhe in einem Text fest.
Werte
normal | [Multiplikationsfaktor] | [Zeilenhöhe] | inherit
Als Werte für die Zeilenhöhe sind absolute und relative Angaben erlaubt. Der Multiplikationsfaktor nimmt den Normalwert als Ausgangswert. Dieser wird mit dem Faktor multipliziert.
Standardwert ist normal
Vererbung
Ja
Beispiel
p{ line-height: 12px;}
p{ line-height: 80%;}
p.faktor{ line-height: 2;}
text-indentzur Übersicht
Die Eigenschaft text-indent rückt die erste Zeile eines Textes nach rechts oder links ein. Eine Einrückung nach links, also mit negativer Angabe, kann aber zu fehlerhafter Darstellung führen.
Werte
[Einrückung Länge] | [Einrückung Prozent] | inherit
Als Werte für den Einzug können absolute und relative Angaben gesetzt werden.
Standardwert ist 0
Vererbung
Ja
Beispiel
p{ text-indent: 2.5em;}
text-alignzur Übersicht
text-align legt die Ausrichtung des Inhaltes eines Elementes fest. Neben Text können mit dieser Eigenschaft auch Elemente in einer Webseite ausgerichtet werden.
Werte
left | right | center | justify | inherit
Die Werte left und right stellen die Inhalte links- bzw. rechtsbündig dar. center
zentriert die Inhalte und justify erzeugt einen Blocksatz, d.h. der Text wird rechts- und linksbündig ausgerichtet.
Kein Standardwert
Vererbung
Ja
Beispiel
p{ text-align: justify;}
vertical-alignzur Übersicht
Mit vertical-align wird die vertikale Ausrichtung der Grundlinie (baseline) eines Textes in Bezug zur Zeilenhöhe festgelegt. Die Grundlinie ist die Linie, auf der die Buchstaben liegen. Der untere Rand einer Schrift wird durch die Unterlängen der Buchstaben "g", "p" und"q" bestimmt.
Werte
baseline | sub | super | top | text-top | middle | bottom | text-bottom | [Ausrichtung]
baseline |
Die Grundlinie des Elternelementes ist Bezugspunkt für den Wert baseline |
sub |
Das Element wird tiefer gestellt |
super |
Das Element wird höher gestellt |
top |
Das Element wird am oberen Rand des Elternelements ausgerichtet |
bottom |
Das Element wird am unteren Rand des Elternelements ausgerichtet |
middle |
Das Element wird mittig ausgerichtet |
text-top |
Das Element wird am oberen Textrand des Elternelements ausgerichtet |
text-bottom |
Das Element wird am unteren Textrand des Elternelements ausgerichtet |
Ausrichtung |
Prozentuale Werte orientieren sich an der Zeilenhöhe des Elternelements |
Die Eigenschaft vertical-align wird recht häufig nicht korrekt dargestellt. Die Werte sub, super,
text-top und text-bottom können nicht auf Tabellenzellen angewendet werden.
Standardwert ist baseline
Vererbung
Nein
Beispiel
.supi{ vertical-align: super;}
