$ sudo teach IT

Селектор по тегу удобен, но грубоват: он красит сразу все абзацы или все заголовки. А что если нужно оформить только одну кнопку по-особенному или выделить лишь важный абзац? Для этого существуют классы — самый используемый инструмент в CSS. С их помощью вы даёте элементам «метки» и стилизуете именно то, что нужно.

После этого урока вы сможете назначать элементам классы и писать под них точечные правила — так работают абсолютно все реальные проекты.

Что уже умеем / что добавим

Вы умеете выбирать элементы по тегу и задавать цвета. Теперь научимся выбирать элементы избирательно — по классу. В сквозном проекте мы оформим ссылку «Записаться на курс» как настоящую кнопку, выделив её отдельным классом.

Что вы узнаете в рамках статьи

  • Что такое атрибут class и как его добавлять.
  • Как писать селектор класса с точкой.
  • Почему один класс можно давать многим элементам.
  • Как назначать элементу сразу несколько классов.
  • Чем селектор класса удобнее селектора по тегу.

Ключевые термины

  • Класс — метка-имя, которую вы даёте элементу через атрибут class.
  • Атрибут class — атрибут HTML со значением-именем класса.
  • Селектор класса — запись .имя в CSS для выбора элементов с этим классом.
  • Переиспользование — применение одного класса к нескольким элементам.

Что такое класс

Класс — это имя-метка, которое вы присваиваете элементу, чтобы потом обратиться к нему из CSS. Метка задаётся атрибутом class прямо в HTML:

<p class="intro">Вводный абзац.</p>
<p>Обычный абзац.</p>

Теперь у первого абзаца есть класс intro, а у второго его нет. Имя класса вы придумываете сами — лучше осмысленное и на латинице: intro, button, card. Класс сам по себе ничего не меняет внешне — он лишь даёт зацепку, за которую можно «взять» элемент в стилях.

Селектор класса

Чтобы обратиться к классу в CSS, перед его именем ставят точку:

.intro {
  color: #1a3c8c;
  font-size: 20px;
}

Это правило применится только к элементам с классом intro — в нашем примере к первому абзацу. Второй останется без изменений. Точка перед именем — обязательна: она отличает селектор класса от селектора по тегу. Запись intro (без точки) означала бы несуществующий тег, а .intro — «элементы с классом intro».

Один класс — много элементов

Главная сила классов — переиспользование. Один и тот же класс можно назначить скольким угодно элементам, и все они получат одинаковое оформление:

<p class="highlight">Важное замечание.</p>
<span class="highlight">Тоже важное.</span>
<li class="highlight">И этот пункт важен.</li>
.highlight {
  background-color: #fff3cd;
}

Все три элемента — абзац, строчный span и пункт списка — получат жёлтую подсветку, хотя это разные теги. Класс не привязан к тегу: он работает на любом элементе. Так вы создаёте единый стиль и применяете его повсюду, где нужно.

Несколько классов у одного элемента

Элементу можно назначить сразу несколько классов — просто перечислите их в атрибуте class через пробел:

<a class="button button-primary">Записаться</a>
.button {
  padding: 12px 24px;
  color: white;
}

.button-primary {
  background-color: #1a3c8c;
}

Элемент получит стили обоих классов: общие правила кнопки из .button и особый синий фон из .button-primary. Этот приём очень удобен: базовый класс задаёт общий вид, а дополнительный — вариацию. Так можно легко сделать кнопки разного цвета, не переписывая общие свойства.

Применяем в проекте

Превратим ссылку «Записаться на курс» в кнопку. Дадим ей класс button и опишем его в стилях. Пока используем уже знакомые нам свойства цвета — а отступы разберём подробнее в третьем разделе.

В HTML добавим класс ссылке:

<a class="button" href="https://stepik.org" target="_blank">Записаться на курс</a>

В style.css опишем класс:

.button {
  background-color: #1a3c8c;
  color: white;
}

Ссылка получила синий фон и белый текст — она уже похожа на кнопку, а не на обычную подчёркнутую ссылку. Заметьте: мы стилизовали только эту ссылку, не затронув остальные. В этом и есть точность классов.

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

  • Забытая точка в CSS.
    Селектор класса пишется с точкой: .button, а не button.
  • Точка в HTML-атрибуте.
    В class точку не пишут: class="button", а не class=".button".
  • Классы без пробела.
    Несколько классов разделяют пробелом: class="button button-primary".
  • Имена с пробелом внутри.
    Имя одного класса пишется слитно; class="my button" — это уже два класса.

Итоги

Отлично — вы освоили главный инструмент CSS! Теперь вы умеете помечать элементы классами, писать под них точечные правила с точкой, переиспользовать один класс на многих элементах и комбинировать сразу несколько классов. Это именно тот подход, на котором держится вёрстка настоящих сайтов. А ваша кнопка «Записаться на курс» наконец стала выглядеть как кнопка.

Вы делаете большие успехи! В следующем уроке добавим лендингу индивидуальности — подключим красивые шрифты.

На следующий урок