Borders

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 36 von 76.

In CSS ist ein border eine Linie, die ein Element umgibt, es von anderen Elementen trennt und seine Grenzen definiert.

Hier ist die grundlegende Syntax für die Verwendung der border-Eigenschaft:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width: Die Dicke des Rahmens, die in Pixeln (px), Ems (em) oder anderen gültigen CSS-Einheiten angegeben werden kann. Sie können auch Schlüsselwörter wie thin, medium und thick verwenden.

border-style: Der Stil des Rahmens, der einer der folgenden sein kann:
- dotted: Eine Reihe von Punkten
- dashed: Eine Reihe von Strichen
- solid: Eine durchgehende Linie
- double: Zwei durchgehende Linien

border-color: Die Farbe des Rahmens, die mit benannten Farben, Hexadezimalwerten, RGB-Werten oder HSL-Werten angegeben werden kann.

Sie können auch die Kurzschreibweise verwenden, um alle drei Rahmen-Eigenschaften gleichzeitig festzulegen:

selector {
    border: width style color;
}

Zum Beispiel:

p {
    border: 2px solid blue;
}

In diesem Beispiel haben alle <p> (Absatz-)Elemente einen durchgehenden blauen Rahmen mit einer Breite von 2px.

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit drei <div>-Elementen, die jeweils einen Kinoplan für Freitag, Samstag und Sonntag darstellen. Ihre Aufgabe ist es, die border-Eigenschaft zu verwenden, um diese zu gestalten.

Gestalten Sie den Plan für Freitag mit einem 3px solid black Rahmen.
Gestalten Sie den Plan für Samstag mit einem 4px dashed blue Rahmen.
Gestalten Sie den Plan für Sonntag mit einem 5px dotted green Rahmen.

Spickzettel

Ein Rahmen (border) ist eine Linie, die ein Element umgibt, es von anderen Elementen trennt und seine Grenzen definiert.

Rahmen-Eigenschaften:

border-width: Stärke (px, em oder Schlüsselwörter wie thin, medium, thick)
border-style: Stil (dotted, dashed, solid, double)
border-color: Farbe (benannte Farben, Hex, RGB, HSL)

Einzelne Eigenschaften:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

Kurzschreibweise:

selector {
    border: width style color;
}

Beispiel:

p {
    border: 2px solid blue;
}

Probier es selbst

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>