Карта сайта

Урок 17: Селекторы в HTML и CSS

/Уроки по HTML/CSS/Урок 17: Селекторы в HTML и CSS
Урок 17: Селекторы в HTML и CSS
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

На 17-м уроке мы разберем одну из ключевых тем в CSS, это селекторы. Они помогают нам «выбирать» элементы на веб-странице и применять к ним стили. В этом уроке мы изучим селекторы классов, ID, а также научимся группировать селекторы. Всё будет подробно, с примерами и задачами.

Зачем нужны селекторы?

Представьте, что вы художник, а HTML-страница ваше полотно. Чтобы раскрасить элементы (заголовки, абзацы, кнопки), нужно точно указать, к чему применять краски. Селекторы это ваши кисти. Они позволяют выбрать конкретные элементы и задать им стили: цвет, размер, шрифт и многое другое. Без селекторов CSS был бы бесполезен!

Селекторы классов (.)

Синтаксис: .имя-класса { свойства }

Классы это самый гибкий и часто используемый тип селекторов. Их особенность в том, что один класс можно применять к множеству элементов. Это удобно, когда нужно стилизовать несколько объектов одинаково.

Пример 1: Простое использование класса

<!-- HTML -->
<p class="text-red">Этот текст будет красным.</p>
<div class="text-red">И этот тоже!</div>
/* CSS */
.text-red {
  color: red;
}

Оба элемента получат красный цвет текста, так как они используют класс .text-red.

Пример 2: Множественные классы

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

<p class="text-red large-font">Красный текст крупного размера.</p>
.text-red { color: red; }
.large-font { font-size: 24px; }

Задача: Создайте два блока <div>. Первому задайте класс box-blue, второму box-green. Напишите CSS-код, чтобы первый блок стал синим, а второй зеленым. Добавьте общим классом border рамку толщиной 2px черного цвета.

Селекторы ID (#)

Синтаксис: #имя-id { свойства }

ID это уникальные идентификаторы. В отличие от классов, один ID может быть только у одного элемента на странице. Используйте их для стилизации уникальных элементов (например, шапки сайта или контактной формы).

Пример 1: Стилизация по ID

<button id="submit-button">Отправить</button>
#submit-button {
  background: blue;
  color: white;
  padding: 10px;
}
  • ID имеют более высокий приоритет, чем классы. Если к одному элементу применены и класс, и ID, стили ID перекроют класс.
  • Не злоупотребляйте ID для стилей. Они предназначены для уникальных элементов и JavaScript-логики.

Задача: Создайте заголовок <h1> с ID main-title. Установите для него цвет #333, размер шрифта 32px и подчеркивание.

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

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

Синтаксис:
селектор1, селектор2, селектор3 { свойства }

Пример: Группировка классов и тегов

h2, .subtitle, #footer-text {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

Все заголовки <h2>, элементы с классом .subtitle и элемент с ID #footer-text получат указанные стили.

Задача: Напишите CSS-код, который сделает все элементы <a>, класс .highlight и ID special-paragraph жирными (font-weight: 700).

Практика: Создаем мини-проект

Давайте закрепим знания, сверстав фрагмент страницы.

Шаг 1: HTML-структура

<!DOCTYPE html>
<html>
<head>
  <title>Практика: Селекторы</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="header">Мой блог</h1>
  <div class="post">
    <h2 class="post-title">Как я учил CSS</h2>
    <p class="post-text">Сегодня я изучил селекторы...</p>
  </div>
  <div class="post important-post">
    <h2 class="post-title">Важное объявление</h2>
    <p class="post-text">Всем срочно прочитать!</p>
  </div>
  <button id="read-button">Прочитать всё</button>
</body>
</html>

Шаг 2: CSS (style.css)

/* Стили для всех постов */
.post {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 15px;
}

/* Стили для важного поста */
.important-post {
  background: #fff3d4;
}

/* Заголовок блога */
#header {
  color: #2c3e50;
  text-align: center;
}

/* Группировка: кнопка и заголовки постов */
#read-button, .post-title {
  font-family: 'Arial', sans-serif;
}

Итог:

  • У всех элементов с классом .post есть рамка и отступы.
  • Важный пост подсвечен желтым фоном.
  • Заголовок страницы центрирован и имеет темно-синий цвет.
  • Кнопка и заголовки постов используют шрифт Arial.

Полный курс «HTML/CSS для начинающих» с пошаговыми уроками доступен здесь: https://max-gabov.ru/html-css-dlya-nachinaushih