Ранее Вы уже научились форматировать текст с помощью правил CSS. Теперь мы попробуем настроить стиль границ для конкретных html-элементов.
Все начинается с создания двух файлов: html-страницы и связанного с ней css-документа.
Далее займемся прописыванием кода в теле страницы:
Обратите внимание на атрибут class, из примера видно что в каждом из представленных случаев он имеет разное значение: "one", "two", "three", ... Впоследствии именно эти значения мы будем прописывать в правилах CSS.
Полный список правил для всех элементов <p> выглядит вот так:
Разберем одно правило для большей наглядности:
Правило CSS состоит из двух основных частей: селектора (то что прописывается до фигурных скобок) и объявления (то что прописывается внутри фигурных скобок). В данном случае селектором является элемент <p> и значение атрибута class (для корректного отображения на html-странице между элементом и атрибутом ставится точка). Остается лишь прописать свойство border-style и его значение - solid. Точно такие же действия проделываются для всех остальных элементов <p>.
После сохранения файла в формате css и обновления html-страницы получаем результат:
Помимо вышеперечисленных правил существуют и такие, которые позволяют настроить отдельные границы css-рамки:
- border-top-style (верхняя граница);
- border-left-style (левая граница);
- border-right-style (правая граница);
- border-bottom-style (нижняя граница).
Применение всех четырех правил одновременно к конкретному html-элементу будет выглядеть вот так:
Как видите это больше похоже на сборную солянку, поэтому лучше использовать одно правило для конкретного элемента.
#css #cssстили #html #обучение
СПАСИБО ЗА ВНИМАНИЕ!
ПОДПИСЫВАЙСЯ на канал чтобы не пропустить выход новых интересных статей и видео!👍👍👍✍
Также советую ПОДПИСАТЬСЯ на мой youtube🔴 канал:
RuTube🎥:
Telegram🤘:
VK👇: