Лекция 03. CSS: правила, каскад и первый адаптивный интерфейс

CSS (Cascading Style Sheets, каскадные таблицы стилей) описывает, как уже размеченный HTML-документ выглядит и располагается: цвет, шрифт, расстояния, размеры, границы и раскладку элементов. HTML отвечает на вопрос «что это?», CSS — «как это представить пользователю?». CSS не заменяет семантику: сначала нужен понятный заголовок, список, ссылка или кнопка, и только затем — их оформление.

На этой первой лекции мы не пытаемся выучить все свойства. Цель — понять модель языка, научиться читать правила браузера и собрать небольшой, доступный и адаптивный экран без «магических» отступов.

После этой лекции

Вы должны уметь:

• подключить внешний CSS-файл к HTML-странице и объяснить, почему это основной способ работы;
• прочитать и написать правило из селектора, свойства и значения;
• выбрать простой селектор по элементу, классу, состоянию или расположению в документе;
• предсказать, какое из конфликтующих правил применится, пользуясь каскадом, специфичностью и порядком;
• отличать margin, border и padding в блочной модели;
• применять display, Flexbox и Grid для подходящей задачи, а не строить макет таблицами или случайными смещениями;
• задавать размер относительно доступного пространства и проверять интерфейс на узком экране;
• не ломать видимый фокус, контраст, порядок чтения и настройку уменьшения движения;
• найти применённое CSS-правило в DevTools и исправить его осознанно.

1. CSS — слой представления, а не способ «нарисовать сайт»

Возьмём нормальный HTML. Он уже сообщает браузеру, что перед нами карточка новости, заголовок, текст и ссылка.

<article class="news-card">
  <h2>Открыта запись в волонтёрский корпус</h2>
  <p>Заявки принимаются до 20 октября.</p>
  <a href="/volunteers">Узнать условия</a>
</article>

CSS может сделать эту карточку визуально заметной, но не превращает div в ссылку и не создаёт смысл у текста:

.news-card {
  padding: 24px;
  border: 1px solid #d7deea;
  border-radius: 12px;
  background: #ffffff;
}
 
.news-card a {
  color: #0757c7;
}

Если отключить CSS, карточка потеряет рамку и отступы, но останется читаемой статьёй с настоящей ссылкой. Это хороший проверочный вопрос к вёрстке: будет ли содержание и управление понятным без моих стилей? Если нет, сначала нужно исправить HTML.

Важно: CSS не является языком программирования общего назначения. В нём есть условия и вычисления для оформления, например @media и calc(), но его задача — описать представление документа.

2. Как подключить стили

Внешний файл — обычный выбор для сайта

Создайте рядом с index.html файл styles.css и подключите его внутри head:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Новости колледжа</title>
  <link rel="stylesheet" href="styles.css">
</head>

Один файл стилей можно подключить к нескольким страницам. Это упрощает поддержку: изменение в общем правиле не приходится повторять в каждом HTML-файле.

Внутренние и строчные стили

Стили можно записать внутри HTML двумя другими способами, но для обычного многостраничного сайта они не должны быть стартовой привычкой.

