Webdesign - Webseiten planen, gestalten - Free-Hack Library

CSS
4.4.5 Das Boxmodell
Alle HTML-Blockelemente werden im Rahmen von CSS als rechteckige
Kästen behandelt. Diese Boxen lassen sich mit den folgenden
Eigenschaften beschreiben: Der Innenabstand ( padding) schließt
sich direkt an den Inhaltsbereich an. Eine Hintergrundfarbe wird
sowohl dem Inhaltsbereich als auch dem Innenabstand zugewiesen.
Ein Rahmen ( border) wird außerhalb des Innenabstands hinzugefügt.
Außerhalb des Rahmens befindet sich der Außenabstand
( margin), also der Abstand zum umgebenden Objekt. Dieser hat
immer einen transparenten Hintergrund.
Die Eigenschaften width und height beziehen sich immer auf den
Inhaltsbereich, durch Abstände und Rahmen wird die Box in der
Regel also größer als im Inhaltsbereich angegeben. Rahmen und Abstände
lassen sich für alle vier Seiten getrennt anwenden, die Werte
für die Abstände können auch negative Werte annehmen.
Das Zusammenspiel zweier oder mehrerer Boxen kann unter
Umständen zu Verwirrung führen. Die Außenabstände werden bei
aneinander angrenzenden Boxen nämlich nicht addiert, sondern
es wird nur einer der beiden Außenabstände verwendet. Dies ist
immer der mit dem größeren Wert. Dieses „Verschmelzen“ der
Außenabstände nennt man „ margin-collapse“ (Abb. 4.4.5b).
4.4.6 Farben in CSS
CSS bietet unterschiedliche Möglichkeiten, Farben zu definieren.
Die gebräuchlichste Art ist die Angabe im Hexadezimalsystem.
Folgende Deklaration ändert die Vordergrundfarbe in Rot:
color: #ff0000;
Wichtig ist die Voranstellung des #, danach folgen die 3 Farbwertpaare
im Bereich von 00 bis ff, wobei ff für den maximalen
Farbwert steht. Das erste Wertepaar bestimmt den Rotanteil,
das zweite den Grün- und das dritte den Blauanteil, gemäß dem
RGB-Farbschema.
Es gibt eine verkürzte hexadezimale Schreibweise mit nur drei
einzelnen Farbwerten, hierbei steht z. B. „f“ für „ff“ oder aber
„3“ für „33“. Die obige Farbeigenschaft lässt sich demnach auch
wie folgt schreiben:
color: #f00;
Für die verkürzte Schreibweise stehen selbstverständlich weniger
Farben zur Verfügung als für die normale Schreibweise.
Wem die hexadezimale Angabe der Farbe nicht liegt, der kann auch
auf eine dezimale Farbangabe zurückgreifen. Der Maximalwert
liegt hier bei 255, die rote Vordergrundfarbe sieht in der dezimalen
Notation wie folgt aus:
color: rgb(255, 0, 0);
TECHNISCHE
GRUNDLAGEN
Abb. 4.4.5a: Das Boxmodell von CSS
4
Abb. 4.4.5b: margin-collapse bei angrenzenden
und bei ineinander verschachtelten Boxen
83