Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# Text – Stile für die Gestaltung von Texten

Die Eigenschaften für die Textformatierung sind vergleichbar mit den Absatzvorlagen in Quark. Sie erstellen Einzüge, spationieren oder vergrößern den Raum zwischen zwei Wörtern.

direction • letter-spacing • text-align • text-decoration • text-indent • text-shadow • text-transform • unicode-bidi • white-space • word-spacing

## direction

IE5+ (PC) M1 Version: CSS2 Erblich: Ja | direction steuert die Richtung des Textflusses (von links nach rechts oder von rechts nach links) und kann auf Texte, Anführungszeichen, Zeichenketten und auf die Reihenfolge von Spalten in Tabellen oder die Ausrichtung des Textes mit text-align angewendet werden. | ltr | rtl

Der vorgegebene Textfluss geht von links nach rechts für Sprachen wie Deutsch, Englisch und Französisch. Sprachen wie Chinesisch und Hebräisch fließen von rechts nach links. Wenn direction auf einen Inlinetext angewendet werden soll, muss unicode-bidi entweder auf bidi-override oder eingebettete Werte gesetzt werden.

ltr setzt den Text von links nach rechts und ist die Vorgabe.

rtl setzt den Text von rechts nach links.

#### Beispiel

    blockquote.eng { direction: ltr; }
    blockquote.heb { direction: rtl; } oder
    <blockquote style="direction: rtl; unicode-bidi: bidi-override;">
        ABC DEF GHI JKL MNO PQR STU VWX YZ
    </blockquote>

↑

## letter-spacing

IE4+ M 1 N6 Version: CSS1 Erblich: Ja | letter-spacing steuert den Leerraum zwischen aufeinander folgenden Zeichen oder Buchstaben. Ein positiver Wert erhöht den Abstand, ein negativer Wert lässt die Zeichen enger aneinander rücken. | normal | length

normal ist die Standardeinstellung. Die Angabe von normal stellt sicher, dass vorangegangene Deklarationen den Raum zwischen aufeinander folgenden Zeichen nicht beeinflussen – mit einer Ausnahme. Der Raum kann auch nach der Angabe normal aufgrund der Ausrichtung durch die Eigenschaft text-align verändert worden sein.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

#### Beispiel

    .raum_normal { letter-spacing: normal; font-size: 24px }
    .raum_pixel { letter-spacing: 3px; font-size: 24px }
    .raum_ems { letter-spacing: 1em; font-size: 24px }
    .raum_0 { letter-spacing: 0; font-size: 24px }
    ...
    <p class="raum_ems">  Stil mit Stil</p>
     <p class="raum_normal">Stil mit Stil</p>
     <p class="raum_pixel">Stil mit Stil</p>
     <p class="raum_0">Stil mit Stil</p>

↑

## text-align

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja | text-align richtet den Text aus. | left | right | center | justify

left ist die Standardeinstellung: Text wird linksbündig ausgerichtet.

right richtet den Text rechtsbündig aus.

center zentriert den Text mit gleichem Weißraum nach rechts und links.

justify richtet den Text im Blocksatz aus und fügt dafür zusätzlichen Weißraum zwischen Zeichen und Wörter ein. Beachten Sie, dass bislang kein Browser automatische Silbentrennung aufweist, so dass Texte im Blocksatz auf dem Monitor mit großer Wahrscheinlichkeit unschöne Lücken aufweisen werden. Auch die weiche Silbentrennung, die durch &shy; im Quelltext des HTML-Dokuments verwendet werden kann, wird nur von Microsoft Internet Explorer verlässlich erkannt, während andere Browser die weichen Trennstriche schon mal unversehens mitten im Text anzeigen.

Die Eigenschaft letter-spacing kann die Ausrichtung im Blocksatz überschreiben.

#### Beispiel

     .links { text-align: left; width: 250px}
     .rechts { text-align: right; width: 250px}
     .zentriert { text-align: center; width: 250px}
     .blocksatz { text-align: justify; width: 250px}

     ...

     <p class="links"> Als es klingelte, ... </p>
     <p class="rechts"> Als es klingelte, ... </p>
     <p class="zentriert"> Als es klingelte, ... </p>
     <p class="blocksatz"> Als es klingelte, ... </p>

↑

## text-decoration

IE4+ O5+ N4+ M1 Version: CSS1 Erblich: Nein | text-decoration unterstreicht und überstreicht Texte, streicht Text in der Mitte durch und/oder veranlasst, dass der Text blinkt. | none | [ underline &| overline &| line-through &| blink ]

