- die Online CSS Referenz
Impressum

Textformatierung

text-decoration | text-transform | letter-spacing | word-spacing | white-space | line-height | text-indent | text-align | vertical-align

text-decorationzur Übersicht    eins nach unten

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-decoration

text-transformzur Übersichteins nach obeneins nach unten

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;}

text-transform

letter-spacingzur Übersichteins nach obeneins nach unten

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;}

letter-spacing

word-spacingzur Übersichteins nach obeneins nach unten

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;}

word-spacing

white-spacezur Übersichteins nach obeneins nach unten

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;}

white-space

line-heightzur Übersichteins nach obeneins nach unten

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;}

line-height

text-indentzur Übersichteins nach obeneins nach unten

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-indent

text-alignzur Übersichteins nach obeneins nach unten

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;}

text-align

vertical-alignzur Übersichteins nach oben    

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;}

vertical-align