In diesem Tipp wird Ihnen gezeigt wie Sie die Rahmen und Abstände auf Ihrer Webseite mit Hilfe von CSS (Cascading Style Sheets) definieren und verändern können. [imgr=CSS-cascading-style-sheets2-200.gif]CSS-cascading-style-sheets2-200.gif?nocache=1304784449380[/imgr]

Rahmen

CSS bietet uns die Möglichkeit einen Rahmen mit vier Eigenschaften zu gestalten. Jede dieser Eigenschaft kann unabhängig von den anderen bestimmt werden.

Border-color zur Bestimmung der Farbe

Die Eigenschaft border-color bestimmt die Rahmenfarbe. Die Angabe erfolgt entweder mit Farbnamen oder mit Hexadezimalcodes wie Sie im Tipp Gestalten mit CSS – Einheiten und Farben nachlesen können.

Es können bis zu vier Farbwerte angeben werden, für jede Seite einer. Wenn Sie die Eigenschaften jeweils um –top-color, -right-color, -bottom-color und -left-color ergänzen, können Sie die Farbe der einzelnen Rahmenabschnitte definieren.

(Zur Darstellung in Originalgröße Abbildungen anklicken)

01-bestimmen-von-rahmenfarben-mit-css-470.png?nocache=1304784254657

Border-width zur Bestimmung der Breite

Mit der Eigenschaft border-width können Sie die Breite des Rahmens bestimmen. Die Angabe erfolgt entweder in Pixel oder mit den Angaben thin(dünn), medium(normal) und thick(dick). Wie auch bei border-color können Sie hier ebenfalls vier Werte angeben. Auch hier können Sie mit Hilfe der Ergänzungen –top-width, -right-width, -bottom-width und -left-width die einzelnen Abschnitte bestimmen.

02-bestimmen-von-rahmenbreiten-mit-css-470.png?nocache=1304784285905

Border-style für verschiedene Rahmenarten

Dank der Eigenschaft border-style können Sie verschiedene Rahmenarten definieren. Es gibt neun Arten zur Auswahl:

    [*]dotted , dashed, solid, double, groove, ridge, inset, outset, none[/*]

Wie bereits bei border-color und border-width erklärt können Sie auch hier jeden Abschnitt des Rahmens mit den Ergänzungen –top-style, -right-style, -bottom-style und –left-style bestimmen.

03-bestimmen-von-rahmenarten-mit-css-470.png?nocache=1304784322224

Border als Sammeleigenschaft verwenden

Die Sammeleigenschaft border fasst alle oben erwähnten Eigenschaften zusammen. Wichtig ist das Einhalten der Reihenfolge, welche lautet: Rahmenbreite, Rahmenart, Rahmenfarbe.

04-bestimmen-der-sammeleigenschaft-border-470.png?nocache=1304784348047

Abstände

Außenabstände

Die Außenabstände werden in CSS mit margin definiert. Die Eigenschaft margin erlaubt eine Angabe in Pixel in alle vier Richtungen. Mit den Ergänzungen –top, -right, -bottom, -left lässt sich jeder Abstand einzeln definieren.

Selbstverständlich gilt auch hier die Sammeleigenschaft margin. Es besteht die Möglichkeit vier verschiedene Wert-Kombinationen anzugeben. Steht nur ein Wert da so gilt dieser für alle Seiten, stehen zwei Werte da so gilt der erste für oben und unten und der zweite für rechts und links. Bei drei Werten steht der erste für oben, der zweite für rechts und links und der dritte für unten. Bei vier Werten wird im Uhrzeigersinn geschrieben „Top-Right-Bottom-Left“.

Eine detaillierte grafische Darstellung erfolgt im Tipp „Gestalten mit CSS – Das Box-Modell“.

Innenabstände

Die Innenabstände werden in CSS mit padding definiert. Wie bereits bei den Außenabständen erwähnt, erlaubt padding ebenfalls eine Angabe in alle vier Richtungen. Die Ergänzungen –top, -right, -bottom, -left sind die gleichen. Ebenfalls vorhanden ist die Möglichkeit der Sammeleigenschaft, nach den gleichen Angaben wie bei den Außenabständen.

Auch hier erfolgt eine detaillierte Darstellung im Artikel „Gestalten mit CSS – Das Box-Modell“.

Jedes Element auf Ihrer Webseite lässt sich mit den oben vorgestellten Abständen und Rahmen versehen. Durch cleveres Anwenden lassen sich mit CSS komplexe Webseiten völlig ohne Grafiken gestalten.

zurück zur Übersicht Themenübersicht – Webdesign mit CSS