Les variables peuvent-elles être définies en CSS ?

Les variables peuvent être définies en CSS. La syntaxe de définition des variables est "--Variable name", et les noms de variables définis en CSS sont sensibles à la casse ; vous pouvez utiliser la fonction var() pour lire les variables, la syntaxe est "var(--Variable name)", et vous pouvez également utiliser le deuxième paramètre de la fonction qui représente la valeur par défaut de la variable. Si la variable n'existe pas, cette valeur par défaut sera utilisée.

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

Les variables peuvent-elles être définies en CSS ?

Les variables peuvent être utilisées en CSS.

Lors de la déclaration d'une variable CSS, ajoutez deux tirets (--) devant le nom de la variable. Les noms de variables sont sensibles à la casse, --header-color et --Header-Color sont deux variables différentes. La fonction

var() est utilisée pour lire les variables. La fonction

var() peut également utiliser un deuxième paramètre pour représenter la valeur par défaut de la variable. Si la variable n'existe pas, cette valeur par défaut sera utilisée.

Le deuxième paramètre ne gère pas les virgules ou les espaces internes, ils sont considérés comme faisant partie du paramètre.

Exemple d'utilisation de variables en CSS :

    :root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

Le code ci-dessus définit 3 variables, :root les rend accessibles à tous

    img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);
 
    }

Ce ci-dessus utilise les variables précédemment définies comme valeurs d'attribut.

(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!