# Stile für die Gestaltung von Texten

## color

#### Beispiel

    .gruen { color: green; font-size: 14px; font-weight: bold}
    .teal { color: rgb(0,128,128); font-size: 14px; font-weight: bold}
    .olive { color: #808000; font-size: 14px; font-weight: bold}

#### Darstellung

Es ist alles so bunt hier!

## direction

#### Beispiel

blockquote.eng { direction: ltr; }

blockquote.heb { direction: rtl; }

or

<blockquote style="direction: rtl; unicode-bidi: bidi-override;">

ABC DEF GHI JKL MNO PQR STU VWX YZ

</blockquote>

#### Darstellung

> ABC DEF GHI JKL MNO PQR STU VWX YZ

## letter-spacing

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

Darstellung:

Stil mit Stil

Stil mit Stil

Stil mit Stil

Stil mit Stil

## text-align

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

#### Darstellung

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

#### Beispiel

    .td { text-align: '.' }

255.365 23.1 0.18733 1234373.43

## text-decoration

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>

#### Darstellung

Auf einer Linie

Auf einer Linie

Auf einer Linie

## text-indent

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

#### Darstellung

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

## text-shadow

#### Beispiel

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

### Schattenwelt

:first-line wendet den Textschatten auf die erste Zeile eines Absatzes an. Auch hier wird ein fiktionales Tag benutzt.

Hier werden drei Schatteneffekte notiert. Die Reihenfolge in der Liste steuert, welcher Effekt über den anderen Effekten zu liegen kommt.

* Der erste Effekt liegt unten,

* der zweite Effekt liegt über dem ersten,

* der dritte Effekt liegt oben über dem zweiten Effekt.

#### Beispiel

     p { text-shadow: 0px 0px 20px yellow,
                      0px 0px 10px orange,
                      red 5px -5px; }

#### Darstellung

Schattenwelt

## text-transform

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

#### Darstellung

Wie groß kann ein kleiner Hund ohne Hütte werden?

Wie groß kann ein kleiner Hund ohne Hütte werden?

Wie groß kann ein kleiner Hund ohne Hütte werden?

Wie groß kann ein kleiner Hund ohne Hütte werden?

## unicode-bidi

#### Beispiel

<blockquote style="direction: rtl; unicode-bidi: bidi-override;">

ABC DEF GHI JKL MNO PQR STU VWX YZ

</blockquote>

#### Darstellung

> ABC DEF GHI JKL MNO PQR STU VWX YZ

## white-space

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

#### Darstellung

Wie groß kann ein kleiner Hund ohne Hütte werden?

## word-spacing

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

#### Darstellung

Wie groß kann ein kleiner Hunde ohne Hundehütte werden?

Wie groß kann ein kleiner Hunde ohne Hundehütte werden?