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

WBOY
Libérer: 2022-06-06 16:57:42
original
2031 Les gens l'ont consulté

La variable var peut être utilisée en CSS ; vous pouvez utiliser la fonction var() pour insérer la valeur de la variable CSS. La variable CSS peut accéder au DOM, et vous pouvez également utiliser cette fonction pour lire la variable. est "var (nom de la variable, valeur)", La valeur du deuxième paramètre peut être utilisée pour représenter la valeur par défaut de la variable.

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

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

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

La fonction var() est utilisée pour insérer des valeurs d'attribut personnalisées. Cette méthode est utile si une valeur d'attribut est utilisée à plusieurs endroits. 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. La syntaxe de la fonction

var() est la suivante :

var(name, value)
Copier après la connexion

name requis. Nom de la variable (commençant par deux tirets).

valeur facultative. Valeur de repli (utilisée si la variable n'est pas trouvée).

Comment fonctionne var()

Premièrement : les variables CSS peuvent avoir une portée globale ou locale.

Les variables globales sont accessibles/utilisées dans tout le document, tandis que les variables locales ne peuvent être utilisées qu'à l'intérieur du sélecteur où elles sont déclarées.

Pour créer une variable à portée globale, déclarez-la dans le sélecteur :root. Le sélecteur :root correspond à l'élément racine du document.

Pour créer une variable à portée locale, déclarez-la dans le sélecteur où elle sera utilisée.

L'exemple suivant est le même que l'exemple ci-dessus, mais ici nous utilisons la fonction var().

Tout d'abord, nous déclarons deux variables globales (--blue et --white). Nous utilisons ensuite la fonction var() pour insérer ultérieurement la valeur de la variable dans la feuille de style :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>
<h1>使用 var() 函数</h1>
<div class="container">
  <h2>Welcome to Shanghai!</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People&#39;s Republic of China.</p>
  <p>Shanghai is one of the four direct-administered municipalities of the People&#39;s Republic of China.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>
</body>
</html>
Copier après la connexion

Résultat de sortie :

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

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

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!