Gebräuchliche Arten zur Bestimmung von Rahmeneigenschaften in CSS sind wie folgt:
border
border-style
Die border-style-Eigenschaft definiert das Format des Rahmens. Die untenstehende Tabelle zeigt die möglichen Werte und wie die einzelnen Formate aussehen.
| CSS-Statement | Ausgabe |
|
p {border-style:solid;}
| Solider Rahmen
|
|
p {border-style:dashed;}
|
Gestrichelter Rahmen
|
|
p {border-style:double;}
|
Doppelter Rahmen
|
|
p {border-style:dotted;}
|
Gepunkteter Rahmen
|
|
p {border-style:groove;}
|
Groove Rahmen
|
|
p {border-style:ridge;}
|
Ridge Rahmen
|
|
p {border-style:inset;}
|
Inset Rahmen
|
|
p {border-style:outset;}
|
Outset Rahmen
|
border-width
Die border-width-Eigenschaft definiert die Breite des Rahmens. Der Wert hierfür kann “thin”, “medium”, “thick”, oder ein Zahlenwert sein.
| CSS-Statement | Ausgabe |
|
p {border-width:9px; border-style:solid;}
| Rahmenbreite 9px
|
|
p {border-width:medium; border-style:dashed;}
|
Rahmenbreite Mittel
|
border-color
Die border-color-Eigenschaft definiert die Farbe des Rahmens.
Beispiele:
| CSS-Statement | Ausgabe |
|
p {border-color:#0000FF; border-style:solid;}
| Rahmenfarbe Blau
|
|
p {border-color:red; border-style:dotted;}
|
Rahmenfarbe Rot
|
border-top-, border-left-, border-bottom-, border-right-
Anweisungen wie (oben, links, unten, rechts) können mit style, width und color zusammengebracht werden um einen 3-teiligen CSS-Befehl zu erzeugen. border-top-style definiert zum Beispiel den Style der oberen Seite des Rahmens.
Einige Beispiele:
| CSS-Statement | Ausgabe |
|
p {border-top-style:solid; border-bottom-style:dotted;}
| Beispiel 1
|
|
p {border-top-style:solid; border-top-width:medium;}
| Beispiel 2
|
|
p {border-left-style:solid; border-bottom-style:dashed;
border-bottom-color:#00FF00;}
| Beispiel 3
|
border
Wenn die Eigenschaften für alle 4 Seiten des Rahmens gleich sein sollen, so können sie innerhalb einer einzigen Zeile, mit Hilfe der border-Eigenschaft, angegeben werden. Zusätzlich können auch alle drei Rahmeneigenschaften (border-style, border-width und border-color) mit dem border-Befehl zu einer einzigen Zeile zusammengefügt werden.
Mit dem folgenden CSS-Statement,
|
p {
border:#0000FF 5px solid;
}
|
würde der folgende HTML-Code,
|
<p>Mit einer einzigen Zeile können alle Rahmeneigenschaften angegeben werden.</p>
|
so aussehen:
Mit einer einzigen Zeile können alle Rahmeneigenschaften angegeben werden.
Folgende Seite: CSS Padding
Copyright 2008-2009 1keydata.com Alle Rechte vorbehalten.