Границы

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 36 из 76.

В CSS border — это линия, которая окружает элемент, отделяя его от других элементов и определяя его границы.

Вот базовый синтаксис для использования свойства border:

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

border-width: Толщина границы, которая может быть указана в пикселях (px), em (em) или других допустимых единицах измерения CSS. Вы также можете использовать ключевые слова, такие как thin, medium и thick.

border-style: Стиль границы, который может быть одним из следующих:
- dotted: Серия точек
- dashed: Серия тире
- solid: Сплошная линия
- double: Две сплошные линии

border-color: Цвет границы, который может быть задан с помощью именованных цветов, шестнадцатеричных значений, значений RGB или значений HSL.

Вы также можете использовать сокращенную запись, чтобы установить все три свойства границы одновременно:

selector {
    border: width style color;
}

Например:

p {
    border: 2px solid blue;
}

В этом примере все элементы <p> (абзацы) имеют сплошную синюю рамку шириной 2px.

Задание

Легко

Вам дан HTML-документ с тремя элементами <div>, каждый из которых представляет расписание кинотеатра на Friday, Saturday и Sunday. Ваша задача — использовать свойство border для их стилизации.

Стилизуйте расписание на Friday с помощью границы 3px solid black.
Стилизуйте расписание на Saturday с помощью границы 4px dashed blue.
Стилизуйте расписание на Sunday с помощью границы 5px dotted green.

Шпаргалка

Граница (border) — это линия, которая окружает элемент, отделяя его от других элементов и определяя его границы.

Свойства границ:

border-width: Толщина (px, em или ключевые слова, такие как thin, medium, thick)
border-style: Стиль (dotted, dashed, solid, double)
border-color: Цвет (именованные цвета, hex, RGB, HSL)

Индивидуальные свойства:

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

Сокращенная запись:

selector {
    border: width style color;
}

Пример:

p {
    border: 2px solid blue;
}

Попробуйте сами

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