Селекторы и каскад: оформление в отдельном файле

CSS — язык оформления страницы в отдельном файле. Селектор выбирает элементы, а каскад решает, какое правило победит: по важности, специфичности и порядку.

Вид отдельно от смысла

В первой части вы собрали страницу из смысловых элементов, и в браузере она выглядит, как лист из учебника: чёрное на белом, синие ссылки, Times New Roman. Это и есть «страница без оформления», такой её видят сегодня и поисковики, и программы чтения с экрана. Теперь дадим ей вид, и для этого есть отдельный язык: CSS, Cascading Style Sheets, «каскадные таблицы стилей».

Идею отделить вид от смысла в октябре 1994 года, ещё до появления Netscape 2, предложил Хокон Виум Ли, инженер CERN, коллега Тима Бернерса-Ли. Он назвал стили «каскадными»: страницу оформляют сразу несколько источников (браузер, читатель, автор сайта), и надо решить, чьё слово главное. Эту «лесенку приоритетов» вы разберёте в этом уроке. В декабре 1996 года CSS 1 стал рекомендацией W3C, но браузеры годами понимали его по-разному, и работать с ним по-настоящему удалось только в середине 2000-х, когда в 2003 году появился сайт CSS Zen Garden: один и тот же HTML, сотни непохожих оформлений.

Три способа подключить стили

1. Отдельный файл: в head строка <link rel="stylesheet" href="styles.css">. Все страницы сайта ссылаются на один файл, вид меняется в одном месте, а браузер сохраняет файл и не скачивает его снова. Так делают почти всегда.
2. Элемент <style> в head: стили лежат в самой странице. Годится для маленького примера или для стилей одной страницы.
3. Атрибут style="…" у элемента: оформление прямо на нём. Это худший способ: правило нельзя переиспользовать, оно сильнее почти всего остального и портит порядок. Пользуйтесь им редко (например, когда значение вычисляет скрипт).

Помните из урока про рендеринг: CSS блокирует отрисовку, пока браузер его не получил. Поэтому файл стилей подключают в самом начале и держат небольшим.

Правило и селектор

Правило CSS состоит из селектора (кому), а в фигурных скобках пар «свойство: значение;» (что сделать):

.card {
  padding: 1rem;
  border: 1px solid #c9c4b6;
}

Основные селекторы:

• по тегу: p, h2, a это все такие элементы;
• по классу: .card это все элементы с class="card". Это главный инструмент: класс можно дать любому элементу и использовать сколько угодно раз;
• по id: #top это единственный элемент с id="top";
• потомок: nav a это ссылки внутри nav, на любой глубине; прямой потомок: ul > li;
• список: h2, h3 это и те, и другие;
• по состоянию: a:hover (под курсором), a:focus-visible (в фокусе при работе с клавиатуры), li:first-child;
• по атрибуту: a[href^="tel:"] это ссылки, у которых адрес начинается с «tel:».

Проверьте себя: что выбирает селектор .card?

Все элементы страницы с class=“card”: классом можно пользоваться много раз, в отличие от id.

Наследование

Некоторые свойства передаются от родителя к потомкам сами: цвет текста, шрифт, размер шрифта, межстрочный интервал. Поэтому шрифт и цвет страницы задают один раз у body, а не для каждого абзаца. Другие свойства не наследуются: отступы и рамки принадлежат самому блоку, и дети их не получают. Было бы странно, если бы рамка вокруг абзаца появлялась и вокруг каждого слова.

Каскад: кто победит

Когда на один элемент действует несколько правил, браузер решает по лесенке:

1. Важность и источник. Правило с !important сильнее обычных. Им лучше не пользоваться: оно ломает лесенку, и бороться с ним можно только таким же.
2. Специфичность. Чем точнее селектор, тем он сильнее. Её считают тремя числами: (id, классы, теги). #cta это (1, 0, 0), .button это (0, 1, 0), nav a это (0, 0, 2). Сравнивают слева направо: один id сильнее любого числа классов, один класс сильнее любого числа тегов.
3. Порядок. Если сила равна, побеждает то правило, что ниже по файлу.

Именно так обычно «не работает правило»: вы написали a { color: red } для ссылки, а где-то выше nav a { color: green } (0, 0, 2) оказалось сильнее. Или вы написали правило выше, чем нужно. Попробуйте сами на схеме: правила красят одну и ту же ссылку, и схема считает, кто победит. Поменяйте селекторы и поставьте галочки !important.

Элемент: <a class="button" id="cta"> внутри nav внутри header. У каждого правила одно свойство: color.

Класс против тегаId против классаПоровну: решает порядок!important

№	Селектор	color	!important	Счёт (id, класс, тег)	Итог
1		красныйсинийзелёныйоранжевый		—	не селектор
2		красныйсинийзелёныйоранжевый		—	не селектор
3		красныйсинийзелёныйоранжевый		—	не селектор

Добавить правило Убрать последнее

Ни одно правило не подходит, и ссылка останется цвета по умолчанию. Порядок такой: сначала !important, потом специфичность, потом то, что ниже по файлу.

Практичные правила, которым следуют сегодня:

• оформляйте классами и держите специфичность низкой: так правила легко перебить;
• не оформляйте через id: он слишком сильный, и перебить его можно только другим id;
• не вкладывайте селекторы глубже двух-трёх уровней;
• !important оставьте для крайних случаев. В уроке про современный CSS вы увидите лучшее средство: слои, которые заменяют большую часть таких драк.

Проверьте себя: что сильнее, один id или десять классов?

Один id: специфичность сравнивают слева направо, и один id (1, 0, 0) побеждает любое число классов (0, 10, 0).

Палитра по тону

В вашем брифе есть поле «тон». Оно подскажет, из чего собрать палитру: два-три цвета и нейтральный. Вот отправные точки; цифры можно менять, но проверьте контраст (в уроке про цвет вы научитесь это делать):

Тон	Что чувствуется	Идея палитры
деловой	собранность, доверие	тёмно-синий, серый, белый; шрифт с засечками в заголовках
тёплый	забота, уют	терракота и кремовый фон, тёмно-коричневый текст
смелый	энергия	почти чёрный фон или текст и один яркий акцент
спокойный	ясность, воздух	приглушённый зелёный или бирюзовый на светлом тёплом фоне

Практика

Вы в 2005 году. Страницу собрали из смыслов, теперь надо её одеть. Файл стилей styles.css уже ждёт вас во второй вкладке. Подключите его в head, а потом по очереди оформите body, шапку, кнопку и карточки. Не поддавайтесь соблазну написать style="…" прямо на элементе: проверка это заметит, и вы потеряете смысл упражнения.

В шапке нужно, чтобы текст читался на её фоне. Подберите цвета по вашему тону: контраст проверит программа.

Что было не так с 2005 годом

Главная беда была не в CSS, а в браузерах. Internet Explorer 6, самый массовый, читал CSS по-своему, и авторы писали «хаки» (хитрые строки, которые понимал один браузер и игнорировали другие) и условные комментарии для разных версий. Модный стиль «веб 2.0» с глянцевыми градиентами, тенями и закруглёнными кнопками тоже ушёл: он был привязан к тому, как тогда рисовали картинки. Остаётся то, что работает до сих пор: HTML для смысла, CSS для вида, классы как язык между ними.