Recommandation de cours :

Fonction var() de CSS

Définition et utilisation de CSS var() La fonction est utilisée pour insérer la valeur des variables CSS.

Exemple

Exemple 1

Déclarez d'abord une variable globale nommée --main-bg-color, puis utilisez-la dans la feuille de style. var() La fonction insère la valeur de cette variable :

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Essayez-le vous-même

Exemple 2

Un autre exemple d'utilisation var() Exemple de fonction insérant plusieurs valeurs de variables CSS :

: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);
}

Essayez-le vous-même

Grammaire CSS

var(--name, value)

Détails techniques

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Pages associées

Tutoriel :Variable CSS