Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

7.7 Das Box-Modell und die farbliche Gestaltung

Bei der farblichen Gestaltung der Flächen auf einer Webseite ist das Box-Modell besonders wichtig, deshalb hier eine explizite Zusammenfassung:

Eigenschaft Verhalten
background-color Definiert die Hintergrundfarbe für den Inhaltsbereich der Box.
padding Die Polsterung in der Kiste übernimmt die Farbe von background-color.
border Die Begrenzung der Kiste hat eine eigene Farbe, Linienart und Breite.
margin Der Abstand außerhalb der Kiste übernimmt die Farbe der umgebenden Box (Eltern-Element).

Die Hintergrundfarbe des Inhaltsbereichs geht übrigens bis unter die Rahmenlinie. Wenn die Rahmenlinie also wie bei den Linienarten dashed, dotted, double Lücken aufweist, sollte darin die Hintergrundfarbe des Elements durchscheinen.

Klingt alles gut, aber ein Bild sagt mehr als tausend Worte. Im folgenden Beispiel wird das transparente GIF-Logo im Kopfbereich mit einem hellgrauen Rahmen umgeben, und zwar nur mit Eigenschaften aus dem Box-Modell:

ToDo: Die Grafik im Kopfbereich farblich gestalten
  1. Ergänzen Sie die Regel von img#logo wie folgt:

    img#logo {
      background-color: white;
      padding: 10px;
      border: 10px solid #d9d9d9;

    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

So sieht die Logo-Grafik jetzt aus:

Abbildung 7.8: Logo-Grafik mit weißem Hintergrund und grauem Rahmen
Abbildung 7.8: Logo-Grafik mit weißem Hintergrund und grauem Rahmen