Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
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
- Ergänzen Sie die Regel von img#logo wie folgt:
img#logo {
background-color: white;
padding: 10px;
border: 10px solid #d9d9d9;
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
Browser.
So sieht die Logo-Grafik jetzt aus:
