Letzte Änderung am 21.01.2005
Cascading Style Sheets - ein Tutorial
Vorbemerkung: Die Kapiteleinteilung hält sich an das Buch von Eric A. Meyer: Cascading Style Sheets, The Definitive Guide, O'REILLY, 2004.
Es soll eine sinnvolle Adaptation der W3C-Regeln zu CSS1, 2 und 2.1.aus der Perspektive von Lernenden sein. Die eingefügten Demos lassen sich-fast ohne Ausnahme-im Quelltext editieren und ansehen. Der Code ist so einfach wie möglich gehalten und das Tutorial kann auch offline benutzt werden. CSS-Bereiche, die in den gängigen Browsern bisher nicht implementiert wurden, werden nicht dokumentiert.
Andreas Lutz MatteDesign, Bern

Kapitelübersicht

Kapitel 6: Text-Eigenschaften

• Text-Einrückung (text-indent)
• Horizontale Textausrichtung (text-align)
• Vertikale Textausrichtung (line-height, vertical-align)
• Wort- und Buchstabenabstände(word-spacing, letter-spacing)
• Text-Umwandlung(text-transform)
• Text-Auszeichnung (text-decoration)
• Leerzeichen(white-space)
• Textrichtung (text-direction)

Einrückung und horizontale Ausrichtung
Text Einrückung

Demo 1

Text-indent rückt die erste Text-Zeile eines Blockelemntes ein oder aus. Text-Indent kann nagtive oder positive Werte enthalten.

Horizontale Ausrichtung

Demo 2

Im Gegensatz zum varalteten <center>-Tag, das alle Elemente eines Dokumentes zentriert, beziehen sich diese Angaben nur auf Text.

Vertikale Ausrichtung
Zeilenhöhe

Demo 3

Line-Height vergrössert oder verkleinert die Textbox, welche genau die Grösse des Fonts umfasst. Dabei werden die Mehr- oder Minderwerte von Line-height halbiert und je oben und unten zugeschlagen oder abgezogen.
Begriffe: content area: Höhe der Textbox als Schriftgrösse.
Leading: Font-size minus Zeilenhöhe.
Das vorgegebene Verhältnis zwischen Zeilenhöhe und Schriftgrösse in den Browern beträgt 1.2

Vertikale Ausrichtung von Text

Demo 4
Demo 5

In Tabellenzellen wird nur baseline, top, middle und bottom erkannt.
Baseline
Beispiel: img{vertical-align:baseline} //bezieht sich auf die Basislinie des Elternelemnts
Superscripting (Überschreibung) und Subscripting (Unterschreibung)
Bezieht sich auf die Baseline des Elternelements
Bottom und Top feeding
Beispiel: .feeder {vertical-align:bottom} //Bezieht sich auf des untere Ende der Zeilenbox. (Texthöhe und Zeilenhöhe)
text-bottom und texttop:
Bezieht sich auf die Baseline der Textbox. (Schriftgrösse)
middle:
Bezieht sich auf die Mitte der Textbox.
Prozentangaben
Berechnet sich nach der Zeilenhöhe des Elements selbst (nicht des Parent-Elements)
Absolute Angaben
Erhöht oder vertieft die Position um den Wert gegenüber einer normalen Position.

Wort- und Buchstabenabstände

Demo 6

Text Umwandlung

Demo 7

Text-Auszeichnung

Demo 8

Bei Links, wo es ein browserspezifisches Default-Verhalten gibt, ist die Angabe:
a{text-decoration: none;} notwendig, um die automatische Unterstreichung zu entfernen.
Beispiel: a:link, a:visited{text-decoration: overline underline} //Unter- und überstrichen

Text-Shadows (Seit CSS 2.1 depreciated)

Umgang mit Leerraum

Leerraum wird, ausser in pre und pre-wrap auf einen einzigen Leerspace reduziert.
Nowrap kannn nur mit einem <br> unterbrochen werden.
Unterschiede zwischen den Withespace-Eigenschaften

Wert	Leerraum	Zeilenumbrüche	Automatischer Umbruch
normal	reduziert	ignoriert	erlaubt
nowrap	reduziert	ignoriert	verhindert
pre	bleibt erhalten	berücksichtigt	verhindert
pre-wrap	bleibt erhalten	berücksichtigt	erlaubt

Beispiel:...

Textrichtung

Definiert die Textrichtungen links-rechts oder rechts-links.

Weiter zu Kapitel 7: Grundlagen des visuellen Designs