Синтаксис CSS — свойства, правила и комментарии

CSS состоит из правил. Каждое правило — это селектор и блок объявлений со свойствами и значениями. Разбираем структуру CSS, единицы измерения, сокращённые свойства и таблицу основных свойств.

Содержание

Анатомия CSS правила
Единицы измерения CSS
Таблица основных CSS свойств
Сокращённые свойства (shorthand)
Комментарии в CSS
!important — когда использовать
Часто задаваемые вопросы о синтаксисе CSS
px vs rem — что использовать?
Почему CSS свойство не применяется?
Как найти все CSS свойства элемента в браузере?

Анатомия CSS правила

/*
     ┌── СЕЛЕКТОР: к каким элементам применить стиль
     │
    h1  {
           color:    #2563eb  ;
           │          │       └── точка с запятой — конец объявления
           │          └── ЗНАЧЕНИЕ
           └── СВОЙСТВО
        }
        └── блок объявлений — фигурные скобки
*/

/* Несколько объявлений в одном блоке */
p {
  color: #374151;        /* цвет текста */
  font-size: 1rem;       /* размер шрифта */
  line-height: 1.6;      /* межстрочный */
  margin-bottom: 1rem;   /* отступ снизу */
}

/* Группировка — применить к нескольким */
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}

Единицы измерения CSS

Единица	Тип	Описание	Пример
`px`	Абсолютная	Пиксели экрана	`font-size: 16px`
`pt`	Абсолютная	Типографские пункты (для печати)	`font-size: 12pt`
`rem`	Относительная	От корневого `<html>` (обычно 16px)	`font-size: 1rem`
`em`	Относительная	От родительского элемента	`font-size: 1.2em`
`%`	Относительная	Процент от родителя	`width: 50%`
`vw`	Viewport	Процент ширины окна	`width: 100vw`
`vh`	Viewport	Процент высоты окна	`height: 100vh`
`vmin`	Viewport	Меньшая сторона viewport	`font-size: 3vmin`
`fr`	Grid	Доля свободного пространства в Grid	`grid-template-columns: 1fr`

/* Примеры единиц */
html { font-size: 16px; }  /* база для rem */

h1   { font-size: 2rem; }    /* 32px — всегда от html */
p    { font-size: 1rem; }    /* 16px */
small{ font-size: 0.875rem; } /* 14px */

.container { width: 100%; max-width: 1200px; }
.hero      { height: 100vh; }   /* на весь экран */
.half      { width: 50%; }      /* от родителя */

/* clamp — адаптивные размеры без медиазапросов */
h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  /* Минимум 28px, растёт с экраном, максимум 48px */
}

Карта единиц измерения CSS: px rem em percent vw vh fr clamp — Единицы CSS выбирают по задаче: фиксированные детали в px, типографику и отступы в rem, сетки в fr, адаптивные размеры через clamp().

Таблица основных CSS свойств

Свойство	Что делает	Пример
`color`	Цвет текста	`color: #333`
`background-color`	Цвет фона	`background-color: #fff`
`background`	Фон (shorthand)	`background: url('bg.jpg') center/cover`
`font-family`	Шрифт	`font-family: 'Inter', sans-serif`
`font-size`	Размер шрифта	`font-size: 1rem`
`font-weight`	Жирность	`font-weight: 700`
`line-height`	Межстрочный интервал	`line-height: 1.6`
`text-align`	Выравнивание текста	`text-align: center`
`margin`	Внешний отступ	`margin: 0 auto`
`padding`	Внутренний отступ	`padding: 16px 24px`
`border`	Рамка	`border: 1px solid #ccc`
`border-radius`	Скругление углов	`border-radius: 8px`
`width`	Ширина	`width: 100%`
`height`	Высота	`height: 200px`
`max-width`	Максимальная ширина	`max-width: 1200px`
`display`	Тип отображения	`display: flex`
`position`	Позиционирование	`position: relative`
`top / right / bottom / left`	Смещение позиции	`top: 20px`
`z-index`	Порядок наслоения	`z-index: 10`
`overflow`	Контент за пределами	`overflow: hidden`
`opacity`	Прозрачность	`opacity: 0.5`
`box-shadow`	Тень блока	`box-shadow: 0 4px 12px rgba(0,0,0,0.1)`
`transition`	Анимация перехода	`transition: all 0.2s ease`
`transform`	Трансформация	`transform: translateY(-4px)`
`cursor`	Курсор мыши	`cursor: pointer`

