Que sont les variables en CSS

En CSS, les variables font référence à des attributs personnalisés, qui ont des identifiants légaux et des valeurs légales et peuvent être utilisés n'importe où. Les variables CSS ont accès au DOM, ce qui signifie que les développeurs peuvent créer des variables avec une portée locale ou globale, modifier des variables à l'aide de JavaScript et modifier des variables en fonction de requêtes multimédias.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les propriétés personnalisées CSS sont également appelées variables CSS. Les variables ont des identifiants légaux et des valeurs légales et peuvent être utilisées n'importe où. Utilisez des variables via la fonction var(). Par exemple : var(--example) renverra la valeur correspondant à --example. La fonction

var() permet d'insérer la valeur d'une variable CSS.

Les variables CSS ont accès au DOM, ce qui signifie que vous pouvez créer des variables avec une portée locale ou globale, modifier des variables à l'aide de JavaScript et modifier des variables en fonction de requêtes multimédias.

Une excellente façon d'utiliser les variables CSS implique les couleurs de votre conception. Vous pouvez les placer dans des variables au lieu de copier et coller les mêmes couleurs encore et encore.

Utilisation de base :

• Déclarer une variable locale :

element {
  --main-bg-color: brown;
}

• Utiliser une variable locale :

element {
  background-color: var(--main-bg-color);
}

• Déclarer une variable CSS globale :

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}

• use une Variables CSS globales :

.demo{
   color: var(--global-color);
}

Supplementary

• :root est une pseudo-classe CSS qui correspond à l'élément racine de l'arborescence du document. Pour HTML, :root représente l'élément 100db36a723c770d327fc0aef2ce13b1, qui est identique au sélecteur HTML, sauf avec une priorité plus élevée. Nous écrivons donc généralement des attributs personnalisés dans :root{}, et les éléments de la balise html en hériteront.

• Les attributs personnalisés CSS peuvent être mis en cascade : chaque attribut personnalisé peut apparaître plusieurs fois et la valeur de la variable sera calculée à l'aide de l'algorithme en cascade et de la valeur de l'attribut personnalisé.

• Les variables CSS ne prennent pas en charge la déclaration !important, veuillez noter qu'il s'agit simplement d'une déclaration.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!