Урок 40. Задания: CSS-переменные (custom properties)

📁 Раздел: Современный CSS ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#root

⚡ Кратко

Объяви переменные в :root, читай через var(), переопредели в области компонента и добавь fallback. Проверь себя на трёх задачах ниже.

Задания

  1. Палитра в переменных. Объяви в :root переменные --brand, --accent и --text. Сделай кнопку с фоном var(--brand) и текстом var(--text).
    Кнопка на var(--brand)

    Ожидаемый результат: фон кнопки берётся из переменной.

  2. Варианты карточки через переопределение. Напиши одно правило .card с border-left: 6px solid var(--accent). Добавь классы .card.info и .card.warn, которые задают разное значение --accent в своей области. Само правило .card не дублируй.
    синяя оранжевая

    Одна разметка, разный --accent.

  3. Fallback. Сделай блок .note с фоном var(--note-bg, #fef9c3). Убедись, что без объявления --note-bg блок жёлтый, а после объявления переменной — берёт её значение.
  4. Тема. Объяви --bg и --text в :root и переопредели их в @media (prefers-color-scheme: dark). Проверь переключение в DevTools.
Проверь решения на странице ✅ Решения.

Навигация