CSS: селекторы, каскад и оформление HTML
💻 Информатика · 8 класс
Подключаем стили, разбираем конфликт правил и считаем размеры блока.
Зачем нужен CSS
HTML описывает структуру документа, CSS — правила его представления. С помощью CSS задают цвета, шрифты, отступы, расположение элементов и поведение оформления при разных размерах экрана. Один файл стилей может использоваться на нескольких страницах, поэтому общий дизайн не нужно переписывать в каждом абзаце.
Как устроено правило
p {
color: navy;
margin-bottom: 12px;
}
.note {
color: darkred;
}P — селектор элементов p. В фигурных скобках записаны объявления «свойство: значение». Селектор .note выбирает элементы с классом note. Точка относится к синтаксису селектора, а в HTML пишут class="note" без точки.
Для внешнего файла styles.css в head документа помещают:
<link rel="stylesheet" href="styles.css">Путь должен соответствовать расположению файла. Если стиль не появился, проверьте загрузку файла и правильность селектора, прежде чем добавлять случайные !important.
Разобранный конфликт
Для <p class="note">Важное замечание</p> подходят оба правила из примера. В этой простой ситуации — обычные авторские правила одного слоя без других конкурентов — цвет будет darkred: селектор класса специфичнее селектора типа. Margin-bottom останется 12px, поскольку второе правило его не меняет.
Нельзя обобщать это до «самый специфичный селектор всегда побеждает». Каскад сначала учитывает другие уровни, включая происхождение и важность объявлений, а также слои. Когда сравниваемые правила равны по нужным предшествующим условиям и специфичности, решающим может стать порядок следования.
Наследование и размер блока
Некоторые свойства, например цвет текста, могут наследоваться потомками; отступы и рамка обычно не наследуются автоматически. Поэтому цвет родителя и собственный margin дочернего элемента решают разные задачи.
При обычном content-box ширина 100px относится к содержимому. Если padding по 10px и border по 2px с двух сторон, внешняя ширина без margin — 100 + 20 + 4 = 124px. При border-box заданные 100px включают padding и border; для содержимого останется 76px. Внешние margin в эти 100px не включаются.
Задания
- Какой селектор выберет элементы с class="card"?
- Два обычных правила .note в одном слое задают разные цвета. При прочих равных какое применяется?
- Посчитайте внешнюю ширину content-box при width200px, padding8px и border1px с каждой стороны.
Ответы
1. .card. 2. Позднее, поскольку предыдущие условия и специфичность равны. 3. 218px: 200 + 2 × 8 + 2 × 1, без учёта margin.
Самопроверка
Откройте инструменты разработчика браузера, выберите элемент и посмотрите применённые и переопределённые объявления. Так можно установить причину результата, а не угадывать её по внешнему виду. CSS работает с конкретным элементом, условием и набором правил; чтение каскада — часть решения задачи.