none ist die Standardeinstellung. Die Angabe von none stellt sicher, dass vorangegangene Deklarationen den Text nicht beeinflussen.

underline zieht eine Linie unter dem Text. Wenn der Text in unterschiedlichen Farben zusammengestellt ist, wird die Linie die Farbe des ersten Elements annehmen.

overline zieht eine Linie über dem Text. Wenn der Text in unterschiedlichen Farben zusammengestellt ist, wird die Linie die Farbe des ersten Elements annehmen.

line-through zieht eine Linie mitten durch den Text. Wenn der Text in unterschiedlichen Farben zusammengestellt ist, wird die Linie die Farbe des ersten Elements annehmen.

blink veranlasst, dass der Text blinkt.

Beispiel

    .linien       {  text-decoration: underline overline line-through; }
    .keine_linien {  text-decoration: none}
    .blinkend     {  text-decoration: blink; color: #003366}

     ...

    <p class="linien"> Auf einer Linie</p>
    <p class="keine_linien">Auf einer Linie</p>
    <p class="blinkend">Auf einer Linie</p>

#### Bemerkung

blink wird nur von Netscape 4 unterstützt.

↑

## text-indent

IE4+ O5+ N4+ M1 Version: CSS1 Erblich: Ja | text-indent zieht die erste Textzeile nach rechts ein oder nach links aus. Wenn length oder percentage negativ sind, wird die Linie nach links ausgezogen. Ein positiver Wert zieht den Text nach rechts ein. | length | percentage

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) basiert auf der vollen Länge des Textblocks, der als 100% angesehen wird.

#### Beispiel

    .zentimeter { text-indent: 0.5cm; width: 250px}
    .picas { text-indent: -15pc; width: 250px}
    .punkt { text-indent: 24pt; width: 250px}
    .prozent { text-indent: 5.5%; width: 250px}
    .negativ { text-indent: -8%; width: 250px}
    ...

    <p class="zentimeter"> Als es klingelte,... </p>
    <p class="picas"> Als es klingelte, ... </p>
    <p class="punkt">Als es klingelte, ... </p>
    <p class="prozent">Als es klingelte, ... </p>
    <p class="negativ">Als es klingelte, ... </p>

↑

## text-shadow

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | text-shadow ist eine durch Kommata getrennte Liste von Effekten aus Farben, Weichzeichner und Schatten, die auf ein Zeichen, ein Wort oder einen Text angewendet werden. Jeder Effekt wird in der angegebenen Reihenfolge über dem vorangegangenen angewendet. Der Schatteneffekt taucht stets unter dem Text auf. Für jeden Effekt kann optional eine Farbe angegeben werden, außerdem ein horizontaler und vertikaler Versatz und der Abstand des Weichzeichnungseffekts vom Text. | none | [ color &| length length length? , ]* [ color &| length length length? ]

none ist die Voreinstellung. Durch die Angabe von none wird kein Schatteneffekt erzeugt.

color ist optional und steuert die Farbe des Schatteneffekts. Wenn keine Farbe für den Schatteneffekt notiert ist, wohl aber color explizit als Textfarbe, wird diese Farbe für den Effekt benutzt. Der Wert für die Farbe kann sowohl vor als auch nach den Längenangaben notiert werden.

length length length?: Der erste Wert steuert den horizontalen Abstand, um den sich der Effekt nach rechts oder links erstreckt, wobei ein positiver Wert nach rechts und ein negativer Wert nach links ausdehnt. Ein Wert von 0 unterdrückt den horizontalen Schatteneffekt.

Der zweite Wert steuert den vertikalen Abstand nach oben oder unten, wobei ein positiver Wert den Effekt nach oben ausdehnt, ein negativer Wert nach unten. Ein Wert von 0 unterdrückt den vertikalen Schatteneffekt.

Der optionale dritte Wert setzt den Radius, um den der Weichzeichnungseffekt des Schattens den Effekt ausdehnt.

Wenn der erste und der zweite Wert auf 0 gesetzt werden, tritt nur der Weichzeichnungseffekt in Kraft.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

Textschatten können auch zusammen mit den Pseudoelementen :first-letter und :first-line benutzt werden.

:first-letter wendet den Textschatten mit einem fiktionalen Tag auf den ersten Buchstaben eines Absatzes an. Die Syntax ist <p:first-letter> ... </p:first-letter>. Das schließende Tag ist zwingend erforderlich.

