CSS-переменные (или кастомные свойства) – это мощный инструмент, который позволяет делать ваш CSS более гибким и удобным для использования. Они позволяют задавать значения, которые потом можно переиспользовать в различных местах вашего стиля. Давайте рассмотрим, как их можно использовать в HTML.

Определение CSS-переменных происходит в блоке CSS. Это делается с помощью синтаксиса:

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

В данном примере мы определили три переменные:

  • —main-color – основной цвет (синий);
  • —secondary-color – вторичный цвет (зеленый);
  • —font-size – размер шрифта (16 пикселей);

Переменные обычно определяются в селекторе :root, что делает их доступными для всего документа. После определения переменных, вы можете использовать их в своих стилях следующим образом:

body {
  background-color: var(--main-color);
  color: white;
  font-size: var(--font-size);
}

h1 {
  color: var(--secondary-color);
}

В данном примере мы использовали функцию var() для получения значений наших переменных. Это позволяет легко изменять стили, просто изменив значение переменной в одном месте.

Преимущества использования CSS-переменных:

  • Легкость в поддержке и изменении стилей;
  • Уменьшение дублирования кода;
  • Улучшение читабельности CSS;
  • Возможность использования в JavaScript;

Также стоит отметить, что CSS-переменные могут быть изменены динамически с помощью JavaScript. Например, если вы хотите изменить цвет фона при нажатии на кнопку, вы можете сделать это следующим образом:

document.getElementById('myButton').addEventListener('click', function() {
  document.documentElement.style.setProperty('--main-color', '#e74c3c');
});

В этом коде мы добавляем обработчик событий на кнопку с идентификатором myButton, который изменяет значение переменной —main-color на красный цвет при нажатии.

Использование CSS-переменных в медиа-запросах – еще одна интересная особенность. Вы можете изменять значения переменных в зависимости от размера экрана, что позволяет создавать адаптивные и отзывчивые дизайны. Например:

@media (max-width: 600px) {
  :root {
    --font-size: 14px;
  }
}

Таким образом, на экранах шириной менее 600 пикселей размер шрифта изменится на 14 пикселей.

Кроме того, CSS-переменные могут быть локальными, если они определены внутри определенного селектора. Например:

.container {
  --padding: 20px;
}

.container .item {
  padding: var(--padding);
}

В этом случае переменная —padding доступна только внутри селектора .container.

Таким образом, вы можете использовать CSS-переменные, чтобы сделать ваш код более чистым, управляемым и гибким. Их использование может значительно упростить процесс разработки и поддержки вашего проекта.

Надеюсь, это поможет вам понять, как использовать CSS-переменные в вашем HTML-коде. Если у вас есть вопросы, не стесняйтесь задавать их!