Grundlagen CSS
Textformatierungen
Wenn wir eine Zeitung oder auch ein Buch zur Hand nehmen und darin lesen, wird uns kaum bewusst werden, dass hierbei in erster Linie "Serifenschriften" wie Courier, Book-Antiqua, Georgia etc. verwendet werden. Das hat etwas damit zu tun, dass solche Schriften auf dem Papier die Lesbarkeit erhöhen, während auf dem Monitor eher das Gegenteil passiert.
Bei der Textgestaltung für den Bildschirm sollte man daher - im Haupttext - besser die serifenlosen Schriften wie Arial, Helvetica oder Verdana wählen. Unter Serifen sind die kleinen "Füsschen" zu verstehen, die manche Schriftarten haben (wie z.B. auch die auf diesen Seiten eingesetzte, hellgrüne Schrift für unsere Beispiele). In der CSS haben wir die Möglichkeit, die von uns gewünschte Schriftart gezielt für verschiedene Textbereiche zu wählen. Aber wie geht das?
Schriftart, -Stil und -Gewicht
Kapitel 8
Die Schriftart (font) wird in der CSS mit durch die Eigenschaft font-family definiert. Auch hier muss der Eigenschaft mindestens EIN Wert zugeordnet werden - also eine Schriftart. Es empfiehlt sich jedoch, immer mehrere (möglichst ähnliche und weit verbreitete) Schriftarten anzugeben, denn es ist nicht immer gewährleistet, dass der Besucher die von uns gewählte Schriftart auch auf seinem Rechner installiert hat und in DEM Augenblick die fehlende Schriftart automatisch von dessen System in eine "Alternative" umgewandelt wird. Das kann z.T. erhebliche Darstellungsunterschiede zur Folge haben.
Wie bereits in vorherigen Kapiteln beschrieben, so werden auch hier mehrere Werte durch Kommata voneinander getrennt.
Beispiel
(Angabe der Schriftart(en) )
p,div,ul { font-family:Arial,Helvetica,sans-serif; }
Erreicht wird durch diese Angabe, dass alle p-, div- und ul-Tags in der Schriftart "Arial" angezeigt werden, sofern diese auf dem Computer des Besuchers installiert ist. Ist das NICHT der Fall, wird automatisch auf die Schriftart "Helvetica" ausgewichen und ist auch DIESE nicht auf dem Rechner des Besuchers vorhanden, so wird auf eine weitere, beliebige, bei dem Besucher installierte serifenlose Schrift zurückgegriffen.
Beachtet werden sollte dabei, dass zusammengesetzte Fontnamen (z.B. Times New Roman) in einfache Anführungszeichen gesetzt werden müssen. Das sieht dann so aus:
p,div,ul { font-family:'Times New Roman'; ... }
Aus dem obigen Beispiel können wir AUCH erkennen, dass nicht nur konkrete Schritftarten angegeben werden können, sondern auch Obergruppen, wie z.B. sans serif, serif oder coursive.
Als weitere Gestaltungsmittel stehen uns der "Schriftstil" (font-style) und das "Schriftgewicht" (font-weight) zur Verfügung. Mit "Schriftstil" ist die Neigung der Schrift gemeint, also ob eine Schrift geneigt (kursiv) oder normal erscheint, während das "Schriftgewicht" die Dicke der Buchstaben angibt (fett oder normal).
Beispiel
(Angabe Schriftstil und -Gewicht )
p.schraeg { font-style:italic; }
Das bedeutet, dass alle "p-Tags" der Klasse schraeg kursiv dargestellt werden - also geneigt. Für die verschiedenen font-style-Angaben stehen die Werte normal (keine Neigung) und italic (geneigt) zur Verfügung.
p.fett { font-weight:bold; }
Im zweiten Beispiel wird die Dicke der Schrift festgelegt, also das "Schriftgewicht". Hier gibt es die Varianten lighter (dünner), normal (normal), bold (Fett) und bolder (extra Fett) sowie die Angabe konkreter Werte.
p.fett { font-weight:800; }
Aber das ist noch nicht ALLES zum Thema Textgestaltung. Etwas zu "Farbe" und weiteren Möglichkeiten...