English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по CSS

Правила CSS (@RULES)

Полный список свойств CSS

Функция CSS var()

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

CSS функция

Онлайн пример

Определите атрибут с именем "--main-bg-color", а затем вызовите его с помощью функции var():

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной курс (oldtoolbag.com)</title>
<style>
:root {
　　--main-bg-color: coral;　　
}
#div1 {
　　background-color: var(--main-bg-color);
　　padding: 5px;　　
}
#div2 {
　　background-color: var(--main-bg-color);
　　padding: 5px;
}
#div3 {
　　background-color: var(--main-bg-color);
　　padding: 5px;
}
</style>
</head>
<body>
<h1>Функция var()</h1>
<div id="div1">Основной курс oldtoolbag.com - Изучите основы, чтобы идти дальше!</div>
<br>
<div id="div2">Основной курс oldtoolbag.com - Изучите основы, чтобы идти дальше!</div>
<br>
<div id="div3">Основной курс oldtoolbag.com - Изучите основы, чтобы идти дальше!</div>
</body>
</html>
Проверьте, посмотрите ›/›

Определение и использование

Функция var() используется для вставки пользовательских значений свойств, если значение свойства используется в нескольких местах, этот метод очень полезен.

Поддерживаемая версия: CSS3

Совместимость с браузерами

Числа в таблице показывают первую версию браузера, поддерживающую эту функцию.

Функция




var()49.015.031.09.136.0

CSS грамматика

var(custom-property-name, value)
ЗначениеОписание
custom-property-nameОбязателен. Название пользовательского свойства, должно начинаться с -- .
valueОпционально. Заменитель значений, используемый при отсутствии свойства.

Более примеров

Онлайн пример

Использование функции var() для вызова нескольких пользовательских значений:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной курс (oldtoolbag.com)</title>
<style>
:root {
　　--main-bg-color: coral;
　　--main-txt-color: blue;　　
　　--main-padding: 15px;　　
}
#div1 {
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);　　
　　padding: var(--main-padding);
}
#div2 {
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);
　　padding: var(--main-padding);
}
#div3 {
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);
　　padding: var(--main-padding);
}
</style>
</head>
<body>
<h1>Функция var()</h1>
<div id="div1">Основной курс oldtoolbag.com - Изучите основы, чтобы идти дальше!</div>
<br>
<div id="div2">Основной курс oldtoolbag.com - Изучите основы, чтобы идти дальше!</div>
<br>
<div id="div3">Основной курс oldtoolbag.com - Изучите основы, чтобы идти дальше!</div>
</body>
</html>
Проверьте, посмотрите ›/›

CSS функция

Правило @charset CSSФункции CSS