Cascading Stylesheets
Stil mit <Stil>
Cascading Stylesheets
Stil mit <Stil>
Eigenschaften, die die Darstellung von sichtbaren Rahmen um Elemente steuern. Jedes Blockelement kann in einem Rahmen dargestellt werden und jede Seite des Rahmens kann auf unterschiedliche Weise angelegt werden.
Das Boxmodell definiert einen inneren Rand, den Rahmen border und einen äußeren Rand um das Element.
Der innere Rand, padding, zeigt die gleiche Hintergrundfarbe wie das Element. margin, der äußere Rand, bildet den Einzug des Elements gegen den umgebenden Block. Dazwischen liegt der Rahmen, border. Die Eigenschaft border selbst ist eine Kurznotation, die mehrere Eigenschaften zusammenfasst.
Zwanzig Eigenschaften sind insgesamt für die Darstellung des Rahmens spezifiziert:
border-top-color • border-right-color • border-bottom-color • border-left-color • border-color • border-top-style • border-right-style • border-bottom-style • border-left-style • border-style • border-top-width • border-right-width • border-bottom-width • border-left-width • border-width • border-top • border-right • border-bottom • border-left • border
| IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein |
border-top-color notiert die Farbe des oberen Rahmens. | color |
| IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein |
border-right-color notiert die Farbe des rechten Rahmens. | color |
| IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein |
border-bottom-color notiert die Farbe des unteren Rahmens. | color |
| IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein |
border-left-color notiert die Farbe des linken Rahmens. | color |
color kann das Schlüsselwort für eine Farbe sein (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder ein Tripel aus drei RGB-Werten (255,255,255). Es gibt 16 Standardfarben in HTML:
| aqua #00FFFF rgb(0,255,255) |
gray #808080 rgb(128,128,128) |
silver #C0C0C0 rgb(192,192,192) |
navy #000080 rgb(0,0,128) |
| black #000000 rgb(0,0,0) |
green #800000 rgb(128,0,0) |
teal #008080 rgb(0,128,128) |
olive #808000 rgb(128,128,0) |
| blue #0000FF rgb(0,0,255) |
lime #00FF00 rgb(0,255,0) |
white #FFFFFF rgb(255,255,255) |
purple #800080 rgb(128,0,128) |
| fuchsia #FF00FF rgb(255,0,255) |
maroon #800000 rgb(128,0,0) |
yellow #FFFF00 rgb(255,255,0) |
red #FF0000 rgb(255,0,0) |
table { border-bottom-color: RGB(201, 94, 177); }
body { border-bottom-color: #E95A2B; }
textarea { border-bottom-color: silver; }
oder
p.rahmen2 { border-bottom-color: red;
border-bottom-style: double;
border-left-color: yellow;
border-left-style: double;
border-right-color: blue;
border-right-style: double;
border-top-color: green;
border-top-style: double;
border-color: seagreen darkslategray teal; }
...
<p class="rahmen2">So bunt war der Rahmen noch nie!</p>
| IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein |
border-color steuert die Farbe des Rahmens an allen vier Seiten. | color {1,4} | transparent |
Sie können eine, zwei, drei oder vier Farben angeben:
Wenn Sie eine Farbe angeben, werden alle vier Rahmenseiten in dieser Farbe dargestellt.
Wenn Sie zwei Farben angeben, werden die obere und untere Rahmenseite mit der ersten Angabe und die rechte und linke Rahmenseite mit der zweiten Farbe dargestellt.
Wenn Sie drei Farben angeben, wird die obere Rahmenseite mit der ersten, die rechte und linke Rahmenseite mit der zweiten und die untere Rahmenseite mit der dritten Farbe dargestellt.
Wenn Sie vier Farben angeben, ist die Reihenfolge top, right, bottom, left.
color kann das Schlüsselwort für eine Farbe sein (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder die drei RGB-Werte (255,255,255). Es gibt 16 Standardfarben in HTML:
| aqua #00FFFF rgb(0,255,255) |
gray #808080 rgb(128,128,128) |
silver #C0C0C0 rgb(192,192,192) |
navy #000080 rgb(0,0,128) |
| black #000000 rgb(0,0,0) |
green #800000 rgb(128,0,0) |
teal #008080 rgb(0,128,128) |
olive #808000 rgb(128,128,0) |
| blue #0000FF rgb(0,0,255) |
lime #00FF00 rgb(0,255,0) |
white #FFFFFF rgb(255,255,255) |
purple #800080 rgb(128,0,128) |
| fuchsia #FF00FF rgb(255,0,255) |
maroon #800000 rgb(128,0,0) |
yellow #FFFF00 rgb(255,255,0) |
red #FF0000 rgb(255,0,0) |
transparent setzt den Rahmen auf nicht sichtbar. Der Rahmen besitzt zwar noch eine Breite, wird aber nicht gezeichnet.
body { border-color: RGB(201, 94, 177); }
body { border-color: #E95A2B; }
body { border-color: silver; }
body { border-color: silver ;red; }
body { border-color: silver red RGB(223, 94, 77); }
body { border-color: silver red RGB(223, 94, 77) black; } oder
p.rahmen6 { border-color: red silver cyan blue;
border-style: solid dashed dotted outset;
border-width: 5px 10px 15px 20px; }
...
<p class="rahmen6"> So bunt war der Rahmen noch nie! </p>
| IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein |
border-top-style legt die Darstellung der oberen Rahmenlinie fest. Viele der Linienstile werden von den meisten Browsern nicht unterstützt. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
| IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein |
border-right-style legt die Darstellung der rechten Rahmenlinie fest. Viele der Linienstile werden von den meisten Browsern nicht unterstützt. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
| IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein |
border-bottom-style legt die Darstellung der unteren Rahmenlinie fest. Viele der Linienstile werden von den meisten Browsern nicht unterstützt. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
| IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein |
border-left-style legt die Darstellung der linken Rahmenlinie fest. Viele der Linienstile werden von den meisten Browsern nicht unterstützt. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
none ist die Voreinstellung. Durch die explizite Angabe von none wird sichergestellt, dass vorangegangene Deklarationen ausgeschaltet sind.
hidden funktioniert wie none und verhindert Konflikte, wenn verschiedene Rahmen aufeinander treffen.
dotted erzeugt eine gepunktete Linie. Viele Browser unterstützen diesen Stil nicht.
dashed erzeugt eine gestrichelte Linie. Viele Browser unterstützen diesen Stil nicht.
solid erzeugt eine durchgezogene Linie.
double erzeugt eine doppelte durchgehende Linie, die insgesamt so breit ist, wie in border-width angegeben wird.
groove erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
ridge erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
inset erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
outset erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
body { border-bottom-style: groove; } oder
p.rahmen3 { border-top-color: green;
border-top-style: groove;
border-top-width: 15px;
border-right-color: blue;
border-right-style: double;
border-right-width: 15px;
border-bottom-color: red;
border-bottom-style: dashed;
border-bottom-width: 15px;
border-left-color: yellow;
border-left-style: dotted;
border-left-width: 15px; }
p.rahmen4 { border-top-color: green;
border-top-style: solid;
border-top-width: 15px;
border-right-color: blue;
border-right-style: ridge;
border-right-width: 15px;
border-bottom-color: red;
border-bottom-style: inset;
border-bottom-width: 15px;
border-left-color: yellow;
border-left-style: outset;
border-left-width: 15px; } ...
<p class="rahmen3">So bunt war der Rahmen noch nie!</p>
<p class="rahmen4">So bunt war der Rahmen noch nie!</p>
| IE4+ M1 N4+ O5 Version: CSS1 Erblich: Nein |
border-style bestimmt den Stil aller vier Rahmenseiten. | [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4} |
Sie können eine, zwei, drei oder vier Stile angeben:
Wenn Sie einen Stil angeben, werden alle vier Rahmenseiten in diesem Stil dargestellt.
Wenn Sie zwei Stile angeben, werden die obere und untere Rahmenseite mit der ersten Angabe und die rechte und linke Rahmenseite im zweiten Stil dargestellt.
Wenn Sie drei Stile angeben, wird die obere Rahmenseite mit dem ersten, die rechte und linke Rahmenseite mit dem zweiten und die untere Rahmenseite mit dem dritten Stil dargestellt.
Wenn Sie vier Stile angeben, ist die Reihenfolge top, right, bottom, left.
none ist die Voreinstellung. Durch die explizite Angabe von none wird sichergestellt, dass vorangegangene Deklarationen ausgeschaltet sind.
hidden funktioniert wie none und verhindert Konflikte, wenn verschiedene Rahmen aufeinander treffen.
dotted erzeugt einen gepunktete Linie. Viele Browser unterstützen diesen Stil nicht.
dashed erzeugt eine gestrichelte Linie. Viele Browser unterstützen diesen Stil nicht.
solid erzeugt eine durchgezogene Linie.
double erzeugt eine doppelte durchgehende Linie, die insgesamt so breit ist, wie in border-width angegeben wird.
groove erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
ridge erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
inset erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
outset erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
body { border-style: double; }
body { border-style: double groove; }
body { border-style: double groove dashed; }
body { border-style: double groove none solid; } oder
p.rahmen6 { border-color: red silver cyan blue;
border-style: solid dashed dotted outset;
border-width: 5px 10px 15px 20px; }
...
<p class="rahmen6"> So bunt war der Rahmen noch nie!</p>
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein |
border-top-width legt die Breite des oberen Rahmens fest. | thin | medium | thick | length |
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein |
border-right-width legt die Breite des rechten Rahmens fest. | thin | medium | thick | length |
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein |
border-bottom-width legt die Breite des unteren Rahmens fest. | thin | medium | thick | length |
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein |
border-left-width legt die Breite des linken Rahmens fest. | thin | medium | thick | length |
thin | medium | thick sind Schlüsselwörter, mit denen die Breite der Rahmenlinie gesetzt wird. Plattform und Browser entscheiden aber über deren exakte Breite. Die Voreinstellung ist medium.
length kann in einer der folgenden Maßeinheiten angegeben werden:
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
body { border-bottom-width: thick; }
body { border-bottom-width: 0.25in; }
body { border-bottom-width: 5mm; }
oder
p.rahmen5 { border-bottom-color: red;
border-bottom-style: double;
border-bottom-width: 15px;
border-left-color: yellow;
border-left-style: double;
border-left-width: 10px;
border-right-color: blue;
border-right-style: double;
border-right-width: 5px;
border-top-color: green;
border-top-style: double;
border-top-width: 2px;}
...
<p class="rahmen5">So bunt war der Rahmen noch nie!</p>
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein |
border-width setzt die Breite aller vier Rahmenseiten in einer einzigen Deklaration. | [ ,thin | medium | thick | length ] {1,4} |
Sie können eine, zwei, drei oder vier Breiten angeben:
Wenn Sie eine Breite angeben, werden alle vier Rahmenseiten in dieser Breite dargestellt.
Wenn Sie zwei Breiten angeben, werden die obere und untere Rahmenseite mit der ersten Angabe und die rechte und linke Rahmenseite mit der zweiten Breite dargestellt.
Wenn Sie drei Breiten angeben, wird die obere Rahmenseite mit der ersten, die rechte und linke Rahmenseite mit der zweiten und die untere Rahmenseite mit der dritten Breite dargestellt.
Wenn Sie vier Breiten angeben, ist die Reihenfolge top, right, bottom, left.
thin | medium | thick sind Schlüsselwörter für die Rahmenbreite. Plattform und Browser bestimmen die exakte Breite der Rahmenseiten. Die Voreinstellung ist medium.
length kann in einer der folgenden Maßeinheiten angegeben werden:
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
body { border-width: thick; }
body { border-width: 0.25in; }
body { border-width: 5mm; }
oder
p.rahmen6 { border-color: red silver cyan blue;
border-style: solid dashed dotted outset;
border-width: 5px 10px 15px 20px; }
...
<p class="rahmen6"> So bunt war der Rahmen noch nie! </p>
| IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein |
border-top ist eine Abkürzung, mit der die Eigenschaften border-top-width und/oder border-style und/oder color in einer Deklaration notiert werden können. | border-top-width &| border-style &| color |
| IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein |
border-right ist eine Abkürzung, mit der die Eigenschaften border-right-width und/oder border-style und/oder color in einer Deklaration notiert werden können. | border-right-width &| border-style &| color |
| IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein |
border-bottom ist eine Abkürzung, mit der die Eigenschaften border-bottom-width und/oder border-style und/oder color in einer Deklaration notiert werden können. | border-bottom-width &| border-style &| color |
| IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein |
border-left ist eine Abkürzung, mit der die Eigenschaften border-left-width und/oder border-style und/oder color in einer Deklaration notiert werden können. | border-left-width &| border-style &| color |
body { border-bottom: thick dashed yellow; }
body { border-left: 23px double yellow; }
body { border-right: dotted gray; }
oder
p.rahmen { border-bottom: 25px solid red;
border-left: 25px solid yellow;
border-right: 25px solid blue;
border-top: 25px solid green; }
...
<p class="rahmen">So bunt war der Rahmen noch nie!</p>
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein |
border fasst alle individuellen Stylesheet-Eigenschaften des Rahmens zusammen. | border-width &| border-style &| border |
body { border: thick dashed yellow; }
p { border: thick double yellow; }
blockquote { border: dotted gray; } oder
p.rahmen_dick { border: goldenrod solid;
width: 300px;
padding: 10px;
background-color: khaki;
border-width: 15px 2px 25px}
...
<p class="rahmen_dick"> Noch nie war der Rahmen so bunt!</p>