Переменные CSS (Custom Properties): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Эта серия упражнений поможет вам освоить CSS Переменные (также известные как Custom Properties). Вы начнете с основ объявления и использования переменных в :root, затем перейдете к локальным переменным, использованию запасных значений (fallback), переопределению переменных в разных областях видимости и их применению в реальных сценариях для создания более гибких и поддерживаемых стилей. Теории нет, только практика: вам нужно будет заполнить пропущенные части CSS кода, чтобы достичь нужного визуального результата

Список тем

Объявление и использование первой переменной

В этом задании нужно объявить CSS переменную для основного цвета текста внутри селектора `:root` и затем применить её к параграфу. Цвет текста параграфа должен стать синим (#007bff).

CSS

input1 {
  input2: #007bff;
}

p {
  color: input3;
  font-size: 16px;
}

                     input1 {
  input2: #007bff;
}

p {
  color: input3;
  font-size: 16px;
}

HTML

<p>Этот текст должен стать синим с использованием CSS переменной.</p>

Объявите переменную внутри блока `:root { ... }`. Имя переменной должно начинаться с двух дефисов (`--`). Например: `--my-color: #007bff;`. Затем используйте функцию `var()` для применения этой переменной к свойству `color` у селектора `p`. Например: `color: var(--my-color);`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Объявите две глобальные переменные: одну для цвета фона (`--bg-color`) со значением #e9ecef и другую для размера шрифта (`--base-font-size`) со значением 1rem. Примените их к элементу `div`. Фон должен стать светло-серым, а размер шрифта - 1rem.

CSS

:root {
  input1: #e9ecef;
  input2: 1rem;
}

div {
  padding: 20px;
  background-color: input3;
  font-size: input4;
}

                     :root {
  input1: #e9ecef;
  input2: 1rem;
}

div {
  padding: 20px;
  background-color: input3;
  font-size: input4;
}

HTML

<div>Этот блок должен иметь светло-серый фон и базовый размер шрифта.</div>

Внутри `:root` объявите две переменные: `--bg-color: #e9ecef;` и `--base-font-size: 1rem;`. Затем для селектора `div` используйте `background-color: var(--bg-color);` и `font-size: var(--base-font-size);`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Локальная область видимости переменной

Объявите переменную `--highlight-color` со значением #ffc107 непосредственно для класса `.highlight`. Примените эту переменную для цвета фона элементов с этим классом. Фон должен стать желтым.

CSS

p {
  padding: 10px;
  border: 1px solid #ccc;
}

input1 {
  input2: #ffc107;
  background-color: input3;
  color: #333;
}

                     p {
  padding: 10px;
  border: 1px solid #ccc;
}

input1 {
  input2: #ffc107;
  background-color: input3;
  color: #333;
}

HTML

<p>Обычный параграф.</p>
<p class="highlight">Этот параграф должен быть выделен желтым фоном.</p>

Внутри селектора `.highlight { ... }` объявите переменную `--highlight-color: #ffc107;`. Затем в этом же селекторе используйте `background-color: var(--highlight-color);`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Запасное значение (Fallback)

Используйте переменную `--button-bg-color` для фона кнопки. Если эта переменная не определена, кнопка должна использовать запасной цвет фона #6c757d (серый). В данном задании переменная `--button-bg-color` не объявлена, поэтому должен примениться запасной цвет.

CSS

button {
  padding: 10px 15px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  background-color: input1;
}

                     button {
  padding: 10px 15px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  background-color: input1;
}

HTML

<button>Кнопка</button>

Используйте функцию `var()` с двумя аргументами: `var(имя-переменной, запасное-значение)`. В данном случае: `background-color: var(--button-bg-color, #6c757d);`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переопределение переменной

Объявите глобальную переменную `--text-color` со значением #212529 (темный). Затем для класса `.text-light` переопределите эту же переменную `--text-color` значением #f8f9fa (светлый). Примените переменную к параграфам. Второй параграф должен стать светлым.

CSS

input1 {
  input2: #212529; /* Темный цвет по умолчанию */
}

.text-light {
  input3: #f8f9fa; /* Светлый цвет для этого класса */
  background-color: #343a40; /* Темный фон для контраста */
  padding: 5px;
}

p {
  margin-bottom: 10px;
  color: input4;
}

                     input1 {
  input2: #212529; /* Темный цвет по умолчанию */
}

.text-light {
  input3: #f8f9fa; /* Светлый цвет для этого класса */
  background-color: #343a40; /* Темный фон для контраста */
  padding: 5px;
}

p {
  margin-bottom: 10px;
  color: input4;
}

HTML

<p>Обычный текст.</p>
<p class="text-light">Светлый текст на темном фоне.</p>

Сначала объявите `:root { --text-color: #212529; }`. Затем в селекторе `.text-light { --text-color: #f8f9fa; }`. Для обоих параграфов используйте `color: var(--text-color);`. Благодаря каскадности, у второго параграфа применится переопределенное значение.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переменные для отступов

Объявите глобальную переменную `--base-padding` со значением 15px. Используйте эту переменную для задания `padding` у элемента `div`. Отступы внутри блока должны стать 15px со всех сторон.

CSS

:root {
  input1: 15px;
}

div {
  border: 1px solid #007bff;
  background-color: #e7f3ff;
  padding: input2;
}

                     :root {
  input1: 15px;
}

div {
  border: 1px solid #007bff;
  background-color: #e7f3ff;
  padding: input2;
}

HTML

<div>У этого блока должны быть внутренние отступы размером 15px, заданные через переменную.</div>

В `:root` объявите `--base-padding: 15px;`. Затем для `div` используйте `padding: var(--base-padding);`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переменные внутри calc()

Объявите глобальную переменную `--base-width` со значением 100px. Задайте ширину элемента `div` равной значению этой переменной, умноженному на 2, используя функцию `calc()`. Итоговая ширина блока должна стать 200px.

CSS

:root {
  input1: 100px;
}

div {
  height: 50px;
  background-color: #28a745;
  border: 1px solid #1e7e34;
  width: input2;
}

                     :root {
  input1: 100px;
}

div {
  height: 50px;
  background-color: #28a745;
  border: 1px solid #1e7e34;
  width: input2;
}

HTML

<div>Ширина этого блока должна быть 200px (100px * 2), рассчитанная с помощью calc() и переменной.</div>

В `:root` объявите `--base-width: 100px;`. Для `div` используйте `width: calc(var(--base-width) * 2);`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Наследование переменных

Объявите переменную `--link-color` со значением #dc3545 (красный) для элемента `div`. Внутри этого `div` есть ссылка (`a`). Задайте цвет ссылки так, чтобы она унаследовала значение переменной `--link-color` от родительского `div`. Ссылка должна стать красной.

CSS

div {
  padding: 20px;
  border: 1px dashed #ccc;
  input1: #dc3545;
}

a {
  font-weight: bold;
  text-decoration: none;
  color: input2;
}

                     div {
  padding: 20px;
  border: 1px dashed #ccc;
  input1: #dc3545;
}

a {
  font-weight: bold;
  text-decoration: none;
  color: input2;
}

HTML

<div>
  Это родительский блок.
  <a href="#">Эта ссылка должна стать красной, унаследовав цвет от родителя.</a>
</div>

Объявите переменную в селекторе `div`: `div { --link-color: #dc3545; }`. Затем для селектора `a` используйте `color: var(--link-color);`. Переменные наследуются по DOM-дереву.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку