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

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

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.

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

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.

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?

unicode-bidi

Beispiel

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?