CSS-Border
In diesem Kapitel werden wir über border sprechen, und wie wir sie stylen können. Wir können unserem Rand Stil, Farbe und Breite verleihen.
Für den Anfang betrachten wir die Stile der Ränder.
Die Werte von border-style sind:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Border Width
Die Eigenschaft border-width wird verwendet, um die Breite des Randes festzulegen.
Die Breite wird in Pixel angegeben, oder durch Verwendung eines der drei vordefinierten Werte: thin, medium, oder thick.
Bemerken Sie bitte, dass die Eigenschaft "border-width" nicht funktioniert, wenn sie allein verwendet wird. Verwenden Sie zuerst die Eigenschaft "border-style", um die Grenzen einzustellen.
Border Color
Die Eigenschaft border-color wird verwendet, um die Farbe des Randes festzulegen. Die Farbe wird eingestellt durch:
- name - geben Sie einen Farbnamen an, z. B. "rot"
- RGB - geben Sie einen Wert RGB an, z. B "rgb(255,0,0)"
- Hex - geben Sie einen Hex-Wert an, z. B "#ff0000"
Vergessen Sie nicht, dass die Eigenschaft "border-color" nicht funktioniert, wenn sie allein verwendet wird. Verwenden Sie zuerst die Eigenschaft "border-style", um die Grenzen einzustellen.
Normalerweise schreibt man diese 3 Eigenschaften zusammen in einer Zeile.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p style="border:3px dotted #1c87c9">Ein Beispiel mit blau gestricheltem Rand.</p>
<p style="border:3px dashed #ffff00">Ein Beispiel mit gelb gestricheltem Rand.</p>
<p style="border:3px solid #8ebf42"> Ein Beispiel mit grün durchgezogenem Rand.</p>
</body>
</html>Weitere Beispiele finden Sie in unserem CSS Maker auf der Homepage unserer Webseite.
Übe dein Wissen
