Schrift und Farbe
Erscheinungsbild einer Webseite
Farben tragen wesentlich zum Erscheinungsbild einer Webseite bei, ebenso die Wahl der Schriftart, Schriftgröße usw.. Im Folgenden sollen einige dieser Faktoren etwas genauer betrachtet werden.
Schriften und Schriftfamilien
Zur Auswahl stehen sehr viele verschiedene Schriften, die man in Schriftfamilien eingeteilt hat:
- Serif-Familie: Hierzu gehören Schriften, deren Zeichen mit Serifen - das sind dekorativen Häkchen - dargestellt werden. Beispiele sind Times, Georgia ... .
- Sans-Serif-Familie: Hierzu gehören die serifenlose Schriften. Beispiele sind Arial, Verdana, ... .
- Monospace-Familie: Hierzu gehören die Schriften, die jedes Zeichen gleich breit darstellen. Beispiele sind Courier, Courier New ... .
- Cursive-Familie: Hierzu gehören Schriften, die einer Handschrift gleichen. Beispiele sind Comic Sans, Cartoon, ... .
- Fantasy-Familie: Hierzu gehören die etwas exotischeren Schriften. Beispiele sind Last Ninja, Wingdings, ... .
Die Schrift bzw. Schriftfamilie legt man normalerweise für die gesamte Webseite fest. Dies
erreicht man, indem man eine Regel mit dem body-Selektor schreibt, z.B.:
body
{
font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
}
Durch die Aufzählung der möglichen Werte wird hier eine Rangfolge festgelegt. Wenn die Schrift Verdana verfügbar ist, dann benutze diese Schrift. Wenn nicht, dann benutze die Schrift "Trebuchet MS", sofern sie verfügbar ist (die Anführungszeichen werden hier benötigt, da der Schriftname aus zwei Wörtern besteht) usw.. Als letzter Eintrag in der Rangfolge wird die Schriftfamilie sans-serif angegeben. Das bedeutet, dass die im Browser voreingestellte serifenlose Schrift benutzt werden soll, falls alle in der Rangfolge vorher genannten Schriften nicht installiert sind.
Schriftgröße
Die Schriftgröße kann auf unterschiedliche Weise festgelegt werden, wie die folgenden Regeln beispielhaft aufzeigen:
body { font-size: 14px; }
h1 { font-size: 150%; }
h2 { font-size: 1.2em; }
Die erste Regel legt die Schriftgröße absolut fest. Alle Elemente, die im Elementebaum Nachkommen
des <body></body>-Elements sind, werden mit einer Höhe von 14 Pixeln dargestellt.
Auf die Bedeutung von Pixeln gehen wir im Abschnitt
Pixelgrafik
nochmal genauer ein.
Die zweite und dritte Regel legen die Schriftgröße relativ zu einer anderen fest.
Die Angabe 150% in der zweiten Regel besagt, dass die Schriftgröße eines
<h1></h1>-Elements 150 Prozent der Schriftgröße des Elternelements
im Elementebaum beträgt. Wenn wie oben das Elternelement <body></body> die
Schriftgröße von 14 Pixeln hat, dann soll die Schriftgröße des <h1></h1>-Elements
folglich 21 Pixel betragen. Analog die Angabe 1.2em in der dritten Regel. Hier soll
die Schriftgröße das 1.2-fache der Schriftgröße des Elternelements im Elementebaum betragen
Wie soll man die Schriftgröße angeben - absolut oder relativ? Am besten ist es, wenn man die Schriftgröße in einer body-Regel absolut angibt - am besten sogar mit einem Schlüsselwort, wie unten gezeigt wird. Die Schriftgröße der anderen Elemente bezieht man dann relativ auf diese vorgegebene Schriftgröße.
body { font-size: small; }
h1 { font-size: 150%; }
h2 { font-size: 1.2em; }
Schriftfarbe und Schriftgewicht
Zur Festlegung weiterer Schrifteigenschaften muss man wissen, wie die passenden Attribute heißen und welche Werte ihnen zugewiesen werden können.
h1 { font-weight: bold; color: red; }
Diese Regel legt fest, dass eine Überschrift 1. Ordnung fett und mit roter Farbe dargestellt werden soll. Weitere Eigenschaften und zulässige Eigenschaftswerte musst du einem Nachschlagewert entnehmen. Ganz kurz werden wir hier nur noch auf Farbangaben eingehen.
Farbangaben
Farben können ebenfalls auf sehr unterschiedliche Weise festgelegt werden. Die Regeln unten zeigen
diese Möglichkeiten auf. Am einfachsten ist es, vordefinierte Farbwerte wie yellow zu
verwenden. Allerdings hat man dann nur sehr beschränkte Möglichkeiten. Es gibt nur wenige Farben, die
mit einem Farbnamen angegeben werden können. Flexibler ist man, wenn man Farben
über ihre Zusammensetzung aus Rot-, Grün- und Blau-Werten beschreibt. Das ist aber eine
eigene Problematik, die nicht hier, sondern im Abschnitt
Farbwerte
genauer behandelt wird.
body { background-color: yellow; color: black; }
h1 { color: rgb(70%, 40%, 0%); }
h2 { color: rgb(200, 133, 0); }
h2 { color: #cb23ff; }