CSS

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

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

История

До CSS оформление задавалось прямо в HTML — тегами <font>, атрибутами bgcolor и таблицами для раскладки, что смешивало содержимое с внешним видом. В октябре 1994 года Хокон Виум Ли, работавший в CERN, предложил «каскадные таблицы стилей HTML»;^[1] вскоре к нему присоединился Берт Бос. Консорциум W3C выпустил рекомендацию CSS1 в декабре 1996 года, CSS2 — в 1998-м, уточнённую CSS 2.1 — в 2011-м.

Дальше единый номер версии исчез: CSS развивается как набор независимых модулей — селекторы, цвета, Flexbox, Grid, анимации, — у каждого свой уровень зрелости.^[2] Выражение «CSS3» обозначает лишь эту модульную эпоху. В 2020-х в браузеры пришли возможности, ради которых раньше нужны были препроцессоры и скрипты: переменные, вложенность правил, контейнерные запросы, селектор :has().

Синтаксис

Таблица стилей состоит из правил: селектор выбирает элементы, а блок объявлений задаёт значения свойств.

:root {
  --accent: #6d28d9;           /* пользовательское свойство (переменная) */
  --gap: 1rem;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  margin: 0;
}

.card {
  padding: var(--gap);
  border: 1px solid #ddd;
  border-radius: 8px;

  & h2 { margin-top: 0; }      /* вложенность правил */
  &:hover { border-color: var(--accent); }
}

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

Стили подключают внешним файлом (<link rel="stylesheet">) — так их кэширует браузер, — либо элементом <style> или атрибутом style.

Селекторы

Каскад и специфичность

Слово «каскадные» означает, что к элементу могут применяться несколько конфликтующих правил, и браузер выбирает победителя по порядку:^[3]

1. Происхождение и важность — стили браузера, автора страницы и пользователя; объявления с !important повышают приоритет.
2. Слои каскада (@layer) — явные уровни, например «сброс — компоненты — утилиты».
3. Специфичность селектора: id весомее класса, класс весомее тега.^[5]
4. Порядок — при равенстве побеждает правило, объявленное позже.

Часть свойств, например цвет и шрифт, наследуется от родителя, остальные (отступы, рамки) — нет. Большинство проблем «почему стиль не применяется» объясняются специфичностью; инструменты разработчика в браузере показывают, какое правило победило и какие перечёркнуты.

Блочная модель и раскладка

Каждый элемент — прямоугольник из содержимого, внутреннего отступа (padding), рамки (border) и внешнего отступа (margin). Объявление box-sizing: border-box включает отступы и рамку в заданную ширину, что делает размеры предсказуемыми.

Для раскладки используются:

• Flexbox — размещение элементов в строку или столбец с выравниванием и распределением места;
• Grid — двумерные сетки из строк и столбцов;
• позиционирование (position: relative | absolute | fixed | sticky) — для наложений и закреплённых элементов.

Подробнее — в статье Flexbox и Grid.

Адаптивность

Медиазапросы меняют стили в зависимости от ширины экрана, ориентации, предпочтения тёмной темы или уменьшенной анимации. Контейнерные запросы (@container) реагируют на размер родительского блока, а не всего окна, что удобно для переиспользуемых компонентов. Относительные единицы (rem, %, vw, fr) и функции clamp(), min(), max() позволяют делать резиновые размеры без множества точек перелома.

Инструменты и подходы

• Препроцессоры (Sass, Less) исторически добавили переменные, вложенность и миксины; многое из этого теперь есть в самом CSS.
• Утилитарные фреймворки вроде Tailwind CSS собирают оформление из мелких классов прямо в разметке; компонентные (Bootstrap) дают готовые элементы интерфейса.
• PostCSS и Lightning CSS преобразуют современный синтаксис под старые браузеры.
• Поддержку свойств браузерами удобно проверять на Can I use.^[6]

Полный справочник свойств и селекторов с примерами — на MDN.^[4] Учитывайте и доступность: достаточный контраст текста, видимый фокус и отказ от анимации для тех, кто её отключил (prefers-reduced-motion).

См. также

• HTML
• Flexbox и Grid
• JavaScript
• Веб-доступность (a11y)
• DOM

Источники

1. Håkon Wium Lie — Cascading HTML style sheets: a proposal (1994)
2. W3C — Cascading Style Sheets home page
3. W3C — CSS Cascading and Inheritance Level 5
4. MDN — CSS: Cascading Style Sheets
5. MDN — Specificity
6. Can I use — таблицы поддержки браузерами