i

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; }

Suche

v
16.5.3.4.2.3
inf-schule.de/lehrkraefte/archiv/informationsdarstellunginternet_alt/formatierungcss/exkurs_css/schriftundfarbe
inf-schule.de/16.5.3.4.2.3
inf-schule.de/@/page/6D68rpJSe04ipk64

Rückmeldung geben