La fonction VAR dans CSS | Expliqué

La fonction VAR dans CSS | Expliqué
CSS est un langage de style qui se compose de nombreuses caractéristiques distinctives. Une telle caractéristique est qu'il permet à ses utilisateurs de déclarer des propriétés personnalisées qui sont également appelées variables CSS. Ces variables sont constituées de noms et de valeurs spécifiques, et une fois déclarés, ceux-ci peuvent être utilisés n'importe où dans le fichier. Pour utiliser ces variables, CSS fournit une fonction de la fonction Var () que nous allons discuter en détail dans cet article. Ce message comprend les sujets suivants.

1. fonction var ()

2. Avantages de la fonction var ()

La fonction var () dans CSS

Afin d'inclure une propriété personnalisée ou une variable CSS qui peut être utilisée ailleurs dans la feuille de style, la fonction var () est utilisée.

Syntaxe

var () = var (- nomproperty nom, valeur de propriété)

Paramètres expliqués

nom de la propriété: Spécifie le nom de la propriété personnalisée. C'est un paramètre requis.

Valeur de la propriété: Spécifie la valeur de la propriété personnalisée. C'est un paramètre facultatif.

Points à retenir!

1. Les règles CSS définissent que les variables CSS ont une portée locale ou globale. Une variable globale peut être utilisée n'importe où dans l'ensemble du document; En attendant, une variable locale ne peut être récupérée que par le sélecteur dans lequel il est défini.

2. Aux fins de la création d'une variable globale à l'aide de la fonction var (), elle doit être déclarée dans le: Sélecteur de racines

3. Pendant ce temps, une variable locale peut être créée à l'intérieur de n'importe quel sélecteur.

Exemple 1

Supposons que vous souhaitiez utiliser la fonction var () tout en déclarant les variables globales.

Html


C'est un paragraphe.


Dans l'extrait de code ci-dessus, nous avons simplement créé un conteneur div et imbriqué un

élément à l'intérieur de ce conteneur div.

CSS

:racine
--Pink: # FFC0CB;
--blanc: #ffffff;
--Brown: # 964B00;
--Bleu: # 0000FF;

corps
Color en arrière-plan: var (- rose);

div
Couleur: var (- bleu);
Color en arrière-plan: var (- blanc);
rembourrage: 15px;

p
Color en arrière-plan: var (- blanc);
Couleur: var (- bleu);
Border: 3px Var solide (- brun);
rembourrage: 40px;

Dans le code ci-dessus, nous avons défini certaines variables globales dans le: sélecteur de racines correspondant chacun à une couleur spécifique. Ensuite, nous utilisons ces variables globales dans l'ensemble du document si nécessaire en utilisant la fonction var (). L'avantage de fabriquer ces variables globales et de les utiliser dans la fonction var () est que dans ce cas particulier, vous n'avez pas besoin de définir des couleurs d'éléments encore et encore à la place utilisez simplement la fonction var ().

Sortir

La fonction var () fonctionne correctement.

Exemple 2

Comprenons davantage la fonction var () avec un autre exemple.

Html

Entrez votre nom:



Entrez votre contact:



Entrer votre Email: