CSS селекторы и стили: руководство для начинающих

В языке CSS, как и в любом другом языке программирования, каждый элемент имеет своё имя. Например, body, h1, h3. Эти элементы, к которым применяются стили, называются селекторами. Всё, что находится в фигурных скобках {}, называется блоком объявления стилей. Внутри блока объявляются свойства и их значения. Важно правильно понимать терминологию: свойство и значение.

Способы обращения к элементам

Обращение к элементам в CSS осуществляется тремя способами:

Обращение по тегу

Этот способ заключается в обращении к элементу по его тегу. Например:

body {
  /* стили для элемента body */
}

h1 {
  /* стили для всех заголовков h1 */
}

h3 {
  /* стили для всех заголовков h3 */
}

Стиль, применённый к тегу, применяется ко всем элементам этого типа на странице.

Обращение по идентификатору (ID)

Для обращения к конкретному элементу используется идентификатор (id). Идентификатор объявляется в HTML-коде с помощью атрибута id:

<h1><span id="header">Заголовок</span></h1>
<h1>Заголовок 2</h1>

В CSS к этому элементу можно обратиться, используя символ #:

#header {
  color: red;
}

Идентификатор должен быть уникальным в пределах документа. Использование одинаковых ID нежелательно и может приводить к непредсказуемому поведению в старых браузерах. Не рекомендуется использовать в идентификаторах названия тегов.

Обращение по классу

В отличие от идентификатора, класс (class) может применяться к нескольким элементам. Класс объявляется в HTML с помощью атрибута class:

<h3 class="style">Заголовок</h3>
<h3 class="style">Заголовок</h3>

В CSS к нему обращаются с помощью точки .:

.style {
  color: yellow;
}

Этот стиль будет применён ко всем элементам с классом style.

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

Селекторы можно комбинировать для более точного указания стилей. Например, для применения стиля только к заголовкам h3 с классом style:

h3.style {
  color: yellow;
}

Для абзацев (p) с классом style:

p.style {
  background-color: blue;
}

Вложенные селекторы

Вложенные селекторы используются для стилизации элементов внутри других элементов:

p i {
  color: green;
}

Этот код изменит цвет курсива (i) внутри абзацев (p).

Универсальный селектор

Универсальный селектор * применяет стили ко всем элементам на странице:

* {
  font-size: 20px;
}

Группировка селекторов

Селекторы можно группировать через запятую для применения одного и того же стиля к нескольким элементам:

p, b {
  font-size: 30px;
}

Свойство font-weight

Свойство font-weight управляет жирностью текста. Возможные значения: normal, bold, lighter, bolder и числовые значения (от 100 до 900).

Рассмотрены основные способы обращения к элементам в CSS с помощью селекторов: по тегу, идентификатору и классу, а также комбинирование селекторов и использование универсального селектора. Правильное понимание и использование селекторов является основой эффективной работы с CSS.