Коротко: CSS читают «справа налево» и «сверху вниз». Строка вида .card { padding: 16px; } состоит из селектора (.card), свойства (padding) и значения (16px). Понимание структуры, каскада и специфичности превращает чтение чужих стилей из мучения в понятный процесс.
Анатомия одного правила
.card:hover {
padding: 16px; /* свойство: значение; */
color: #003F8F;
}| Часть | Что это |
|---|---|
.card |
селектор — к каким элементам применяется |
:hover |
псевдокласс-состояние (наведение) |
padding |
свойство — что меняем |
16px |
значение — на что меняем |
; |
конец объявления |
/* … */ |
комментарий, код не выполняется |
Вкладки: ключевые понятия
p— по тегу;.class— по классу;#id— по идентификатору;.a .b—.bвнутри.a;.a > .b— прямой дочерний;.a, .b— перечисление (запятая = «или»).
Чем «конкретнее» селектор, тем сильнее правило. Порядок силы:
- инлайн-стиль в атрибуте
style; #id;- класс, атрибут, псевдокласс;
- тег и псевдоэлемент.
При равной специфичности побеждает то правило, что написано ниже.
Каскад — правила «кто кого перебивает». Сначала сравнивают !important, потом специфичность, потом порядок в файле. Наследование добавляет ещё один слой: некоторые свойства (например, color) переходят от родителя к ребёнку, а padding — нет.
px— фиксированные пиксели;%— от размера родителя;em— от размера шрифта родителя;rem— от размера шрифта корня;vw/vh— от размера окна.
Для адаптива чаще берут rem и %, а не жёсткие пиксели.
Практика: прочитаем пример
/* 1. Общий стиль ссылок */
a { color: #003F8F; }
/* 2. Ссылки в меню — конкретнее */
.menu a { color: #fff; }
/* 3. Активный пункт меню — ещё конкретнее */
.menu a.is-active { color: #992222; }- Правило 1 задаёт цвет всем ссылкам.
- Правило 2 «сильнее», потому что селектор детальнее — ссылки в меню белые.
- Правило 3 побеждает правило 2 у активного пункта.
Шпаргалка: частые свойства
| Свойство | За что отвечает |
|---|---|
display |
тип отображения (block, flex, grid) |
margin / padding |
внешние / внутренние отступы |
color / background |
цвет текста / фона |
font-size |
размер шрифта |
width / height |
ширина / высота |
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стиль не работает | нет ; или опечатка в свойстве |
проверить синтаксис |
| Правило перебито | более сильный селектор | смотреть DevTools, уточнять селектор |
| Не понимаю, откуда стиль | много файлов | использовать вкладку Styles в DevTools |
| Значение не сработало | нужна единица измерения | писать 16px, а не 16 |
Проверьте себя
#id или .class?
1rem?
Вопросы и ответы
Запятая — это «или»: h1, h2 { … } применит стиль и к h1, и к h2.
Так работают состояния и контексты: базовый цвет, цвет при наведении, цвет внутри другого блока. Правила уточняют друг друга.
Это «очередь» правил: когда несколько правил указывают одно и то же, применяется самое приоритетное по специфичности и порядку.
Через DevTools: правый клик по элементу → «Просмотреть код» → вкладка Styles. Там видно все применённые правила и их файлы.
Итоги
- Правило = селектор + свойство + значение.
- Специфичность решает, какое правило победит; при равенстве — то, что ниже.
- Каскад и наследование объясняют «непонятное» поведение стилей.
- DevTools — лучший способ читать CSS реальной страницы.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.