Websiteentwicklung: CSS: Box-Modell
Aus Wikibooks
CSS verwendet ein sogenanntes Boxmodell (engl. box model), welches den Aufbau einer Webseite in rechteckige Kästen aufteilt, die wiederum aus in einander verschachtelte Kästen für die Randverhältnisse dieses Kastens bestehen. Dazu zählen der transparente Außenabstand (margin), der Rahmen (border), der Innenabstand (padding) und der Inhalt (beispielsweise ein Text). Für alle diese Bestandteile können unterschiedliche Maße definiert werden. Das Prinzip des Boxmodells funktioniert wie eine Tabelle in HTML, allerdings ist das Boxmodell für die Gestaltung der Internetseite gedacht, im Gegensatz zur HTML-Tabelle. Der Vorteil des Boxmodells liegt in der Möglichkeit, alle Elemente genauestens bestimmen zu können, in Bezug auf Maße, Dicken, Farben und der noch genaueren Ausrichtung der einzelnen Seitenelemente (oben (top), rechts (right), unten (bottom), links (left)). In der Regel können diese Angaben in einer gemeinsamen Definition zusammengefasst werden. Dabei werden diese Definitionen im Uhrzeigersinn aufgelistet (Siehe das Beispiel für die Farben unter Rahmen weiter unten auf dieser Seite).
Inhaltsverzeichnis |
[Bearbeiten] Box-Eigenschaften
Die Eigenschaft von Boxen werden über die Elemente display, float und position definiert.
Das folgende Beispiel macht aus einem a-Tag eine Box:
a { display: block; float: right; }
Mehrere solcherart hintereinander definierte Boxen werden von rechts nach links fließend dargestellt. Man beachte, dass ohne die Deklaration von float die Boxen untereinander angeordnet werden, also von oben nach unten. Um die Box im üblichen Textfluss zu halten, sollten Sie sie wie folgt definieren:
a { display: inline-block; }
Nur wenn display auf block oder inline-block steht, gelten alle der nachfolgend aufgeführten Eigenschaften. Andernfalls wird zumindest die Definition eines Außenrandes ignoriert.
Da dem div-Tag die block-Eigenschaft standardmäßig zugewiesen ist, wird es gerne für Box-Definitionen verwendet. Selbstverständlich ist die Größe einer Box ebenfalls definierbar:
div { width: 200px; height: 200px; overflow: auto; }
Diese Box ist 200 Pixel breit und hoch. Falls sie mehr Text enthalten sollte, als sie groß ist, werden Scrollbalken dargestellt. Ohne die overflow-Definition würde die Box sonst je nach Browser entsprechend vergrößert oder deren Inhalt einfach abgeschnitten werden.
[Bearbeiten] Inhalt
Der Inhalt ist im einfachsten Fall der Text einer Seite. Dieser hat seinen Platz im Mittelpunkt der Box, um ihn werden die folgende Elemente „herumgebaut“.
[Bearbeiten] Innenabstand
Der Innenabstand (padding) gibt den Abstand des Inhalts zum Rahmen (border) der Box an. Nach CSS 2.1 ist der Innenabstand wie der äußere Abstand (margin) transparent.
Es besteht die Möglichkeit einen allgemeinen Abstand zu definieren (padding), oder jede beliebige Seite einzeln (padding-top, padding-right, padding-bottom, padding-left).
Der Initialwert beträgt 0. Falls also padding nicht definiert wird und von keinem oberen Element geerbt wird, gilt "padding: 0;".
Beispiel:
div { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; }
In diesem Beispiel werden den div-Elementen links und rechts jeweils 20 Pixel sowie oben und unten jeweils 10 Pixel Innenabstand zugewiesen.
[Bearbeiten] Rahmen
Der Rahmen (border) schließt direkt an den Innenabstand an. Es kann eine allgemeine oder eine für jede Seite bestimmte Rahmenformatierung definiert werden.
Das folgende Beispiel zeichnet eine 2 Pixel breite, durchgezogene, blaue Line um ein div-Element:
div { border: 2px solid blue; }
Das folgende Beispiel zeichnet links und rechts eine blaue und oben und unten eine grüne Linie:
div { border-top: 1px solid green; border-right: 1px solid blue; border-bottom: 1px solid green; border-left: 1px solid blue; }
Das exakt gleiche Resultat erhalten Sie auch so:
div { border-width: 1px; border-style: solid; border-color: green blue green blue; }
Sie können also die drei Werte width (Breite), style (Stil) und color (Farbe) separat definieren.
Die Breite der Line kann statt mit einer Maßeinheit auch mit thin (dünn), medium (mittel) oder thick (dick) definiert werden. Je nach Browser erhalten Sie aber sehr abenteuerliche Resultate.
Den Stil (style) bezeichnet die Art der Rahmenlinie. Die Werte hidden (unsichtbar), dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt durchgezogen) sind selbsterklärend. Dazu kommen noch die etwas ungewöhnlicheren Werte groove (wirkt wie eine eingedrückte Linie), ridge (Rille; das Gegenteil von groove), inset (wirkt wie wenn die Box eindrückt ist) und outset (wirkt wie wenn's aus der eigedrückten Box wieder hieraus kommt; das Gegenteil von inset). Je nach Browser wird die definierte Rahmenfarbe hier passend geändert oder geflissentlich ignoriert und durch Grauschattierungen ersetzt. Schließlich gibt's noch den Stil-Wert none (kein), welcher wie hidden wirkt, aber die Rahmenbreite auf 0 zurücksetzt. Verwenden Sie dies also besser nicht, da es nur verwirrt.
Bei den Farben haben Sie die üblichen Freiheiten, die Sie von der Color-Eigenschaft bereits kennen. Zudem dürfen Sie auch den Wert transparent (durchsichtig) verwenden.
Bis hier hin haben wir uns an die CCS-2.1-Normen gehalten. Jetzt kommen wir zu einigen Rahmendefinitionen, welche zurzeit noch ungenormt, aber doch von den meisten Browsern unterstützt werden.
Wenn zwei Boxen aneinander angrenzen, kann definiert werden, ob sie unanhängig bleiben oder miteinander kollabieren sollen.
div { border: 1px solid black; border-collapse: collapse; }
Wenn nichts definiert ist und auch nicht von einer übergeordneten Boxdefinition geerbt wird, steht boder-collapse auf "separate". Und diese Einstellung gilt prioritär. Erst wenn bei beiden der zwei sich angrenzende Boxen border-collapse auf "collapse" steht, kollabieren die Boxen. Das bedeutet, dass der Außenrand (margin) zur anderen Box entfällt und die Rahmen (border) sich verschmelzen. Dem oben aufgeführten Beispiel entsprechend, befindet sich zwischen den beiden Boxen nur eine Linie, welche 1 Pixel breit ist. Ab dem Innenrand (padding) bleiben die Boxen dann getrennt.
Kollabierende Boxen werden üblicherweise bei Tabellendefinitionen gerne verwendet.
[Bearbeiten] Rahmen - CSS3 Vorschau
Als CSS3-Entwurf vorliegend und von einigen Browsern bereits unterstützt, ist das Farbspiel bei Rahmen. Das folgende Beispiel zeichnet einen oberen Rahmen, welcher je 2 Pixel blau, grün und schwarz ist.
div { border-top: 6px solid; border-top-colors: blue green black; }
Momentan (März 2009) wird diese Eigenschaft schon von Browsern unterstützt, die auf der Gecko- (Firefox, SeaMonkey, Flock) oder WebKit-Engine (Safari, Google Chrome) basieren. Hier ist jedoch die Angabe eines Browserspezifischen Präfix nötig, da somit klar deklariert ist, dass es sich hierbei um eine noch nicht verabschiedete CSS-Deklaration handelt.
div { border-top: 6px solid; -moz-border-top-colors: blue green black; -webkit-border-top-colors: blue green black; }
Ebenfalls neu ist die Möglichkeit von abgerundeten Ecken. Im folgenden Beispiel beginnt die Rundung 20 Pixel vor den Ecken.
div { border: 1px solid black; border-radius: 20px; }
Auch hier erfolgt die Notierung (vorläufig, bis zur Verabschiedung des Standards) wieder mit Präfix.
div { border: 1px solid black; -moz-border-radius: 20px; -webkit-border-radius: 20px; }
[Bearbeiten] Außenabstand
Der Außenabstand (margin) gibt den Abstand zu anderen Elementen der XHTML-/HTML-Seite an. Er schliet direkt an den äußeren Bereich des Rahmens an. Dieser Bereich ist immer transparent.
Im folgenden Beispiel wird dem div-Element einen Außenabstand von 5 Pixel zugewiesen; außer links, dort sind's 20 Pixel:
div { margin: 5px; margin-left: 20px; }
