Область видимости переменных: Тренажер CSS

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

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

Список тем

Глобальная переменная

Объявите глобальную переменную для основного цвета текста и примените её к элементу `p`. Глобальные переменные доступны во всем документе.

CSS

input1 {
  --main-text-color: #333;
}

p {
  color: var(input2);
  font-family: sans-serif;
}

                     input1 {
  --main-text-color: #333;
}

p {
  color: var(input2);
  font-family: sans-serif;
}

HTML

<p>Этот текст должен использовать глобальную переменную цвета.</p>

Глобальные переменные обычно объявляются внутри псевдокласса `:root`. Для объявления переменной используйте синтаксис `--имя-переменной: значение;`. Для использования переменной примените функцию `var(--имя-переменной)`.

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

Результат

Сообщения

Выполнить

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

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

Локальная переменная

Объявите переменную `--local-bg-color` со значением `lightblue` только для элемента с классом `local-scope` и примените её к его фону. Локальные переменные действуют только внутри селектора, где они объявлены, и для его дочерних элементов.

CSS

.local-scope {
  input1  lightblue;
  background-color: var(input2);
  padding: 15px;
  margin-top: 10px;
  border: 1px solid #ccc;
}

div {
  padding: 10px;
  border: 1px solid #eee;
}

                     .local-scope {
  input1  lightblue;
  background-color: var(input2);
  padding: 15px;
  margin-top: 10px;
  border: 1px solid #ccc;
}

div {
  padding: 10px;
  border: 1px solid #eee;
}

HTML

<div>Этот блок не имеет локальной переменной.</div>
<div class="local-scope">Этот блок должен иметь светло-голубой фон благодаря локальной переменной.</div>

Локальные переменные объявляются непосредственно внутри селектора, к которому они должны применяться. Синтаксис объявления и использования такой же, как у глобальных переменных (`--имя: значение;` и `var(--имя)`).

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

Результат

Сообщения

Выполнить

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

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

Переопределение глобальной переменной

Глобальная переменная `--highlight-color` задает цвет фона для всех `div`. Переопределите эту переменную для элемента с классом `override` на значение `lightcoral`, чтобы изменить его фон, не затрагивая другие `div`.

CSS

:root {
  --highlight-color: lightyellow;
}

div {
  background-color: var(input1);
  padding: 15px;
  margin-bottom: 10px;
  border: 1px dashed gray;
}

.override {
  input2  lightcoral;
}

                     :root {
  --highlight-color: lightyellow;
}

div {
  background-color: var(input1);
  padding: 15px;
  margin-bottom: 10px;
  border: 1px dashed gray;
}

.override {
  input2  lightcoral;
}

HTML

<div>Этот блок использует глобальный цвет фона.</div>
<div class="override">Этот блок должен иметь переопределенный цвет фона (lightcoral).</div>
<div>Этот блок также использует глобальный цвет фона.</div>

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

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

Результат

Сообщения

Выполнить

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

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

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

Задайте переменную `--base-padding` в родительском элементе `section`. Используйте эту переменную для внутренних отступов как в `section`, так и в дочернем `div`. Переменные CSS наследуются дочерними элементами.

CSS

section {
  input1 15px;
  padding: var(input2);
  background-color: #e0f7fa;
  border: 1px solid #00796b;
}

div {
  padding: var(input3);
  background-color: #fff;
  margin: 10px;
  border: 1px solid #ccc;
}

                     section {
  input1 15px;
  padding: var(input2);
  background-color: #e0f7fa;
  border: 1px solid #00796b;
}

div {
  padding: var(input3);
  background-color: #fff;
  margin: 10px;
  border: 1px solid #ccc;
}

HTML

<section>
  Section Content
  <div>
    Div Content (должен унаследовать отступ)
  </div>
</section>

Объявите переменную `--base-padding` в селекторе `section`. Затем используйте `var(--base-padding)` для свойства `padding` в селекторах `section` и `div`. Дочерний `div` унаследует значение переменной от `section`.

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

Результат

Сообщения

Выполнить

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

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

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

Попытайтесь использовать неопределенную переменную `--undefined-color` для цвета текста элемента `p`. Предоставьте запасное значение `green`, которое будет применено, если переменная не найдена.

CSS

