логотип PurpleSchool
Иконка входа
Вход
  • Обучение
  • Войти
логотип PurpleSchool
Главная
База знаний
Псевдокласс root в CSS. Полное руководство с примерами

Псевдокласс root в CSS. Полное руководство с примерами

25 июля 2024 г.
Автор

Дмитрий Нечаев

Псевдокласс :root в CSS используется для выбора корневого элемента документа, будь то HTML или SVG. Он часто применяется для определения кастомных свойств (переменных CSS), которые могут быть использованы в дальнейшем в стилях страницы. В этой статье мы подробно рассмотрим псевдокласс :root, его применение и приведём примеры использования для различных ситуаций.

Что такое псевдокласс :root?

Псевдокласс :root соответствует корневому элементу документа. В HTML это элемент <html>, а в SVG — элемент <svg>. Использование :root позволяет применить стили к корневому элементу или задать кастомные свойства, которые могут быть использованы в других селекторах.

Пример базового использования :root

:root {
  --main-color: #3498db; /* Определение кастомного свойства */
  font-size: 16px; /* Задание базового размера шрифта */
}

В этом примере мы определяем кастомное свойство --main-color и задаём базовый размер шрифта для всего документа.

Примеры использования псевдокласса :root

Основные примеры

Определение кастомных свойств

Пример:

:root {
  --main-bg-color: #3498db; /* Основной цвет фона */
  --main-text-color: #ffffff; /* Основной цвет текста */
  --font-size-large: 24px; /* Большой размер шрифта */
}

body {
  background-color: var(--main-bg-color); /* Использование кастомного свойства для фона */
  color: var(--main-text-color); /* Использование кастомного свойства для текста */
  font-size: var(--font-size-large); /* Использование кастомного свойства для размера шрифта */
}

В этом примере мы определяем кастомные свойства для основного цвета фона, цвета текста и размера шрифта, а затем применяем их к элементу <body>.

Стилизация корневого элемента HTML

Пример:

:root {
  font-size: 16px; /* Базовый размер шрифта */
}

body {
  font-family: Arial, sans-serif; /* Основной шрифт для страницы */
}

h1 {
  font-size: 2rem; /* Размер шрифта заголовка, основанный на размере корневого элемента */
}

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

Сложные примеры

Тема оформления с использованием кастомных свойств

Пример:

:root {
  --primary-color: #3498db; /* Основной цвет */
  --secondary-color: #2ecc71; /* Вторичный цвет */
  --font-size-small: 12px; /* Маленький размер шрифта */
  --font-size-medium: 16px; /* Средний размер шрифта */
  --font-size-large: 24px; /* Большой размер шрифта */
}

body {
  background-color: var(--primary-color); /* Основной цвет фона */
  color: var(--secondary-color); /* Цвет текста */
  font-size: var(--font-size-medium); /* Средний размер шрифта */
}

h1 {
  font-size: var(--font-size-large); /* Большой размер шрифта для заголовка */
}

p {
  font-size: var(--font-size-small); /* Маленький размер шрифта для параграфа */
}

В этом примере мы создаём тему оформления, используя кастомные свойства для цветов и размеров шрифтов, а затем применяем их к различным элементам страницы.

Комбинирование с другими селекторами и псевдоклассами

Адаптивный дизайн с использованием медиа-запросов

Пример:

:root {
  --primary-color: #3498db;
  --font-size-base: 16px;
}

@media (min-width: 768px) {
  :root {
    --font-size-base: 18px; /* Увеличение базового размера шрифта на больших экранах */
  }
}

body {
  background-color: var(--primary-color);
  font-size: var(--font-size-base);
}

В этом примере мы используем медиа-запросы для адаптивного изменения базового размера шрифта в зависимости от ширины экрана.

Использование в реальных проектах

Стилизация корневого элемента HTML

Пример использования псевдокласса :root для стилизации корневого элемента HTML:

:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333;
  --base-font-size: 16px;
}

html {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: var(--base-font-size);
}

body {
  font-family: 'Roboto', sans-serif;
}

В этом примере мы задаём основные цвета и размеры шрифтов для всей страницы через корневой элемент.

Стилизация корневого элемента SVG

Пример использования псевдокласса :root для стилизации корневого элемента SVG:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      --svg-bg-color: #3498db;
      --svg-circle-color: #e74c3c;
    }

    svg {
      background-color: var(--svg-bg-color);
    }

    circle {
      fill: var(--svg-circle-color);
    }
  </style>
  <title>Стилизация корневого элемента SVG</title>
</head>
<body>
  <svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
  </svg>
</body>
</html>

В этом примере мы задаём цвета фона и круга для SVG с использованием кастомных свойств через корневой элемент.

Заключение

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

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile