CSS: Rahmeneigenschaften
Wie im Kapitel CSS - Box-Eigenschaften schon erwähnt gehört zu den Eigenschaften einer Box auch die Definition von Rahmen, welche diese Box umgeben.
border-top-color, border-bottom-color, border-left-color und border-right-color
Die border-top-color-, border-bottom-color-, border-left-color- und border-right-color-Eigenschaften beschreiben jeweils die Frabe eines der Rahmenstücke. border-top-color beschreibt die Farbe des oberen Rahmens, border-bottom-color die des unteren. Die border-left-color-Eigenschaft beschreibt die Farbe des linken Rahmens und die border-right-color-Eigenschaft die des rechten. Als Wert kann eine Farbe angegeben werden. Beispiel:
P { border-top-color:red; border-bottom-color:green; }
DIV { border-left-color:'#ff0000'; border-right-color:rgb(0,255,0); }
border-color
Die border-color-Eigenschaft ist eine Zusammenfassung der vier oben genannten Rahmenfarben-Eigenschaften. Es können dabei ein bis vier Farbangaben als Wert notiert werden. Wird eine Angabe getätig, so gilt diese für alle vier Eigenschaften. Werden zwei Werte notiert, so gilt der erste für die Rahmenfarben oben und unten (top und bottom) und der zweite für die verbleibenden beiden. Werden drei Werte notiert, so definiert der erste Wert die Rahmenfarbe oben, der zweite die rechts sowie links und der dritte die Rahmenfarbe unten. Werden alle vier Werte notiert so ist die Reihenfolge der Eigenschaften: oben, rechts, unten, link. Mehrere Werte werden durch Leerzeichen getrennt. Beispiel:
P.a { border-color: red green red yellow; }
P.b { border-color: '#f0f0f0' '#ccff00'; }
transparent zur Verfügung. Er kann nur allein (d.h. ohne weitere Rahmenfarben) notiert werden und besagt, dass der Rahmen transparent/durchscheinend sein soll.
border-top-style, border-bottom-style, border-left-style und border-right-style
Die Eigenschaften border-top-style, border-bottom-style, border-left-style und border-right-style beschreiben jeweils die Art/den Stil eines der Rahmenstücke. border-top-style steht dabei für den Stil des oberen Rahmens, border-bottom-style für den des unteren. Die border-left-style-Eigenschaft beschreibt den Stil des linken Rahmens und die border-right-style-Eigenschaft den des rechten. Als Wert kann jeweils einer der folgenden angegeben werden:
-
dashed- gestrichelte Linie -
dotted- gepunktete Linie -
double- doppelte Linie (zwei Striche) -
groove- erzeugt einen Pyramiden-Effekt. Der Inhalt wirkt, als ob er auf einer Pyramide dargestellt werden würde. -
inset- erzeugt einen Hervorhebe-Effekt. Der Rahmen sieht so aus, als ob er sich vom Hintergrund abhebt (ähnlichgroove). -
none- kein Rahmen -
outset- Gegenteil von inset. Der Rahmen sieht so aus, als ob er den Hintergrund eindrückt (ähnlichridge). -
ridge- Gegenteil vongroove. Der Inhalt sieht so aus, als ob eine Pyramide in den Boden gehen würde. -
solid- einfache Linie
H1 { border-top-style:solid; border-bottom-style:dotted; }
DIV { border-left-style: none; border-right-style: groove; }
border-style
Die border-style-Eigenschaft ist eine Zusammenfassung der vier oben genannten Rahmenstil-Eigenschaften. Es können dabei ein bis vier Rahmenstile als Wert notiert werden. Wird eine Angabe getätig, so gilt diese für alle vier Eigenschaften. Werden zwei Werte notiert, so gilt der erste für den Rahmenstil oben und unten (top und bottom) und der zweite für die verbleibenden beiden. Werden drei Werte notiert, so definiert der erste Wert den Rahmenstil oben, der zweite die rechts sowie links und der dritte den Rahmenstil unten. Werden alle vier Werte notiert so ist die Reihenfolge der Eigenschaften: oben, rechts, unten, link. Mehrere Werte werden durch Leerzeichen getrennt. Beispiel:
P.a { border-style: solid; }
P.b { border-style: dotted solid; }
border-top-width, border-bottom-width, border-left-width und border-right-width
Die Eigenschaften zur Bestimmung der Rahmenbreiten sind die Eigenschaften border-top-width, border-bottom-width, border-left-width und border-right-width. Jede von ihnen beschreibt die Breite eines Rahmenteilstückes. border-top-width beschreibt die Breite des oberen Rahmens, border-bottom-width die des unteren. Die border-left-width-Eigenschaft beschreibt die Breite des linken Rahmens und die border-right-width-Eigenschaft die des rechten. Die folgenden Werte können diesen Eigenschaften zugewiesen werden:
-
thin- ein dünner Rahmen -
medium- ein normalbreiter Rahmen -
thick- ein dicker Rahmen - Längenangaben - der Rahmen wird mit der angegebenen Breite dargestellt
P.a { border-top-width:2px; }
P.b { border-left-width:thick; }
border-width
Die border-width-Eigenschaft ist eine Zusammenfassung der vier oben genannten Eigenschaften. Als Werte können ein bis vier Werte der o.g. Eigenschaften notiert werden. Wird ein Wert notiert, so beschreibt dieser alle vier Eigenschaften. Werden zwei Werte notiert, so beschreibt der erste Wert die Eigenschaft für den oberen (top) und unteren (bottom) Rahmen; der zweite Wert beschreibt die verbleibenden zwei Eigenschaften (left und right). Werden drei Werte notiert, so wird die obere Rahmenbreite vom ersten, die linke und rechte vom zweiten und die untere Rahmenbreite vom dritten Wert beschrieben. Werden alle vier Werte notiert so ist die Reihenfolge der Rahmenstücke: oben, rechts, unten, links. Mehrere Werte werden durch Leerzeichen getrennt. Beispiel:
P { border-width: thin; }
*.D { border-width: medium 3px thin thick; }
border-top, border-bottom, border-left und border-right
Eine zusammenfassende Beschreibung der einzelnen Rahmenteile wird mit den Eigenschaften border-top, border-bottom, border-left und border-right definiert. Als Werte der Eigenschaften können jeweils die zu dem Rahmenabschnitt dazugehörigen Werte der anderen oben beschriebenen Eigenschaften notiert werden. Die border-top-Eigenschaft beispielsweise kann die Werte der border-top-width, border-top-color und border-top-style Eigenschaften erhalten. Eine Reihenfolge für die Anordnung der Eigenschaften ist nicht festgelegt, da die Wertarten grundsätzlich verschieden sind. Mehrere Werte werden durch Leerzeichen getrennt. Beispiel:
P.a { border-left: 2px red; border-left-style: groove; }
P.b { border-bottom: solid; border-top-width: 5px; }
border
Die border-Eigenschaft ist die größte Zusammenfassung der Rahmeneigenschaften. Sie beschreibt die Eigenschaften der Rahmenfarbe, des Rahmenstils und der Rahmenbreite für alle vier Rahmenstücke. Als Wert kann dazu jeweils einer der Werte für diese drei Eigenschaften notiert werden. Mehrere Werte werden durch Leerzeichen getrennt; eine Reihenfolge ist nicht definiert. Beispiel:
P.a { border: 2px solid red; }
/*Alle vier Rahmen sind rot, solid und von einer 2-Pixel Breite*/
P.b { border: green 25%; border-top-color:red; }
/*Alle bis auf das oberen Rahmenstück sind grün.
Alle Stücke sind 25% breit.*/
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Positionierung
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project