p {
  /* Переменная --undefined-color нигде не объявлена */
  color: var(input1, input2);
  font-weight: bold;
  padding: 10px;
  border: 1px solid black;
}

                     p {
  /* Переменная --undefined-color нигде не объявлена */
  color: var(input1, input2);
  font-weight: bold;
  padding: 10px;
  border: 1px solid black;
}

HTML

<p>Этот текст должен стать зеленым, используя запасное значение.</p>

Функция `var()` принимает второй необязательный параметр - запасное значение. Синтаксис: `var(--имя-переменной, запасное-значение)`. Если `--имя-переменной` не определено, будет использовано `запасное-значение`.

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

Результат

Сообщения

Выполнить

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

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

Синтаксис запасного значения

Исправьте синтаксис функции `var()`, чтобы применить запасной цвет фона `orange`, так как переменная `--bg-color` не определена. Обратите внимание на разделитель между именем переменной и запасным значением.

CSS

:root {
  --text-color: navy;
}

div {
  /* Переменная --bg-color не определена */
  background-color: var(--bg-color input1 orange);
  color: var(--text-color);
  padding: 20px;
  text-align: center;
}

                     :root {
  --text-color: navy;
}

div {
  /* Переменная --bg-color не определена */
  background-color: var(--bg-color input1 orange);
  color: var(--text-color);
  padding: 20px;
  text-align: center;
}

HTML

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

Правильный синтаксис функции `var()` с запасным значением: `var(--имя-переменной, запасное-значение)`. Убедитесь, что между именем переменной и запасным значением стоит запятая.

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

Результат

Сообщения

Выполнить

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

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

Комбинация глобальных и локальных переменных

Определите глобальные переменные для основного фона (`--main-bg`) и отступа (`--main-padding`). Примените их к контейнеру. Затем в элементе `.special` переопределите отступ (`--main-padding`) и добавьте новую локальную переменную для фона (`--special-bg`), применив их соответственно.

CSS

input1 {
  --main-bg: #f0f0f0;
  --main-padding: 20px;
}

.container {
  background-color: var(--main-bg);
  padding: var(input2);
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.special {
  input3: lightcyan; /* Локальная переменная для фона */
  input4: 5px; /* Переопределение глобального отступа */
  background-color: var(input5);
  padding: var(input6);
  color: #333;
  border: 1px dashed blue;
}

                     input1 {
  --main-bg: #f0f0f0;
  --main-padding: 20px;
}

.container {
  background-color: var(--main-bg);
  padding: var(input2);
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.special {
  input3: lightcyan; /* Локальная переменная для фона */
  input4: 5px; /* Переопределение глобального отступа */
  background-color: var(input5);
  padding: var(input6);
  color: #333;
  border: 1px dashed blue;
}

HTML

<div class="container">Обычный контейнер</div>
<div class="container special">Специальный контейнер с другими стилями</div>

Объявите `--main-bg` и `--main-padding` в `:root`. Используйте их в `.container`. В `.special` объявите `--main-padding` с новым значением и `--special-bg` с любым цветом (например, `lightcyan`). Примените `var(--special-bg)` к `background-color` и `var(--main-padding)` к `padding` внутри `.special`.

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

Результат

Сообщения

Выполнить

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

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

Переменные в calc()

Используйте глобальную переменную `--base-margin` со значением `10px` внутри функции `calc()` для задания внешнего отступа (`margin`) элемента `div`, который должен быть вдвое больше значения переменной.

CSS

:root {
  input1: 10px;
}

div {
  height: 50px;
  background-color: #8bc34a;
  border: 1px solid #33691e;
  margin: calc(var(input2) * 2);
  text-align: center;
  line-height: 50px;
  color: white;
}

                     :root {
  input1: 10px;
}

div {
  height: 50px;
  background-color: #8bc34a;
  border: 1px solid #33691e;
  margin: calc(var(input2) * 2);
  text-align: center;
  line-height: 50px;
  color: white;
}

HTML

<div>Этот блок имеет margin = 2 * --base-margin</div>

Объявите глобальную переменную `--base-margin: 10px;` в `:root`. Для свойства `margin` элемента `div` используйте `calc(var(--base-margin) * 2)`. Функция `calc()` позволяет выполнять математические расчеты со значениями CSS, включая переменные.

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

Результат

Сообщения

Выполнить

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

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