24.01.2008
Schrift- und Textformatierungen
Für die üblichen Text-Ausrichtungungen sind die nachfolgenden Eigenschaften weitgehend bekannt:
text-align: left; für linksbündigen Text (Standardeinstellung)text-align: right; für rechtsbündigen Text
text-align: justify; für links- und rechtsbündigen Text (Blocksatz) und
text-align: center; für zentrierten Text
Darüber hinaus gibt es noch weitere Attribute, mit denen man Text gestalten kann:
1. letter-spacing
Mit letter-spacing wird durch Zuweisung eines entsprechenden Wertes der Abstand zwischen den einzelnen Buchstaben festgelegt.
Demo:
Diesem Satz liegt ein letter-spacing: 3px; zugrunde.
2. word-spacing
Ähnlich funktioniert's mit word-spacing, wobei hier der Abstand zwischen den einzelnen Wörtern angegeben wird:
Demo:
Hier haben die einzelnen Wörter durch word-spacing: 7px; einen Abstand von 7px.
3. text-decoration
Wer die manchmal störenden Link-Unterstriche entfernen will, bedient sich eines text-decoration: none;.
Mit text-decoration: underline; kann Text unterstrichen werden.
text-decoration: overline; bewirkt ein Überstreichen des Textes.
Statt Text einfach zu löschen, kann man ihn zu Demonstrationszwecken mit text-decoration: line-through; auch durchstreichen:
Demo:
Hier wurde das Wort "doppelt" doppelt geschrieben und deshalb einmal durchgestrichen.
4. text-indent
Mit text-indent: 40px; wird der Text der jeweils ersten Zeile eines Absatzes eingerückt. Hier um einen Wert von 40px.
Die zweite Zeile sowie alle weiteren erscheinen dann wieder linksbündig.
5. text-transform
Wer zu bequem ist, die Hochstelltaste für großgeschriebenen Text zu bedienen, oder dies vergessen hat, der kann es mit text-transform: uppercase; korrigieren:
Demo:
Dieser Text ist im Quelltext korrekt mit Groß- und Kleinbuchstaben geschrieben. Durch die Eigenschaft text-transform: uppercase; wird er jedoch durchgängig in Großschrift angezeigt.
Für durchgehende Kleinschrift - unabhängig von der Texteingabe - verwendet man text-transform: lowercase;
6. first-letter
Soll der erste Buchstaben eines Absatzes eine andere Formatierung haben, so kann man dies mit first-letter; definieren:
Der erste Buchstabe dieses Satzes ist 2em groß, in Schrägschrift und rot.
Die weiteren Zeilen haben wieder Normalschrift, bis ein neuer Absatz anfängt.
First-letter ist ein Pseudoelement. Seine Eigenschaften können nur zentral angegeben werden. Also entweder in einer ausgelagerten CSS-Datei oder in den Style-Angaben innerhalb des Head-Bereichs. Seine CSS-Angaben erfolgen so:
p:first-letter
{
font-size:2em;
font-style: italic;
color:red;
}
Diese Angabe schlägt auf sämtliche Absätze durch. Will man sie auf bestimmte Absätze begrenzen, so definiert man eine entsprechende Klasse nach folgendem Syntax:
p.first:first-letter
{
font-size:2em;
font-style: italic;
color:red;
}
HTML-Aufruf entsprechend mit <p class="first"> Text </p>
7. first-line
Analog zu "first-letter" lässt sich auch die erste Zeile eines Absatzes gesondert formatieren, z.B. in Fettschrift und blau. Das Ganze ist auch kombinierbar mit "first-letter", so dass , dadurch zusätzlich der erste Buchstabe wie oben in rot erscheint.
Diesem Absatz liegt folgende CSS-Formatierung zugrunde:
p.first2:first-letter
{
font-size:2em;
font-style: italic;
color:red;
}
p.first2:first-line
{
font-weight: bold;
color: blue;
}
<p class="first2">
Analog zu "first-letter" lässt sich auch ...
</p>