Карта основных CSS свойств: color font margin padding display position shadow transition transform — CSS-свойства удобно учить группами: текст, размеры, отступы, layout, слои, эффекты и поведение.

Сокращённые свойства (shorthand)

/* margin и padding: top right bottom left (по часовой стрелке) */
margin: 10px 20px 10px 20px;  /* 4 значения */
margin: 10px 20px;            /* 2 значения: вертикальный горизонтальный */
margin: 10px;                 /* 1 значение: все стороны */

/* border: ширина стиль цвет */
border: 1px solid #e5e7eb;
border: 2px dashed blue;
border: none;

/* background: цвет изображение повтор позиция/размер */
background: #f9fafb url('pattern.png') repeat center/100px;
background: linear-gradient(135deg, #667eea, #764ba2);

/* font: стиль начертание жирность размер/межстрочный семейство */
font: italic 600 1rem/1.6 'Inter', sans-serif;

/* transition: свойство время функция задержка */
transition: background-color 0.2s ease, transform 0.15s ease;

/* animation: имя время функция задержка повторения направление заполнение */
animation: fadeIn 0.5s ease 0s 1 normal forwards;

Сокращенные CSS свойства shorthand: margin border background font transition animation — Shorthand-свойства сокращают запись, но важно помнить порядок значений и возможный сброс отдельных sub-свойств.

Комментарии в CSS

/* Это комментарий в CSS */

/*
   Многострочный комментарий.
   Описание блока стилей.
*/

.header {
  background: #1a1a2e;  /* тёмный фон шапки */
  padding: 20px;        /* внутренние отступы */
}

/* === БЛОК: КАРТОЧКИ === */
/* --- КОМПОНЕНТ: КНОПКИ --- */

/* TODO: добавить hover-эффект */
/* FIXME: исправить на Safari */
/* HACK: временное решение */
/* NOTE: IE11 не поддерживает grid */

!important — когда использовать

/* !important перебивает всё — включая инлайн стили */
.hidden { display: none !important; }

/* Примеры оправданного использования */

/* Утилитарные классы (Tailwind-стиль) */
.hidden   { display: none !important; }
.sr-only  { position: absolute !important; width: 1px !important; }

/* Перебить стили сторонней библиотеки */
.widget-container { font-family: 'Inter' !important; }

/* Сброс в медиазапросе */
@media print {
  .no-print { display: none !important; }
}

/* ❌ Плохо: злоупотребление — симптом проблемы со специфичностью */
p.intro { color: blue !important; }  /* лучше разобраться с каскадом */

CSS important и специфичность: обычное правило, class, inline style, important — !important стоит использовать точечно: для утилит, print-режима или сторонних библиотек, а не вместо понимания каскада.

Часто задаваемые вопросы о синтаксисе CSS

px vs rem — что использовать?

Для шрифтов и отступов — rem. Это позволяет пользователям менять базовый размер шрифта в настройках браузера, и всё масштабируется. Для рамок и теней — px (1px border не должна вдруг стать 2px). Для максимальной ширины контейнера — px (1200px всегда 1200px). Для отступов внутри компонентов можно использовать em — тогда они масштабируются пропорционально шрифту.

Почему CSS свойство не применяется?

Чаще всего причина одна из: 1) Опечатка в имени свойства или значения — браузер игнорирует неизвестные свойства без ошибки. 2) Конфликт специфичности — другое правило с более высокой специфичностью перебивает. 3) Свойство неприменимо к типу элемента (например, width/height к display: inline). 4) Неправильный синтаксис — пропущена точка с запятой, скобка или кавычка. Инструмент для диагностики: DevTools → Elements → вкладка Computed — видны реально применённые значения и откуда они пришли.

Диагностика CSS в DevTools: ошибка свойства, перечеркнутое правило, Computed, specificity — Если CSS-свойство не применяется, проверь синтаксис, специфичность, применимость свойства и итоговое значение во вкладке Computed.

Как найти все CSS свойства элемента в браузере?

Открой DevTools (F12), выбери элемент в панели Elements. Справа вкладка Styles — все правила, применённые к элементу (с файлом и строкой). Вкладка Computed — только итоговые применённые значения (без перекрытых). В поле поиска Computed можно найти конкретное свойство. Перечёркнутые свойства в Styles — перебиты другим правилом с большей специфичностью.