#### Beispiel

    h3:first-letter { font-size: 36px;
                      color: darkslategray;
                      text-shadow: red 0px 0px 5px;} ...
    <h3>Schattenwelt</h3>

↑

## text-transform

IE4+ N4+ M1 Version: CSS1 Erblich: Ja | text-transform steuert die Groß- und Kleinschreibung eines gewählten Textes. | capitalize | uppercase | lowercase | none

capitalize stellt den ersten Buchstaben jedes Wortes als Großbuchstaben dar.

uppercase stellt alle Buchstaben eines Textes in Großbuchstaben dar.

lowercase stellt alle Buchstaben eines Textes in Kleinbuchstaben dar.

none ist die Voreinstellung. Die Angabe von none stellt sicher, dass keine vorangegangenen Deklarationen den ausgewählten Text beeinflussen.

#### Beispiel

    .trans_none { text-transform: none}
    .trans_cap { text-transform: uppercase}
    .trans_klein { text-transform: lowercase}
    .trans_erster { text-transform: capitalize}

    <p class="trans_erster">
    Wie gro&szlig; kann ein kleiner Hund ohne H&uuml;tte werden?</p>
    <p class="trans_cap">
    Wie gro&szlig; kann ein kleiner Hund ohne H&uuml;tte werden?</p>
    <p class="trans_klein">
    Wie gro&szlig; kann ein kleiner Hund ohne H&uuml;tte werden?</p>
    <p class="trans_none">
    Wie gro&szlig; kann ein kleiner Hund ohne H&uuml;tte werden?</p>

↑

## unicode-bidi

IE5+ (PC) M1 N6 Version: CSS2 Erblich: Nein | unicode-bidi steuert die Richtung des Textes und wird zusammen mit der direction-Eigenschaft benutzt. wenn innerhalb eines Dokumentes der Text in verschiedene Richtungen laufen soll (z.B. englischer und hebräischer Text). | bidi-override | embed | normal

Wenn direction auf einen Inlinetext angewandt wird, muss unicode-bidi entweder auf bidi-override oder auf embed gesetzt werden.

bidi-override überschreibt die Textrichtung in einem Inline- oder Blockelement, das nur Inlineelemente enthält.

embed wird benutzt, um bis zu 15 Inlineelemente in den Textfluss einzusetzen.

normal ist die Voreinstellung und erlaubt die Nutzung des bidirektionalen Algorithmus, der die Textrichtung steuert.

Das Beispiel funktioniert am besten in IE5.0 oder IE5.5/6:

#### Beispiel

    <blockquote style="direction: rtl; unicode-bidi: bidi-override;">
       ABC DEF GHI JKL MNO PQR STU VWX YZ
    </blockquote>

↑

## white-space

IE5.5+ M1 N4+ O5+ Version: CSS1 Erblich: Ja | white-space steuert den Weißraum innerhalb eines Elements. | normal | pre | nowrap

normal ist die Standardeinstellung.

pre verhält sich wie das HTML-Tag <pre>.

nowrap lässt den Text auf einer Zeile laufen, bis der Text beendet ist oder ein HTML-Tag <br> entdeckt wird. <br> erzeugt einen Zeilenumbruch auf die nächste Zeile.

#### Beispiel

    p { white-space: normal; }
    p { white-space: pre; }
    p { white-space: nowrap; }  oder

    <p style="white-space: pre;">
     Wie gro&szlig; kann ein kleiner Hund ohne
     H&uuml;tte werden?</p>

↑

## word-spacing

IE5 (Mac) IE6 (PC) M1 N6 O5+ Version: CSS1 Erblich: Ja | word-spacing dehnt oder staucht den Weißraum zwischen aufeinander folgenden Wörtern. Ein positiver Wert dehnt den Weißraum aus, ein negativer staucht den Weißraum. | normal | length

normal ist die Standardeinstellung. Die Angabe normal verhindert, dass vorangegangene Deklarationen den Text beeinflussen.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

#### Beispiel

    p { word-spacing: normal; }
    p { word-spacing: 1mm; }
    p { word-spacing: 2.5em; } oder

    <p style="word-spacing: 20px;">
       Wie gro&szlig; kann ein kleiner Hunde ohne Hundeh&uuml;tte werden?</p>
    <p style="word-spacing: -10px;">
      Wie gro&szlig; kann ein kleiner Hunde ohne Hundeh&uuml;tte werden?</p>

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen