# CSS

> Язык каскадных таблиц стилей, описывающий внешний вид HTML-документов — цвета, шрифты, отступы, раскладку и анимацию.

Источник: https://llmdocs.ru/wiki/css/ · обновлено 2026-11-09 · лицензия CC BY-SA 4.0

- **Полное название**: Cascading Style Sheets
- **Автор идеи**: Хокон Виум Ли (1994)
- **Соавтор**: Берт Бос
- **Первая рекомендация W3C**: CSS1 — декабрь 1996
- **Стандарт**: модули CSS (W3C CSS Working Group)
- **Расширение файлов**: .css
- **MIME-тип**: text/css
**CSS** (англ. *Cascading Style Sheets* — «каскадные таблицы стилей») — язык, описывающий, как выглядят элементы [HTML](https://llmdocs.ru/wiki/html.md)-документа: цвета, шрифты, размеры, отступы, расположение на странице, реакция на ширину экрана, переходы и анимации. Разделение ролей простое: HTML описывает содержимое и структуру, CSS — оформление, [JavaScript](https://llmdocs.ru/wiki/javascript.md) — поведение.

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

## История

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

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

## Синтаксис

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

```css
: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`.

## Селекторы

| Селектор | Что выбирает |
|---|---|
| `p` | все элементы `<p>` |
| `.note` | элементы с классом `note` |
| `#main` | элемент с `id="main"` |
| `nav a` | ссылки внутри `<nav>` на любой глубине |
| `ul > li` | прямые потомки |
| `a:hover`, `input:focus` | состояния (псевдоклассы) |
| `li:nth-child(odd)` | нечётные элементы списка |
| `p::first-line` | часть элемента (псевдоэлемент) |
| `[type="email"]` | по атрибуту |
| `.card:has(img)` | карточки, содержащие изображение |

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

Слово «каскадные» означает, что к элементу могут применяться несколько конфликтующих правил, и браузер выбирает победителя по порядку:[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](https://llmdocs.ru/wiki/flexbox-grid.md).

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

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

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

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

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

## См. также

- [HTML](https://llmdocs.ru/wiki/html.md)
- [Flexbox и Grid](https://llmdocs.ru/wiki/flexbox-grid.md)
- [JavaScript](https://llmdocs.ru/wiki/javascript.md)
- [Веб-доступность (a11y)](https://llmdocs.ru/wiki/accessibility.md)
- [DOM](https://llmdocs.ru/wiki/dom.md)

## Источники

1. [Håkon Wium Lie — Cascading HTML style sheets: a proposal (1994)](https://www.w3.org/People/howcome/p/cascade.html)
2. [W3C — Cascading Style Sheets home page](https://www.w3.org/Style/CSS/)
3. [W3C — CSS Cascading and Inheritance Level 5](https://www.w3.org/TR/css-cascade-5/)
4. [MDN — CSS: Cascading Style Sheets](https://developer.mozilla.org/en-US/docs/Web/CSS)
5. [MDN — Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity)
6. [Can I use — таблицы поддержки браузерами](https://caniuse.com/)