Селекторы

В прошлом уроке был разобран селектор по классу. Селектор — это описание того, к чему нужно применить тот или иной стиль CSS. Они бывают достаточно сложными, указывая не просто конкретный элемент, но и место, где он находится или внутри какого тега. Вспомним про селектор по классу. Он применяется к любому элементу, класс которого мы указали.

<p class="text-bold">Жирный текст внутри параграфа</p>
<div class="text-bold">Ещё один текст внутри простого блочного элемента. Так как у него тоже есть класс text-bold, то он будет с жирным начертанием</div>
.text-bold {
  font-weight: bold;
}

Свойство font-weight со значением bold установит жирное начертание текста. С этим свойством вы подробнее познакомитесь при изучении оформления текста. Сейчас самое главное — этот стиль будет применён и к параграфу, и к блочному элементу div, так как они имеют один и тот же класс.

Помимо селекторов по классу существует ещё несколько основных селекторов. Отличительным признаком элемента является тег, которым он обрамлён. В CSS есть возможность задать стили непосредственно для тега. В этом нам поможет селектор по тегу. Для его использования достаточно указать тег, к которому нужно обратиться.

<h1>Заголовок, к которому применяются правила</h1>
h1 {
  font-size: 28px;
}

В этом примере для заголовка первого уровня указано свойство font-size, которое отвечает за размер шрифта. Важно отметить, что селектор по тегу добавит стили для всех указанных тегов, которые встретятся на странице. Зачастую это плохой подход, так как разные элементы могут иметь разные стили даже при использовании одинаковых тегов. Используйте селектор по тегу для описания общих стилей проекта. Например, для указания стилей заголовков. Заголовки зачастую одинаковые для всего проекта, поэтому их стили можно указать в селекторе по тегу.

Ещё одним способом указать стили является использование селектора по идентификатору. Используя атрибут id, можно указать уникальное имя для любого элемента на странице. Если данное имя указано, то к элементу возможно обратиться используя селектор по идентификатору. Чтобы указать стили для элемента с идентификатором используется конструкция #имя_идентификатора.

<p id="red">Красный параграф</p>
#red {
  color: red;
}

Задание

В редакторе создайте параграф с идентификатором red и классом bold. Установите следующие свойства:

  • Для идентификатора red установите красный цвет текста.
  • Для класса bold установите жирное начертание текста.

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном cообществе
Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.