Классы и id

💡 Объяснение

Проблема: как покрасить не все абзацы?

Селектор тега p красит все абзацы страницы. А что если нужно выделить только один — например, предупреждение? Или сделать три одинаковые карточки, не трогая остальные блоки? Для этого у элементов есть «имена» — классы и id.

Класс: class и точка

Класс похож на форму футбольной команды: все игроки одной команды одеты одинаково, но на стадионе есть и другие люди.

<p class="note">Не забудь домашнее задание</p>
<p>Обычный абзац</p>
<p class="note">Завтра выставка работ</p>

.note {
  background: #ffeaa7;
  padding: 12px;
}

• В HTML пишем атрибут class="note" — без точки.
• В CSS пишем селектор .note — с точкой.
• Один класс можно дать любому количеству элементов, даже разных тегов.
• У одного элемента может быть несколько классов через пробел: class="note important". Элемент получит стили обоих классов.

id: уникальное имя и решётка

id похож на номер паспорта: он есть только у одного элемента на странице.

<div id="hero">Добро пожаловать!</div>

#hero {
  background: #6c5ce7;
  color: white;
}

• В CSS — селектор с решёткой: #hero.
• id на странице должен быть уникальным.
• id мы уже использовали для ссылок-якорей href="#hero".

Совет: для оформления используй классы, а id оставь для якорей и форм (связки label + input). Классы гибче: их можно переиспользовать.

Как называть классы

• Латинские буквы, цифры, дефис; начинается с буквы: news-card, btn-big.
• Без пробелов (пробел разделяет разные классы!).
• Имя описывает что это, а не как выглядит: warning лучше, чем red-text — вдруг потом предупреждения станут оранжевыми?
• Регистр важен: Card и card — разные классы. Пиши маленькими буквами.

Комбинированные селекторы

• h1, h2, .title — через запятую: одинаковые стили для нескольких селекторов.
• .card p — через пробел: абзацы внутри элементов с классом card (потомки).
• p.note — без пробела: только абзацы, у которых есть класс note.
• * — все элементы.

Каскад: кто победит?

Иногда к одному элементу подходят несколько правил с разными значениями. Кто победит, решает каскад — это то самое слово «Cascading» в названии CSS. Правила простые:

1. Сила селектора (специфичность): style="" сильнее id, id сильнее класса, класс сильнее тега. Можно представить как карты: тег — шестёрка, класс — дама, id — туз.
2. Если сила одинаковая — побеждает правило, которое написано ниже в CSS.

p      { color: black; }   /* тег */
.note  { color: green; }   /* класс сильнее */
p      { color: red; }     /* ниже, но тег слабее класса */

Абзац с классом note будет зелёным, а обычные абзацы — красными.

Если стиль «не работает», открой F12 → выбери элемент → вкладка «Styles». Проигравшие свойства там зачёркнуты, и видно, какое правило их перебило.

Наследование

Некоторые свойства передаются от родителя детям, как фамилия в семье. Если задать body { font-family: sans-serif; color: #333; }, шрифт и цвет получат все элементы внутри body.

• Наследуются в основном свойства текста: color, font-family, font-size, line-height, text-align.
• Не наследуются свойства коробки: border, padding, margin, background, width. Иначе рамка у body появилась бы у каждого абзаца!

Благодаря наследованию общий шрифт и цвет текста пишут один раз — для body.

Частые ошибки

• Точка в HTML: class=".note".
• Забыли точку в CSS: note { } — браузер ищет тег <note>.
• Два одинаковых id на странице.
• Стиль класса «не работает», потому что его перебивает id или style.

Проверь себя

1. Чем класс отличается от id?
2. Как дать элементу два класса?
3. Какого цвета будет <p id="a" class="b">, если #a { color: red }, а .b { color: blue }?