Это основа основ CSS. Если вы поймете эту триаду (Селектор → Свойство → Значение), вы сможете прочитать любой CSS-код.
Вот полный и структурированный разбор синтаксиса:
1. Базовая формула
Любое CSS-правило строится по схеме:
Селектор {
Свойство: Значение;
}Пример:
h1 {
color: red;
}- h1 — Селектор (кому применяем).
- color — Свойство (что меняем).
- red — Значение (как меняем).
2. Селекторы (Кому применяем)
Селектор — это шаблон, который указывает браузеру, к каким элементам HTML применить стили (CSS). Селекторы бывают разной сложности. Делим их на группы:
2.1. Базовые
| Селектор | Пример | Что делает |
|---|---|---|
| Универсальный | * | Выбирает все элементы на странице |
| Тег (Тип) | p | Выбирает все <p> (параграфы) |
| Класс | .menu | Выбирает все элементы с class=«menu» (Самый частый) |
| ID | #header | Выбирает элемент с id=«header» (Должен быть уникальным) |
| Псевдокласс | a:hover | Состояние элемента (при наведении мыши) |
| Псевдоэлемент | p::first-line | Часть элемента (первая строка) |
2.2. Комбинированные
| Селектор | Пример | Что делает |
|---|---|---|
| Группировка | h1, h2, .title | Применяет стили ко всем перечисленным |
| Вложенность | .menu li | Пробел — выбирает li внутри .menu (любой глубины) |
| Дочерний | .menu > li | Знак > — выбирает только прямых потомков li (первый уровень) |
| Соседний | h1 + p | Знак + — выбирает p, который идет сразу после h1 |
3. Свойства (Что меняем)
Свойств в CSS сотни, но все они делятся на категории:
1. Модель блока — ширина, высота, отступы, рамки, поля.
width, height, padding, margin, border.
2. Текст и шрифт — начертание, размер, цвет, выравнивание.
font-size, font-family, color, text-align, line-height.
3. Фон — заливка, градиенты, изображения.
background-color, background-image.
4. Позиционирование — расположение элементов на странице.
position, display (flex, grid, block), float, top, left.
5. Анимация и трансформация — оживление интерфейса.
transition, transform, animation.
6. Декоративное — скругление, тени.
border-radius, box-shadow.
4. Значения (Как меняем)
Значение зависит от типа свойства. Вот основные форматы записи:
4.1. Ключевые слова (зарезервированные слова)
display: block; font-weight: bold; position: relative;
4.2. Числовые значения (с единицами измерения)
| Тип | Единицы | Пример |
|---|---|---|
| Абсолютные | px (пиксели), pt (пункты) | font-size: 16px; |
| Относительные | % (проценты), em (от шрифта родителя), rem (от корневого шрифта), vw (ширина экрана) | width: 50%; margin: 2em; |
| Без единиц | (для line-height или z-index) | line-height: 1.5; z-index: 10; |
4.3. Цвета (множество способов записи)
/* По имени */ color: red; /* HEX (шестнадцатеричный) */ color: #FF0000; /* или #F00 (сокращение) */ /* RGB / RGBA (с альфа-каналом прозрачности) */ color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0.5); /* 50% прозрачности */ /* HSL / HSLA (оттенок, насыщенность, свет) */ color: hsl(0, 100%, 50%);
4.4. Ссылки и пути
Используется для фоновых изображений или шрифтов.
background-image: url("images/photo.jpg");4.5. Несколько значений в одном свойстве
Некоторые свойства принимают от 1 до 4 значений сразу (отступы, рамки).
- 1 значение → применяется ко всем четырем сторонам: margin: 10px;
- 2 значения → (верх-низ) (лево-право): margin: 10px 20px;
- 3 значения → (верх) (лево-право) (низ): margin: 10px 20px 30px;
- 4 значения → (верх) (право) (низ) (лево) по часовой стрелке: margin: 10px 20px 30px 40px;
5. Комментарии
В отличие от HTML, в CSS комментарии пишутся так:
/* Это комментарий для разработчика. Браузер его игнорирует. */