Erweiterte Textformatierung mit CSS
Herzlich willkommen zu meinem ersten Tutorial und herzlichen Glückwunsch, dass du es bis hierher geschafft hast. Ich möchte hier die erweiterte Textformatierung in CSS näher beschreiben.
Das wichtigste bei langen Texten auf Webseiten ist die richtige Formatierung des Texts. Die entscheidet darüber, ob es angenehm ist, den Text zu lesen, ob der Text auch von außen ansprechend aussieht usw.
1. Die Schriftart
Es gibt viele verschiedene Schriftarten… schöne und weniger schöne. Man sollte auf seiner Webseite Schriften verwenden, die jedem zur Verfügung stehen, wie z. B. Times New Roman oder Verdana und keine ausgefallenen, wie Homoaraki oder MonkeyBoy.
In CSS wird die Schriftart folgendermaßen definiert:
font-family: Verdana, Helvecia, Tahoma, sans-serif.
Hier sind mehrere Schriften aufgeführt. Das bedeutet, wenn die erste („Verdana“), nicht auf dem PC des Clienten vorhanden ist, wird die zweite („Helvecia“) ausgewählt usw. Der letzte Wert kommt zum Zuge, wenn gar keine Schriften vorhanden sind. Hier gibt es folgende Arten:
sans-serif: Schriften ohne Verzierung, wie Arial oder Verdana
serif: Schriften mit Verzierung, wie Times New Roman oder Book Antiqua.
monospace: Schriften mit gleicher Zeichenbreite, wie Courier New
2. Der Schriftstil (kursiv, fett, durchgestrichen und unterstrichen)
Um Texte zu unterstreichen wird folgende Definition verwendet:
text-decoration: underline;
Um Texte durchzustreichen nimmt man:
text-decoration: line-through;
Um Texte überzustreichen nimmt man:
text-decoration: overline;
Diese Elemente kann man beliebig kombinieren, z. B.
text-decoration: underline, overline;
gibt einen unter- und überstrichenen Text aus
Text werden kursiv gemacht mit:
font-style: italic;
Fette Texte gibt’s mit:
font-weight: bold;
Sehr Fette mit:
font-weight: bolder;
Und sehr dünne mit:
font-weight: lighter;
Mit diesen Textformatierungen sollte man sparsam umgehen und nicht ganze Textpassagen fett, kursiv oder unterstrichen machen, dadurch wird der Text zerstört. Hier gilt: weniger ist manchmal mehr.
3. Schriftgröße
Die Schriftgröße kann mit: font-size angepasst werden. Hier kann man die Werte entweder in Punkten (pt) oder in Prozent. Z B.:
font-size: 12pt;
4. Die Textausrichtung
Die Textausrichtung wird in CSS mit der Eigenschaft text-align angegeben. Hier gibt es die folgenden Werte:
text-align: left; macht den Text linksbündig
text-align: center; macht den Text zentriert
text-align: right macht den Text rechtsbündig
text-align: justify macht den Text zu einem Blocksatz.
5. Zeilenhöhe, Zeichen- und Wortabstand
Wenn man Texte gut und flüssig lesen möchte, ist es gut, wenn zwischen den Zeilen etwas größere Abstände sind. Wenn man aber viel Text auf kleinen Raum zwängen will (Kleingedrucktest), muss man die Zeilenhöhe manchmal kleiner machen.
In CSS geht das mit der Eigenschaft:
line-height: 14pt;
Bei einer Schriftgröße von 12pt ist zum Beispiel eine Zeilenhöhe von 10pt für das Kleingedruckte gut, 12pt sind auch noch zu wenig, 14pt sind normal und 16pt sind angenehm zu lesen. Bei langen Texten sollte man größere Zeilenhöhen bestimmen.
Mit der Angabe:
letter-spacing: 0pt;
kann man den Abstand zwischen den einzelnen Zeichen bestimmen. Hier gilt: 0pt sind normal, 1pt ist gut zu lesen und ab da werden die Abstände zu groß. Für Copyrighthinweise oder Autornamen kann man auch größere Abstände benutzen.
Die Angabe
word-spacing:1px;
bestimmt die Länge des Leerzeichens. Auch hier gilt: 1pt–2pt ist normal, alles andere ist „größer“.
6. Groß- und Kleinschreibung
In CSS gibt es zusätzlich die Möglichkeit sogenannter Kapitälchen. Das sind „kleine“ Großbuchstaben.
Man kann das folgendermaßen definieren:
font-variant: small-caps;
Man sollte Kapitälchen nur in Überschriften oder Formatierungen verwenden, die nicht als Fließtext gelesen werden.
7. Pseudo-Klassen
Jetzt aber zum interessantesten Teil dieses Tutorials. Wie verbinde ich all das zu einem schön formatierten Text?
Schaut euch mal diese Seite: http://ps3web.milten.lima-city.de/sonstiges/css.html an. Hier habe ich eine Überschrift gestaltet – mit folgendem CSS-Code:
.titel {
font-family:Book Antiqua,Times New Roman,serif;
font-size:22pt;
letter-spacing:2pt;
text-align:center;
width:600px;
margin-bottom:15px;
}
width:600px; gibt die maximale Breite in Pixeln an und margin-bottom:15px; sagt, dass es bis zum nächsten Element 15 Pixel Abstand nach unten sind. Danach kommt der Autor, der mit
.autor {
font-family:Verdana,sans-serif;
font-size:10pt;
text-align:center;
width:600px;
letter-spacing:1pt;
font-variant:small-caps;
margin-bottom:15px;
}
formatiert ist. Auch hier habe ich die Breite wieder auf 600 Pixel gesetzt. Daran liegt es auch, dass der Text nicht vollständig in der Mitte des Dokumentes ist, sondern nur in der Mitte von den 600 Pixeln.
Nun kommt der Text, den ich so formatiert habe:
.fliestext {
font-size:12pt;
word-spacing:2pt;
letter-spacing:1pt;
line-height:16pt;
width:600px;
text-align:justify;
}
Doch warum ist jetzt die erste Zeile fett und der Buchstabe „L“ ganz groß? – Das liegt an den Pseudo-Klassen. Hier habe ich geschrieben:
.fliestext:first-line{
font-weight:bold;
}
Das bedeutet, dass im Element Fließtext die erste Linie (first-line) fett formatiert werden soll. Und hier
.fliestext:first-letter{
font-family:Times New Roman,serif;
font-size:40pt;
line-height:30pt;
float:left;
padding-right:5px;
font-weight:lighter;
}
ist das große „L“ formatiert. first-letter bedeutet also der erste Buchstabe des Elements .fließtext. Doch was bedeutet „float:left;“? – Ohne float:left; würde neben dem „L“ nur eine Zeile statt 2 (Mozilla: 3) sein. float bedeutet, dass der Text an der linken Seite des Objekts vorbeifließt.