interface Web
tutoriel CSS
Que sont les variables CSS ? En savoir plus sur les variables CSS : héritage et portée des variables CSS
Que sont les variables CSS ? En savoir plus sur les variables CSS : héritage et portée des variables CSS
Ce que les variables CSS peuvent nous aider à faire
Dans certains langages de programmation impératifs, comme Java, C++ ou JavaScript, nous pouvons suivre certains états grâce à des variables. Une variable est un symbole associé à une valeur spécifique et la valeur de la variable peut changer avec le temps.
Dans un langage déclaratif comme CSS, les valeurs qui changent dans le temps n'existent pas, et il n'y a pas de notion de variables.
CSS introduit le concept de variables hiérarchiques pour répondre aux défis de maintenabilité. Cela permettra à une variable d'être référencée symboliquement dans l'ensemble de l'arborescence CSS
1. Qu'est-ce qu'une variable CSS
Les variables CSS ont actuellement deux formes :
variable, c'est-à-dire , ayant 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
2. Déclaration des variables
Nommage des variables
La déclaration des variables utilise deux lignes de conjonction - pour représenter les variables, $ color est une syntaxe qui appartient à Sass, et @color est une syntaxe qui appartient à Less. Pour éviter les conflits avec les variables natives CSS, utilisez --)
Remarque : les noms de variables sont sensibles à la casse, --header-color. et --Header-Color sont deux variables différentes
méthodes de déclaration
La façon de déclarer les variables CSS est très simple Comme suit, une variable CSS nommée color est déclarée.
Écrivez dans le fichier CSS
Écrivez dans le style en ligne de la balise html
Utilisez JS pour déclarer un élément à l'aide de la méthode .style.setProperty
body{
--color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')Type de valeur de variable
Si la valeur de la variable est une chaîne, elle peut être combiné avec d'autres caractères Concaténation de chaînes
--bar: 'hello';
--foo: var(--bar)' world';
body:after {
content: '--screen-category : 'var(--screen-category);
}Si la valeur de la variable est une valeur numérique, elle ne peut pas être utilisée directement avec l'unité numérique. Vous devez utiliser la fonction calc() pour les connecter
<🎜. >.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}class="one">
<p class="two">
<p class="three">
</p>
<p class="four">
</p>
<p>
</p>.two { --test: 10px; }
.three { --test: 2em; }- class="two" nœud correspondant : 10px
- class="trois" nœud correspondant : élément : 2em
- class="four" nœud correspondant : 10px (hérité de son parent)
- class="one" Nœud correspondant : valeur invalide, c'est-à-dire que cette valeur d'attribut est la valeur par défaut qui n'a pas été remplacée par des variables CSS personnalisées
p {
--color: #7F583F;
--bg: #F7EFD2;
}
.mediabox {
color: var(--color);
background: var(--bg);
}
@media screen and (min-width: 768px) {
body {
--color: #F7EFD2;
--bg: #7F583F;
}
}$color:#7F583F;
@media screen and (min-width: 768px) {
$color: #F7EFD2;
}
.mediabox {
background: $color;
}.mediabox {
background: #7F583F;
}$zcolor:blue;
.ulbox {
$zcolor:red;
}
ul{
color: $zcolor;
}ul {
color: blue;
}:root{
--testMargin:70px;
}
// 读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '70px'
// 写入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2); // '100px'
// 删除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '70px'.
Méthode pour détecter si le navigateur prend en charge les attributs personnalisés CSS/*css*/
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
// Js
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
alert('CSS properties are supported');
} else {
alert('CSS properties are NOT supported');
}
- Les variables CSS sont dynamiques et peuvent être modifiées pendant l'exécution de la page, tandis que les variables du préprocesseur traditionnelles ne peuvent pas être modifiées après la compilation
- Les variables CSS peuvent être héritées, utilisés en combinaison et ont une portée
- Utilisés avec Javascript, ils peuvent être facilement lus/écrits à partir de JS
Apprentissage PHP--variables variables,--variables variables
Journal d'apprentissage PHP - portée des variables, variables
Vidéos associées :Tutoriels vidéo CSS et CSS3 de la Geek Academy
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