<!-- Внутренние стили: допустимы для небольшого изолированного примера -->
<style>
  h1 { color: #16325c; }
</style>
 
<!-- Строчный стиль: влияет только на этот элемент -->
<p style="color: #8a1c1c;">Важное объявление</p>

Строчный style смешивает содержимое и оформление, усложняет повторное использование и обычно получает высокий приоритет в каскаде. Он встречается в письмах и иногда задаётся JavaScript, но не подходит для основной вёрстки страницы.

Проверьте себя: если правило должно работать на трёх страницах, где оно должно жить? Во внешнем общем CSS-файле, а не в трёх копиях <style>.

3. Из чего состоит CSS-правило

/* селектор */
.notice {
  /* свойство: значение; */
  color: #8a1c1c;
  background-color: #fff1f1;
}

• .notice — селектор: он выбирает элементы с классом notice.
• { ... } — блок объявления.
• color и background-color — свойства.
• #8a1c1c и #fff1f1 — значения.
• color: #8a1c1c; — объявление. Точка с запятой отделяет его от следующего.

Пробелы и переносы строк чаще всего не меняют смысл CSS, но аккуратное форматирование помогает читать код. Комментарии пишут между /* и */:

/* Временная проверка: потом удалить */
.debug {
  outline: 2px solid magenta;
}

Свойство принимает только допустимые для него значения. Например, color: 20px не сработает: 20px — длина, а не цвет. Браузер обычно проигнорирует неверное объявление, а не «поправит» его догадкой. Ищите такую ошибку в DevTools или в панели Problems редактора.

Группы, сокращения, функции и at-правила

Одно правило может иметь несколько селекторов:

h1,
h2,
h3 {
  color: #16325c;
}

У некоторых свойств есть сокращённая запись. Она удобна, когда вы понимаете, какие части меняете:

.panel {
  /* толщина стиль цвет */
  border: 1px solid #d7deea;
  /* верх/низ  левый/правый */
  padding: 16px 24px;
}

Функции вычисляют или создают значение, а at-правила задают особое поведение таблицы стилей:

.content {
  width: min(100% - 32px, 1100px);
}
 
@media (width <= 700px) {
  .content {
    width: min(100% - 24px, 1100px);
  }
}

В этом примере min() выбирает меньшую из двух величин, а @media включает правило только для подходящей ширины окна. К адаптации мы вернёмся ниже.

4. Селекторы: как точно выбрать элемент

Селектор отвечает на вопрос: «к каким элементам относится это правило?». Начинайте с простых и читаемых вариантов.

Элемент, класс и id

Селектор элемента подходит для разумных базовых стилей. Класс обычно описывает повторяемый компонент или вариант. id обязан быть уникальным в документе и хорош для ссылки на фрагмент или связи в HTML, но не должен становиться обычным средством оформления.

<a class="button button--primary" href="/apply">Подать заявку</a>

.button {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
}
 
.button--primary {
  background: #0757c7;
  color: #ffffff;
}

Два класса не означают «два разных элемента». Они дают одной ссылке базовый стиль button и вариант button--primary. Имена классов должны говорить о роли или компоненте (.card, .site-header, .button--primary), а не о случайном пиксельном результате вроде .blue-text или .margin-left-17.

Комбинаторы: связь в HTML важна

/* Любой em внутри списка */
li em {
  color: #7d2aa8;
}
 
/* Абзац сразу после h2 */
h2 + p {
  margin-top: 0;
}

Пробел означает «где-то внутри», > — «непосредственный ребёнок», + — «следующий сосед». Сложные длинные селекторы быстро становятся хрупкими: изменение HTML может неожиданно сломать оформление. Если правило описывает компонент, чаще понятнее добавить осмысленный класс самому элементу.

Состояния: не только :hover

Псевдокласс выбирает элемент в состоянии. Пользователь с мышью увидит :hover, но человек с клавиатурой перемещается фокусом. Поэтому интерактивный элемент должен иметь заметное состояние :focus-visible.

.button:hover {
  background: #06469f;
}
 
.button:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Не пишите outline: none без полноценной и заметной замены. Устройство без мыши иначе теряет ответ на вопрос «где сейчас клавиатурный фокус?».

5. Каскад: почему браузер выбрал именно это правило

К одному элементу часто подходят несколько правил. CSS не «случайно» выбирает значение: он применяет каскад. Упрощённый практический порядок для обычных авторских стилей:

1. Неверные или не подходящие элементу правила не участвуют.
2. Сначала важны происхождение и важность объявления. Стиль автора обычно сильнее стиля браузера; !important меняет этот порядок и почти всегда усложняет поддержку.
3. Если происхождение и важность одинаковы, выигрывает более специфичный селектор.
4. При одинаковой специфичности выигрывает правило, написанное позже.

<p class="notice">Занятие перенесено в аудиторию 302.</p>

p {
  color: #1f2937;
}
 
.notice {
  color: #8a1c1c;
}
 
.notice {
  color: #b42318; /* это правило позже, оно победит */
}

У .notice специфичность выше, чем у p; между двумя одинаковыми .notice победит последнее правило.

Специфичность: счётчик, а не «очередность»

Для старта представьте специфичность как три столбца:

Сравнивают столбцы слева направо: один id сильнее любого количества классов; класс сильнее селектора элемента. Универсальный селектор *, комбинаторы ( , >, +) и псевдокласс :where() очков не добавляют.

p { color: #1f2937; }                 /* 0–0–1 */
.notice { color: #8a1c1c; }           /* 0–1–0 */
#urgent { color: #b42318; }           /* 1–0–0 */

Не пытайтесь «победить» неудобное правило всё более длинным селектором или !important. Лучше найти исходное правило, упростить архитектуру классов или изменить порядок слоёв стилей. !important оставьте для редких осознанных случаев, например утилиты доступности, и объясняйте его появление в ревью.

Наследование и начальные значения

Некоторые свойства, например color и font-family, обычно наследуются детьми от родителя. Другие, например margin, border и width, не наследуются. Если CSS не задал значение, браузер берёт начальное значение свойства или наследует его — в зависимости от свойства.

body {
  color: #1f2937;
  font-family: Arial, sans-serif;
}
 
.warning {
  border: 2px solid #b42318;
}

Текст внутри .warning обычно останется цвета #1f2937, потому что color наследуется. Граница не «протечёт» в дочерние элементы, потому что border не наследуется. В сомнении не угадывайте: выберите элемент в DevTools и посмотрите Computed.

6. Значения: цвета, единицы, шрифты и переменные

Цвет и типографика

Цвет можно записать ключевым словом, шестнадцатеричным кодом, rgb()/rgba() или современным hsl(). В учебных примерах удобны #RRGGBB и rgb():

.page {
  color: #1f2937;
  background-color: #f8fafc;
  font-family: "Golos Text", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Не выбирайте цвет только по красивому значению в палитре. Текст должен различаться с фоном не только цветом; обычный текст обычно проверяют на контраст не ниже 4.5:1 по WCAG. Проверить пару цветов можно средствами DevTools и контрастными проверками.

Единицы без угадывания

Нет одной «правильной» единицы для всего сайта. Например, max-width: 70rem ограничивает удобную длину строки, а width: 100% разрешает элементу занять доступную ширину.

.content {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

margin-inline относится к горизонтальному направлению текста: в обычном русском интерфейсе это левый и правый отступ. Такая запись лучше выражает задачу, чем две разрозненные стороны.

Пользовательские свойства — повторяемые решения

Пользовательские свойства часто называют CSS-переменными. Они начинаются с --, участвуют в каскаде и могут наследоваться.

:root {
  --color-text: #1f2937;
  --color-accent: #0757c7;
  --space-3: 12px;
  --radius: 12px;
}
 
.button {
  padding: var(--space-3) 16px;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: #ffffff;
}

Они полезны, когда одно решение повторяется: цвет бренда, шаг отступов, радиус. Но не стоит превращать каждую одноразовую величину в глобальную «переменную»: название должно помогать понимать систему, а не создавать ещё один слой поиска.

7. Блочная модель: почему размер «не совпал»

Для раскладки браузер представляет многие элементы как прямоугольные области. Упрощённо вокруг содержимого находятся:

┌──────────────── margin ────────────────┐
│  ┌──────────── border ──────────────┐  │
│  │  ┌──────── padding ───────────┐  │  │
│  │  │         content            │  │  │
│  │  └────────────────────────────┘  │  │
│  └──────────────────────────────────┘  │
└────────────────────────────────────────┘

• content — место для текста, изображения или вложенных элементов;
• padding — внутренний отступ между содержимым и границей;
• border — граница;
• margin — внешний отступ до соседей.

.card {
  width: 320px;
  padding: 24px;
  border: 1px solid #d7deea;
  margin-bottom: 20px;
}

При стандартном box-sizing: content-box свойство width: 320px задаёт ширину только content. Видимая ширина получится больше: 320 + 24 + 24 + 1 + 1 = 370px. Для интерфейсов часто удобнее сразу выбрать предсказуемую модель:

* {
  box-sizing: border-box;
}

Теперь объявленная ширина включает padding и border. Это не отменяет необходимости понимать модель: margin по-прежнему находится снаружи, а слишком жёсткая width всё ещё способна переполнить узкий экран.

Типичная ошибка: увеличивать margin-left, пока блок «встал на место». Это привязывает вёрстку к одному экрану. Сначала определите, кто является контейнером, какая у него раскладка и какой нужен промежуток (gap, padding или margin).

8. Поток документа и display

До сложной раскладки браузер размещает элементы в обычном потоке документа. Блочные элементы вроде div, section и p обычно занимают новую строку; строчные вроде span и a идут внутри текста. Точное поведение задаёт display.

.tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f0fe;
}

inline-block позволяет ссылке или span оставаться в строке, но принимать размеры и вертикальные отступы как блок. Не меняйте display наугад: сначала ответьте, нужен ли элементу текстовый поток, отдельный блок, Flex-контейнер или Grid-контейнер.

Не используйте position: absolute для основной структуры страницы. Абсолютно позиционированный элемент изымается из обычного потока и может наложиться на соседей. Он полезен для действительно привязанной детали, например значка в поле ввода, но не заменяет Flexbox или Grid.

9. Раскладка компонентов: Flexbox

Flexbox — одномерная система. Она особенно удобна, когда элементы нужно разложить в одну основную ось: строкой или колонкой. Типичные примеры: строка навигации, пара «иконка + текст», ряд кнопок, вертикальный список карточек.

<nav class="site-nav" aria-label="Основная навигация">
  <a href="/news">Новости</a>
  <a href="/schedule">Расписание</a>
  <a href="/contacts">Контакты</a>
</nav>

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

• display: flex делает контейнер Flex-контейнером;
• его непосредственные дети становятся Flex-элементами;
• gap создаёт промежуток между элементами без лишних внешних отступов;
• flex-wrap: wrap разрешает элементам перейти на новую строку, если места не хватает;
• align-items управляет выравниванием по поперечной оси.

Для распределения элементов по строке можно применить justify-content:

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Не используйте space-between как единственный способ сделать «красивые расстояния»: с двумя или одним элементом результат часто не похож на ожидаемый. gap отвечает за предсказуемый промежуток, justify-content — за свободное пространство контейнера.

10. Раскладка страницы и повторяющихся областей: Grid

CSS Grid — двумерная система: одновременно строки и колонки. Он хорош для карточек в нескольких колонках, основной области с боковой панелью, расписаний и других задач, где важны обе оси.

<section class="news-list" aria-label="Новости">
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
</section>

.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

1fr означает одну долю свободного места. Три одинаковые колонки — только стартовый вариант: на узком экране он часто сделает карточки слишком тесными. Более устойчивый вариант позволяет браузеру самóму выбрать число колонок, пока каждая не станет уже допустимого минимума:

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 24px;
}

Flexbox и Grid не конкуренты. Внутри Grid-карточки вполне может быть Flexbox для строки метки и даты. Выбирайте модель по структуре задачи, а не потому, что «этот инструмент новее».

11. Адаптивность: один документ, разные условия

Адаптивный интерфейс не означает отдельный сайт «для телефона». Это интерфейс, который остаётся понятным и удобным при разной ширине окна, масштабе текста, способе ввода и пользовательских настройках.

Начните с гибкой основы

Перед media query дайте элементам возможность сжиматься и переноситься:

img {
  max-width: 100%;
  height: auto;
}
 
.content {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

Здесь изображение не выходит шире контейнера, а контент имеет и боковое пространство, и максимальную ширину для чтения.

Media query меняет правило, когда этого требует содержание

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 32px;
}
 
@media (width <= 720px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
}

Не берите точку 720px из чужого шаблона «потому что так принято». Сузьте окно и спросите: в какой момент текст, кнопки или карточки перестают быть удобными? Это и есть повод для перехода. Свойства можно писать «от маленького к большому» или наоборот; важнее, чтобы правила не противоречили друг другу и были проверены в браузере.

Предпочтение уменьшенного движения

Анимация не обязательна для хорошего интерфейса. Если она есть, уважайте системное предпочтение пользователя:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

Это не «декоративная опция»: движение может отвлекать или вызывать физический дискомфорт. Не делайте анимацию единственным способом сообщить о важном результате — состояние должно быть понятно и без неё.

12. Мини-экран: собираем правила вместе

Ниже не готовый «шаблон на все случаи», а небольшой пример, в котором видны базовые решения: общий контейнер, переменные, Grid для списка и видимый фокус.

<main class="content">
  <header class="hero">
    <p class="eyebrow">Студенческий совет</p>
    <h1>Ближайшие события</h1>
    <p>Выберите встречу и добавьте её в свой календарь.</p>
  </header>
 
  <section class="event-list" aria-label="События недели">
    <article class="event-card">
      <p class="event-card__date">10 октября</p>
      <h2>Встреча волонтёров</h2>
      <a class="button" href="/events/volunteers">Подробнее</a>
    </article>
    <!-- другие карточки -->
  </section>
</main>

* {
  box-sizing: border-box;
}
 
:root {
  --text: #1f2937;
  --muted: #4b5563;
  --surface: #ffffff;
  --accent: #0757c7;
  --line: #d7deea;
}
 
body {
  margin: 0;
  background: #f5f8fc;
  color: var(--text);
  font-family: Arial, sans-serif;
  line-height: 1.5;
}
 
.content {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
  padding-block: 48px;
}
 
.hero {
  max-width: 44rem;
  margin-bottom: 32px;
}
 
.eyebrow,
.event-card__date {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
}
 
.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 20px;
}
 
.event-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
 
.button {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}
 
.button:hover {
  background: #06469f;
}
 
.button:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Что здесь стоит проверить самостоятельно:

• уменьшите окно: карточки должны переходить на следующую строку, не выходя за края;
• нажимайте Tab: ссылка «Подробнее» должна иметь заметный фокус;
• увеличьте масштаб страницы: текст не должен обрезаться;
• в DevTools временно отключите правило .event-list, затем верните его и посмотрите, как именно работает Grid;
• поменяйте --accent в :root и убедитесь, что стиль кнопок меняется в одном месте.

13. Доступность — не финальная косметика

CSS способен сделать хороший HTML неудобным, поэтому проверяем несколько вещей с первой работы.

1. Фокус виден. Не скрывайте outline, пока не создали заметную замену; проверяйте страницу клавишей Tab.
2. Контраст достаточен. Светло-серый текст на белом фоне часто выглядит «воздушно», но плохо читается. Для обычного текста ориентир WCAG — 4.5:1.
3. Состояние не передаётся только цветом. Ошибка поля может иметь и цвет, и текстовое сообщение, и корректную семантику в HTML.
4. Порядок остаётся логичным. CSS-свойства order, Grid-области и абсолютное позиционирование могут переставить картинку на экране, но не должны создавать неожиданную последовательность для клавиатуры и чтения документа.
5. Движение можно уменьшить. Используйте prefers-reduced-motion, если добавляете несущественную анимацию.

Важно: CSS не исправляет отсутствие доступного имени у кнопки, alt у изображения или label у поля. Это нужно решить в HTML. CSS отвечает за то, чтобы уже существующая доступность не исчезла визуально.

14. Как отлаживать CSS

1. Inspect / Elements → Styles

Откройте страницу, выберите нужный элемент инструментом инспектора и посмотрите панель Styles. Она показывает подходящие правила, селектор, файл и строку. Перечёркнутое свойство не обязательно ошибочно: оно могло проиграть каскад или быть недопустимым в данном контексте.

2. Computed

Вкладка Computed показывает итоговое значение свойства. Это быстрый способ отличить margin от padding, увидеть реальную ширину блока и понять, откуда унаследовался font-family.

3. Узкий экран и клавиатура

В режиме адаптивного устройства проверьте несколько ширин, но не ограничивайтесь готовыми пресетами телефонов. Медленно сужайте окно и смотрите, где ломается содержание. Затем пройдите по интерактивным элементам Tab и Shift + Tab.

4. Спецификация и справочник

MDN удобен для начала: там есть назначение свойства, допустимые значения, примеры и совместимость. Когда нужно точно понять каскад, обращайтесь к спецификациям CSS Working Group. Их не нужно читать подряд; достаточно уметь найти правило, которое вызывает сомнение.

15. Частые ошибки первой CSS-вёрстки

Резюме

CSS выбирает элементы селекторами и назначает им значения свойств. Когда правила конфликтуют, браузер разрешает конфликт каскадом: сначала применимость и происхождение, затем специфичность, затем порядок. Это не повод строить «самый сильный» селектор — хороший CSS остаётся коротким, понятным и привязанным к роли компонента.

Прямоугольник элемента состоит из content, padding, border и margin. Обычный поток подходит для текста, Flexbox — для одной основной оси, Grid — для строк и колонок. Адаптация начинается с гибких размеров и проверки содержания, а не с набора чужих breakpoint-чисел.

Наконец, оформление не должно прятать фокус, снижать контраст или менять понятный порядок документа. CSS проверяют не только на своём широком мониторе, но и в DevTools, при узком окне, увеличенном масштабе и клавиатурной навигации.

Чек-лист перед сдачей первой CSS-страницы

• CSS подключён отдельным файлом через <link rel="stylesheet">.
• HTML сохраняет смысл без CSS: ссылка остаётся ссылкой, кнопка — кнопкой.
• Классы описывают роль компонента, а не случайное положение или цвет.
• Нет бессистемных строчных стилей и !important.
• Применён box-sizing: border-box или команда осознанно использует другую модель.
• Между Flex/Grid-элементами применён gap, где он выражает именно промежуток.
• Изображения и блоки не переполняют узкий экран.
• Интерактивные элементы имеют заметный :focus-visible.
• Контраст текста проверен, а смысл не передаётся одним цветом.
• Страница проверена в DevTools, при сужении окна, увеличении масштаба и клавишей Tab.

Вопросы для самопроверки

1. Почему внешний CSS-файл удобнее строчных стилей для сайта из нескольких страниц?
2. В чём разница между .card a и .card > a?
3. Как браузер выбирает победителя между двумя подходящими правилами автора?
4. Что добавляет padding, чего не добавляет margin?
5. Когда разумнее выбрать Flexbox, а когда Grid?
6. Почему ширина 320px может переполнить маленький экран?
7. Почему :hover не является достаточным состоянием для кнопки?
8. Как посмотреть итоговое значение и проигравшие правила в браузере?
9. Что меняет prefers-reduced-motion и почему это полезно?

Источники и на какие положения они опираются

Материал написан заново по источникам ниже; фрагменты кода в лекции — самостоятельные учебные примеры. Все ссылки проверены 7 октября 2026 года.

1. MDN: Getting started with CSS  — подключение внешнего, внутреннего и строчного CSS; базовые селекторы, состояния, функции и организация первого файла.
2. MDN: Introduction to CSS syntax  — правило, декларация, свойство, значение, комментарии, at-правила и обработка синтаксиса браузером.
3. MDN: CSS selectors  — селекторы элементов, классов, id, атрибутов, комбинаторы, псевдоклассы и псевдоэлементы.
4. MDN: Introduction to the CSS cascade  — применимость правила, происхождение, важность, специфичность, порядок, наследование и начальные значения.
5. W3C: CSS Cascading and Inheritance Level 5  — нормативное описание каскада, наследования, порядка происхождений и разрешения конфликтов.
6. MDN: The box model  — content, padding, border, margin и box-sizing.
7. MDN: display — внутренний и внешний тип отображения, поток документа, блочные и строчные элементы.
8. MDN: Flexbox  — оси Flexbox, контейнер/элементы, перенос, выравнивание и gap.
9. MDN: CSS grid layout  — строки, колонки, fr, repeat(), minmax() и адаптивная сетка.
10. MDN: Responsive web design  — гибкие размеры, viewport, точки перехода и проверка адаптивности по содержанию.
11. MDN: Using media queries  — синтаксис @media, media features и условия применения стилей.
12. MDN: Using CSS custom properties  — определение --name, var(), каскад и наследование пользовательских свойств.
13. W3C WAI: Contrast (Minimum)  — критерий контраста текста 4.5:1 и исключения.
14. W3C WAI: Focus Appearance  — необходимость различимого визуального фокуса и связь с контрастом нетекстовых компонентов.
15. W3C WAI: C39 — prefers-reduced-motion  — уважение системного предпочтения уменьшенного движения в CSS-анимациях.