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

manuel de référence CSS

règles CSS @

大全 des attributs CSS

Fonction CSS var()

La fonction var() peut être utilisée comme valeur pour n'importe quel attribut d'élément. La fonction var() ne peut pas être utilisée comme nom d'attribut, sélecteur ou toute autre chose que la valeur de l'attribut. (Cela peut généralement entraîner des erreurs de syntaxe ou des valeurs non pertinentes pour les variables).

Fonction CSS

Exemple en ligne

Définissez un nom d'attribut "--main-bg-Définissez l'attribut "color" et utilisez ensuite la fonction var() pour appeler cet attribut :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriel de base(oldtoolbag.com)</title>/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>Fonction var()</h1>
<div id="div1">Tutoriel de base oldtoolbag.com　-　Apprendre les bases, c'est la clé pour aller plus loin !</div>
<br>
<div id="div2">Tutoriel de base oldtoolbag.com　-　Apprendre les bases, c'est la clé pour aller plus loin !</div>
<br>
<div id="div3">Tutoriel de base oldtoolbag.com　-　Apprendre les bases, c'est la clé pour aller plus loin !</div>
</body>
</html>
Testez pour voir ‹/›

Définition et utilisation

La fonction var() est utilisée pour insérer des valeurs d'attributs personnalisés. Si une valeur d'attribut est utilisée plusieurs fois, cette méthode est très utile.

Version prise en charge : CSS3

Compatibilité du navigateur

Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette fonction.

fonction




var()49.015.031.09.136.0

Syntaxe CSS

var(custom-property-name, value)
ValeurDescription
custom-property-nameObligatoire. Nom de l'attribut personnalisé, doit commencer par -- 　commence par.
valueOptionnel. Valeur de secours, utilisée lorsque l'attribut n'existe pas.

Plus d'exemples

Exemple en ligne

Utilisation de la fonction var() pour appeler plusieurs valeurs personnalisées :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriel de base(oldtoolbag.com)</title>/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>Fonction var()</h1>
<div id="div1">Tutoriel de base oldtoolbag.com　-　Apprendre les bases, c'est la clé pour aller plus loin !</div>
<br>
<div id="div2">Tutoriel de base oldtoolbag.com　-　Apprendre les bases, c'est la clé pour aller plus loin !</div>
<br>
<div id="div3">Tutoriel de base oldtoolbag.com　-　Apprendre les bases, c'est la clé pour aller plus loin !</div>
</body>
</html>
Testez pour voir ‹/›

Fonction CSS

Règle @charset CSSFonctions CSS