Eine Einführung in (X)HTML, CSS und Webdesign

http://jendryschik.de / archiv / einfuehrung / farben-und-hintergruende.html

4. Styling von Webseiten

Farben und Hintergründe

Sie können für ein Element wie zum Beispiel <div>, einzelne Worte oder gar das gesamte Dokument Hintergrundfarben oder -bilder definieren. Für den <body> würde das wie folgt aussehen:

body {
   color : black;
   background : white;
}

Farben kann man auf drei Arten angeben:

color : white;: Hier wird der Farbname direkt angegeben.
color : #fff;: Dies ist eine Angabe des hexadezimalen Farbwertes, auch sehr schön von Dave Raggett erklärt. Der Farbwert wird gewöhnlich in 6 Stellen angegeben, jedoch kann man anstatt #ffddee auch #fde schreiben.
color : rgb(255,255,255);: Wenn man die Hex-Farbwerte in den Dezimalbereich umrechnet, kann man sie in der gleichen Reihenfolge (Rot, Grün, Blau) in dieser Form auflisten.

Wenn Sie für ein Element einen Hintergrund deklarieren, so müssen Sie auch immer explizit einen Vordergrund angeben und umgekehrt. Das hat folgenden Grund: Deklarieren Sie die Schriftfarbe eines Elementes Schwarz und versäumen es, den Hintergrund kontrastierend festzulegen, so dass die Schrift darauf lesbar ist, kann es zu Problemen kommen, wenn die deklarierte Schriftfarbe sich mit der standardmäßigen Hintergrundfarbe des Benutzers deckt. Es kann zum Beispiel vorkommen, dass jemand in seinem Browser weiße Schrift auf schwarzem Hintergrund bevorzugt. Legen Sie eine dunkle Schrift fest und vergessen eine Hintergrunddefinition, kann diese Person ihre Seite nicht mehr lesen.
Daher ist es zwingend notwendig und auch vorgeschrieben, immer beides anzugeben!

Das Hintergrund der Seiten dieser Einführung (der violett-farbene Balken links) habe ich mit diesen Angaben deklariert:

body {
   color        : black;
   background   : white url(../bilder/banner.gif) repeat-y fixed 0% 0%;
}

Die "background"-Zeile für den "body" kann man wie folgt aufsplitten:

background-color : white;: Definiert die Hintergrundfarbe.
background-image : url(../bilder/banner.gif);: Hiermit wird das Hintergrundbild eingebunden. Mit url(...) gibt man den Pfad an, wo das Hintergrundbild liegt.
background-repeat : repeat-y;: Hierdurch wird angeben, ob und wie das Hintergrundbild wiederholt wird. repeat-y bedeutet dabei, dass es Richtung der y-Achse wiederholt wird, also nach vertikal. Weitere Möglichkeiten sind repeat-x (horizontale Wiederholung), repeat (generelle Wiederholung) und no-repeat (kein Wiederholung).
background-attachment : fixed;: Diese Angabe sorgt für den schönen Effekt, dass das Hintergrundbild nicht mitscrollt sondern fixiert stehen bleibt. Mit scroll bestimmt man, dass das Hintergrundbild gecrollt wird.
background-position : top left;: Hierdurch wird die Position des Hintergrundbildes bestimmt. In diesem Fall befindet es sich oben links. Weitere Möglichkeiten zur Positionierung sind bottom (unten) und right (rechts).

Schriftformatierung

Letzte Änderung: 07. März 2001