Les variables peuvent-elles être utilisées en CSS ?

css peut utiliser des variables. En CSS, une variable est une entité définie par l'auteur CSS qui contient une valeur spécifique à réutiliser dans tout le document ; utilisez des propriétés personnalisées pour définir le nom de la variable et utilisez la fonction var() pour la lire.

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

Les variables CSS ont actuellement deux formes :

• Les variables ont des identifiants légaux et des valeurs légales. Peut être utilisé n'importe où. Les variables peuvent être utilisées à l'aide de la fonction var(). Par exemple : var(--example-variable) renverra la valeur correspondant à l'attribut personnalisé --example-variable

• . Ces propriétés utilisent le format spécial --*where* comme noms. Par exemple --example-variable: 20px; même une déclaration CSS. Cela signifie attribuer 20px à la variable --example-varibale.

Trois choses principales que vous devez savoir lorsque vous utilisez des variables CSS

• Attributs personnalisés

• var( ) fonction

• : pseudo-classe racine

1. Attributs personnalisés

Nous pouvons définir les attributs réutilisés en tant qu'attributs personnalisés, de sorte que lorsque nous devrons les modifier à l'avenir, nous n'aurons qu'à modifier les valeurs d'attribut​​dans les attributs personnalisés.

:root {
　　--textColor: #444;
}

Le code ci-dessus est personnalisé lors de l'écriture des attributs , il convient de noter que les attributs personnalisés commencent par --

3. Fonction var()

Nous devons utiliser la fonction var() pour lire la variable, sinon le navigateur ne saura pas quel est votre attribut personnalisé. La fonction

var() peut également spécifier un deuxième attribut, qui représente la valeur par défaut de l'attribut

p {
　　color: var(--textColor);
}

À définir. la couleur de police de la balise p, vous pouvez écrire

comme dans le code ci-dessus C'est la même chose que p { color: #444; }

3. pseudo-classe racine .

Avant de parler de la pseudo-classe racine, il faut d'abord parler de la portée des attributs personnalisés CSS

Le même attribut personnalisé CSS peut être déclaré dans plusieurs sélecteurs. Lors de la lecture, la priorité est donnée. L'attribut avec le niveau le plus élevé prend effet.

body {
　　--bgColor: red;
}
.content {
　　--textColor: blue;
}

Dans le code ci-dessus, la portée de -bgColor est body et la portée de --textColor est .content Pour cette raison, il est préférable de mettre le. attribut personnalisé sur l'élément racine : root À l'intérieur, cela garantit que n'importe quel sélecteur peut les lire

(Partage vidéo 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!