Black Baron

Селекторы в CSS - это основа работы со стилями. Именно с их помощью браузер определяет, какие элементы на странице должны получить указанные правила оформления. Без селекторов невозможно применить стили к HTML-разметке, поэтому важно понимать, как они работают, как выглядят и какие возможности предоставляют. В этой статье мы разберём, что такое селектор, познакомимся с его синтаксисом, приведём практические примеры и рассмотрим роль свойств и значений в CSS-правилах.

Что такое селектор в CSS?

Селектор - это часть CSS-правила, которая определяет, к каким HTML-элементам будет применяться стиль. Если представить HTML как структуру, то селектор выступает «указателем», позволяющим выбрать нужные элементы на странице: абзацы, заголовки, списки, блоки, ссылки и многое другое.

Каждое CSS-правило состоит из двух основных частей:

1. Селектор - указывает на элемент.
2. Блок объявлений (declarations block) - заключён в фигурные скобки {} и содержит свойства и их значения.

Синтаксис CSS-правила

Общий вид CSS-правила выглядит так:

селектор {

    свойство: значение;

}

Разберём элементы синтаксиса подробнее:

• селектор - выбирает HTML-элемент.
• свойство - указывает, что именно нужно изменить (цвет текста, размер шрифта, отступы и т.д.).
• значение - определяет, как именно будет выглядеть свойство.
• Каждое свойство и значение разделяются двоеточием, а правило завершается точкой с запятой.

Примеры селекторов

1. Селектор по имени тега

Применяется ко всем элементам определённого типа.

p {

    color: #303030;

    font-size: 16px;

}

Этот пример выберет все абзацы <p> на странице.

2. Селектор по классу

Используется для элементов с определённым значением атрибута class.

.highlight {

    background-color: #fffa9d;

    padding: 5px;

}

HTML:

<p class="highlight">Этот текст выделен стилем класса.</p>

3. Селектор по идентификатору (ID)

Применяется к уникальному элементу с атрибутом id.

#main-title {

    font-size: 28px;

    color: #0055aa;

}

HTML:

<h1 id="main-title">Главный заголовок страницы</h1>

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

Позволяет применять одно правило к нескольким элементам.

h1, h2, h3 {

    font-family: Georgia, serif;

}

5. Вложенные селекторы (контекстные)

Позволяют выбирать элементы внутри других элементов.

article p {

    line-height: 1.6;

}

Этот пример применяет стили ко всем абзацам, находящимся внутри <article>.

Свойства и значения в селекторах

Свойства и значения - это ключевые элементы CSS-правил. Именно они определяют внешний вид выбранных селектором элементов.

Свойства

Свойства описывают, какой аспект элемента необходимо изменить. Примеры популярных свойств:

• color - цвет текста
• background-color - цвет фона
• margin - внешние отступы
• padding - внутренние отступы
• font-size - размер шрифта
• border - граница элемента

Значения

Значение определяет конкретное оформление свойства. Оно может быть числовым, цветовым, текстовым и т.д.

Примеры значений:

• 16px - размер
• #000000 или rgb(0, 0, 0) - цвет
• solid - тип линии
• center - выравнивание

Пример CSS-правила со свойствами и значениями:

.box {

    width: 300px;

    height: 200px;

    background-color: #f2f2f2;

    border: 1px solid #cccccc;

}

HTML-код:

<div class="box"></div>

В этом примере селектор .box выбирает элемент по классу, а свойства и значения определяют его размеры, цвет фона и границу.

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