Grundlagen CSS
Textformatierungen
Dass Bilder und Grafiken ein gern und viel eingesetztes Mittel sind, um einen - vielleicht sonst eher langweiligen - Text aufzupeppen, dass weiss ja nun eigentlich jeder Webseiten-Bastler. Jedoch wenn eine Sache oftmals stiefmütterlich im Webdesign behandelt wird, dann ist es die Gestaltung mit Text.
Dabei haben Webdesigner dank CSS die absolute Kontrolle über das Schriftbild auf ihren Webseiten und können mit diesem Hilfsmittel ihren Worten zusätzliche Bedeutung zukommen zu lassen. Fangen wir also erst einmal bei der Schriftgrösse an.
Schriftgrösse
Kapitel 7
In der CSS wird die Schriftgrösse durch die Eigenschaft font-size definiert. Der dieser Eigenschaft zugeordnete Wert - also die Grösse - kann dabei sowohl fest (z.B. Pixel (px), Point (pt) ) als auch relativ (z.B. % oder em) angegeben werden. Dabei bezieht sich die relative Angabe auf die im Browser eingestellte "Normalgrösse"
Wird die ebenfalls relative Massangabe em in einem Kind-Element verwendet, so bezieht sich diese Angabe auf das Elternelement und die dort festgelegte Schriftgrösse. Das kann unter Umständen dazu führen, dass letztendlich die Schriftgrösse kleiner in der Ausgabe ist, als eigentlich gewollt, weil bereits im Elternelement eine relative Angabe verwendet wurde, die sich auf die Browservoreinstellung "Normalgrösse" bezieht.
Bei den festen Angaben ist die Angabe der Schriftgrösse in px einer pt-Angabe deutlich vorzuziehen. Der Grund liegt darin, dass die Massangabe "Point" auf unterschiedlichen Betriebssystemen unterschiedlich definiert ist, und es somit zu überraschungen kommen kann, wie unterschiedlich z.B. eine 4pt grosse Schrift auf einem MAC- und einem Windows-Rechner dargestellt werden.
Beispiel
(Angabe von Schriftgrössen in der CSS)
Im folgenden Beispiel werden 3 unterschiedliche - feste - Schriftgrößen definiert. So bekommen alle div-, p- und ul-Elemente die Schriftgrösse 12px zugewiesen, während alle "p-Tags" in der Klasse small 10px gross sind und die überschrift h1 20px gross dargestellt wird.
p,div,ul { font-size:12px; }
p.small { font-size:10px; }
h1 { font-size:20px; }
Die jeweilige Ausgabe ist folgende:
Testtext p, div und ul 12px
Testtext p class "small" 10px
Testtext h1 Überschrift 20px
Benutzerfreundlicher und damit empfehlenswerter ist die Angabe von relativen Grössen. Bei einer em-Angabe muss man dazu wissen, dass 1em bereits verhältnismässig gross dargestellt wird. Aus diesem Grund werden em-Grössen oftmals "Komma-Angaben" gemacht, die allerdings - bitte merken! - mit Punkt anstatt mit Komma geschrieben werden (z.B. 0.9em).
So, das war die "Schriftgrösse". Aber auch die "Schriftart" ist ein wichtiges Mittel zu Textgestaltung. Wie man dabei CSS sinnvoll einsetzen kann ...