Rahmen und Innenabstände
Mit der „border“ Anweisung lassen sich in CSS Rahmen um verschiedene Elemente vielfältig gestalten. Rahmen kommen nicht nur als Layoutelemente eine Bedeutung zu, sondern häufig auch aus Gründen der schnellen Texterfassung. Beispielblöcke, wie die hier in diesem Tutorial hellgrün hinterlegten, könnten auch noch mit einer Umrahmung versehen werden. Über Attribute lassen sich die Rahmendicke, die Position, der Stil, die Farbe und der Innenabstand der Elemente vom Rahmen definieren, was einen großen, gestalterischen Spielraum eröffnet.
Position des Rahmens
Ein Rahmen kann an allen Kanten des Element in beliebiger Kombination gezeichnet werden. Dafür stehen die Formatierungen „top“ (engl. oben), „right“ (engl. rechts), „bottom“ (engl. unten) und „left“ (engl. links) zur Verfügung. Will man einen einheitlichen Rahmen rings um das Element schließen, dann genügt die Anweisung „border:…“.
Rahmendicke
Die Rahmendicke, „border-width“, kann, wie im Beispiel, numerisch notiert werden oder aber durch relative Begriffe. Dafür sind die Wörter „thin“ (engl. dünn), „medium“ (engl. mittel) und „thick“ (engl. dick) reserviert. Für die numerischen Werte stehen dieselben Einheiten wie sie auch für die Schriftgröße gelten zur Verfügung.
Grundsätzliches zur Schreibweise
Im Beispiel wird versucht, so viele Rahmeneigenschaften wie möglich in einer Notierung zu versammeln. Einen Rahmen, wie er so entstanden ist, findet man wohl eher selten in einem anspruchsvollen Layout. Meist schließt sich ein einheitlicher Rahmen um ein Element (border:2px solid #000000;). Auf alle Attribute kann man jedoch noch nachträglich zugreifen, indem man sie direkt anspricht: „border-width:4px;“. Das ist zum Beispiel sinnvoll, wenn man einen Rahmen vollständig in einer Klasse definiert hat, ein bestimmtes Attribut jedoch für einen aktuellen Rahmen geändert werden soll. Das könnte dann so aussehen:
Der Vorteil liegt auf der Hand. Für den einen Rahmen, der sich nur in seiner Dicke vom Standardrahmen unterscheidet, muss keine eigene Klasse definiert sondern nur das „width“ Attribut geändert werden.
Stil des Rahmens
Für den Rahmenstil, „border-style“, gibt es in CSS wieder reservierte Wörter:
Rahmenfarbe
Für die Rahmenfarbe können dieselben Werte eingesetzt werden, wie sie auch für die Schriftfarbe gelten. Zu beachten ist, dass bei den Stilarten mit Effekt (groove, inset, outset und ridge) als Rahmenfarbe eine andere Farbe als schwarz gewählt werden sollte, da der Browser schwarz benutzt, um die Schattierungen aus der vorgegebenen Farbe zu mischen. Mit anderen Worten: Ist die definierte Farbe schwarz, so bleibt der Rahmen insgesamt schwarz.
Innenabstände
Wenn man sich das vorherige Beispiel noch mal anschaut, stellt man fest, dass die innen liegenden Texte quasi am Außenrahmen kleben, was nicht sehr elegant aussieht. Mit dem Attribut „padding“ kann hier Abhilfe geschaffen werden und ein Innenabstand zum Rahmen definiert werden. Dabei können die Abstände einzeln nach dem Muster „padding-top:…; padding-right:…“ festgelegt werden oder der Befehl wird zu „padding:2 4 2 4;“ zusammengefasst. Durch ein Leerzeichen voneinander getrennt, markieren die vier Werte Pixelabstände in der Reihenfolge „von oben“, „von rechts“, „von unten“ und „von links“. Was hier für padding gilt, kann man auch auf andere Anweisungen wie etwa „border“ anwenden.
IE | Opera | Netscape | Firefox | ||||||
| 5 | 5.5 | 6 | 6 | 7 | 8 | 6 | 7+ | 0.8+ | |
| border | x | x | x | x | x | x | x | x | x |