Grundlagen CSS
Das Boxenmodell
Das sogenannte CSS-Boxenmodell
befasst sich mit den Grenzen von blockbildenden Elementen wie div, p oder auch h1. Man kann sich die ganze Sache als ineinander verschachtelte Boxen vorstellen, ähnlich dem sicherlich vielen bekannten, russischen Holzfigürchen "Matroschka", wobei die einzelnen "Figürchen" (Boxen), die sich alle gegenseitig umschliessen, ihre eigenen Namen haben: Inhalt, Innenabstand, Rahmen und Aussenabstand.
CSS-Boxen
Kapitel 12
Um den Aussenabstand für ein Blockelement festzusetzen, wird in der CSS die Eigenschaft margin eingesetzt. Hiermit ist entweder der Aussenabstand zum Elternelement gemeint oder der Aussenabstand zu nebenstehenden Elementen. Als Werte werden auch hier numerische Angaben verlangt, wie wie sie auch vorher schon kennengelernt haben.
Beispiel
(Box mit gleichmässigem Abstand)
Die Anweisung:
div.box1 { margin:1.5em; }
Das Ergebnis:
In diesem Beispiel wurde eine Box kreiert, mit einem gleichmässigen Aussenabstand von jeweils 1.5em zum angrenzenden Element.
Daneben haben wir jedoch auch die Möglichkeit, die Abstände einzeln für alle 4 Seiten festzulegen. Entweder geschieht das durch die Einzelangaben margin-top (Abstand nach oben), margin-right (Abstand nach rechts) , margin-bottom (Abstand nach unten), margin-left (Abstand nach links), oder man schreibt diese, durch Leerzeichen getrennt hintereinander - wobei dann die Reihenfolge die gleiche ist, wie oben beschrieben: top, right, bottom, left.
Beispiel
(Box mit ungleichmässigem Abstand)
Die Anweisung:
div.box2 { margin: 15px 20px 25px 45px; }
Das Ergebnis:
In diesem Beispiel wurde eine Box kreiert, mit einem gleichmässigen Aussenabstand von jeweils 1.5em zum angrenzenden Element.
In den beiden oberen Beispielen haben wir uns also je eine Box geschaffen, die in diesem Falle aus "2 Lagen" besteht: Nämlich aus dem Inhalt (Text) und der Box selber, hier durch den hellgrünen Hintergrund dargestellt, mit ihren definierten Aussenabständen zu den angrenzenden Elementen. Das sieht bisher alles andere als schön aus, denn der Text ist viel zu nah an den Boxenrändern placiert und das sieht etwas "gequetscht" aus.
Um das jetzt gefälliger zu gestalten, können wir ebenso die Innenabstände für ein Element festlegen. Das geschieht mit der Eigenschaft padding - und zwar nach dem gleichen Schema, wie auch bei den Aussenabständen. Auch hier können wir - indem wir keine Einzelangaben machen - alle 4 Innenabstände auf den gleichen Wert setzen, oder aber durch Einzelangaben (wie oben, ebenfall im Uhrzeigersinn, beginnend bei "top" - verschiedene Innenabstände festlegen. Die einzelnen Eigenschaften heissen padding-top (Innenabstand nach oben), padding-right (Innenabstand nach rechts) , padding-bottom (Innenabstand nach unten), padding-left (Innenabstand nach links). Auch hier müssen als Werte wieder numerische Angaben gemacht werden.
Beispiel
(Box mit unterschiedlichen Innenabständen)
Die Anweisung für eine Box mit gleichmässigem Innenabstand:
div.box3 { margin: 15px; padding 10px; }
Das Ergebnis:
Hier sieht man mittlerweile ganz deutlich,dass der nicht nur die Box selber einen Abstand zu den angrenzenden Elementen hat, sondern auch der Text nun einen gleichmässigen Abstand zu den Boxenrändern einhält.
Aber auch hier kann ich mit Einzelangaben arbeiten, wie das folgende Beispiel zeigt:
div.box4 { margin: 10px; padding: 15px 20px 25px 45px;}
Während in diesem Beispiel der Aussenabstand einheitlich auf 10px gesetzt wurde, haben wier dieses Mal Unterschiede in den Innenabständen - d.h. des Textes zum Boxenrand (hellgrün).
Nun haben wir mittlerweile einige doch bereits recht ansehnliche Boxen gestaltet. Selbstverständlich haben wir aber auch noch weitere Möglichkeiten, hier Hand anzulegen. Beispielsweise, indem wir unserer Box, wie im vorherigen Kapitel beschrieben, ein Hintergrundbild zuweisen oder die Box zusätzlich mit einem Rahmen versehen.
Diese Rahmen liegen im Boxenmodell zwischen Innen- und Aussenabständen. Sie werden gebildet, indem wir einem HTML-Element mehrere Eigenschaften zuweisen. Die Eigenschaft für den Rand selber wird mit "border bezeichnet und mit einen mumerischen Wert, wie z.B. 2px versehen. Das bedeutet zunächst einmal, dass wir hiermit einen Rand von 2px Dicke erzeugen. Das Gleiche kann aber auch mit der Eigenschaft border-width (Rahmenbreite) erreicht werden. Um die Farbe des Rahmens festzulegen, setzen wir die Eigenschaft border-color ein, der ein hexadezimaler Farbwert zugewiesen wird.
Beispiel
(Box mit einfachem Rahmen)
In diesem Beispiel möchten wir unserer Box einen weissen, einfachen, 2 Pixel breiten Rahmen geben, der einen gleichmässigen Abstand zum innen liegenden Text hat. Dazu die Anweisung:
div.box5 { margin:15px; padding:10px; border:2px solid; border-color:#ffffff; }
Das Ergebnis:
solid wurde hier eine einfache, durchgezogene Linie erzeugt.
Ausser dem oben verwendeten solid stehen uns aber auch noch weitere Wertzuweisungen zur Verfügung: double (doppelte Linie), dotted (gepunkted,) dashed (gestrichelt), none (kein Rahmen), hidden (unsichtbarer Rahmen), groove (3D-Effekt), ridge (3D-Effekt), inset (3D-Effekt) und outset (3D-Effekt).
Beispiel
(diverse Rahmen)
Schauen wir uns doch einmal im folgenden einige Beispiele an:
div.box6 { margin:15px; padding:10px; border:5px groove; border-color:#ffffff; }
div.box7 { margin:15px; padding:10px; border:5px ridge; border-color:#ffffff; }
div.box8 { margin:15px; padding:10px; border:5px inset; border-color:#ffffff; }
An den gezeigten Beispielen ist bereits deutlich erkennbar, dass hier mit recht einfachen Mittels verschiedene, effektvolle Wirkungen erzeugen können.
Für die Rahmenfarbe, also die Eigenschaft border-color, sind Farbangaben in den HTML-üblichen Hexadezimalwerten zugelassen. Und auch für die Rahmen ist eine Differenzierung nach oben, unten, rechts und links möglich. Ebenso wie bei padding und margin stehen auch hier die Angaben top, bottom, left und right zur Verfügung und werden in die Mitte der CSS-Eigenschaften eingetragen.(border-top, -left, -right, -bottom, ebenfalls im Uhrzeigersinn und ebenfalls beginnend bei "top").
Nun können wir unsere Boxen natürlich noch mit weiteren Angaben schmücken - aber hier soll das erst einmal reichen. Beschäftigen wir uns stattdessen jetzt mit der Formatierung von Listen...