Obramowania

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 36 z 76.

W CSS obramowanie to linia otaczająca element, oddzielająca go od innych elementów i wyznaczająca jego granice.

Oto podstawowa składnia używania właściwości border:

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

border-width: Grubość obramowania, którą można określić w pikselach (px), emach (em) lub innych prawidłowych jednostkach CSS. Możesz też użyć słów kluczowych, takich jak thin, medium i thick.

border-style: Styl obramowania, który może być jednym z następujących:
- dotted: Seria kropek
- dashed: Seria kresek
- solid: Linia ciągła
- double: Dwie linie ciągłe

border-color: Kolor obramowania, który można określić za pomocą nazw kolorów, wartości szesnastkowych, wartości RGB lub wartości HSL.

Możesz także użyć skróconej notacji, aby ustawić wszystkie trzy właściwości obramowania naraz:

selector {
    border: width style color;
}

Na przykład:

p {
    border: 2px solid blue;
}

W tym przykładzie wszystkie elementy <p> (akapitów) mają niebieskie, ciągłe obramowanie o szerokości 2px.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z trzema elementami <div>, z których każdy przedstawia repertuar kina na piątek, sobotę i niedzielę. Twoim zadaniem jest użyć właściwości border, aby je ostylować.

Ostyluj repertuar na piątek obramowaniem 3px solid black.
Ostyluj repertuar na sobotę obramowaniem 4px dashed blue.
Ostyluj repertuar na niedzielę obramowaniem 5px dotted green.

Spróbuj swoich sił

<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>