Analyse des variables CSS variable-tutoriel CSS-php.cn

Analyse des variables CSS variable

不言

Libérer： 2018-06-12 15:25:26

original

1898 Les gens l'ont consulté

Cet article présente principalement l'analyse des variables CSS.Il a une certaine valeur de référence.Maintenant, je le partage avec tout le monde.Les amis dans le besoin peuvent s'y référer

Les mots précédents

Depuis. ensuite, il n'y a pas de variables en CSS. Pour utiliser des variables CSS, vous ne pouvez utiliser que des précompilateurs tels que SASS ou LESS. Avec la sortie de la nouvelle version, définir et utiliser des variables directement en CSS n'est plus un fantasme. Cet article présentera en détail l'utilisation de base des variables CSS

Les variables CSS sont des entités définies par les auteurs CSS qui contiennent des valeurs spécifiques à réutiliser dans tout le document. Utilisez des attributs personnalisés pour définir des noms de variables et utilisez un var() spécifique pour accéder à

Compatibilité : les navigateurs mobiles et IE ne sont pas compatibles

【Déclarer les variables】

Les variables doivent démarrer avec --. Par exemple, --example-variable: 20px signifie attribuer 20px à la variable --example-varibale

Vous pouvez placer l'instruction déclarant la variable dans n'importe quel élément. peut le définir sur : root, body ou html

:root{
  --bgColor:#000;
}

Copier après la connexion

La déclaration de variable est comme l'instruction de déclaration de style ordinaire. Vous pouvez également utiliser le style en ligne

<body style="--bgColor:#000">

Copier après la connexion

La déclaration de variable. L'instruction doit être contenue dans un élément. Vous ne pouvez pas les placer arbitrairement

//错误
<style>
--bgColor:#000;
</style>

Copier après la connexion

【Utiliser des variables】

Utilisez la fonction var() pour utiliser des variables, et elles peuvent être utilisées n'importe où. Par exemple : var(--example-variable) renverra la valeur correspondant à --example-variable

<body style="--bgColor:#000;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    </body>

Copier après la connexion

La fonction var() a également un paramètre facultatif, qui est utilisé pour définir la valeur par défaut . Lorsque la variable ne peut pas Lors de l'obtention de la valeur, utilisez la valeur par défaut

<body>
    <p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>    </body>

Copier après la connexion

Héritage et cascade

Comme les attributs de style ordinaires, les attributs de variable prennent également en charge l'héritage et la cascade. Dans l'exemple ci-dessous, la valeur variable de l'élément body est verte et la valeur variable de l'élément p est rouge selon le principe de cascade, la couleur d'arrière-plan finale de l'élément p est rouge

<body style="--bgColor:green;">
    <p style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></p>    </body>

Copier après la connexion

< ; 🎜>Combinaison et calcul

【Combinaison】

Les variables CSS peuvent être utilisées en combinaison

<style>.box{
    --top:20%;
    --left:30%;
    width: 100px;
    height: 100px;
    background-image: url(img/24/xiaoshu.jpg);
    background-position: var(--left)  var(--top);}</style><p class="box"></p>

Copier après la connexion

Cependant, les variables CSS ne peuvent pas être combinées sous les formes suivantes, var( --color1)var(--color2) n'est pas reconnu par le navigateur, s'il est séparé, comme var(--color1) var(--color2), il sera analysé comme #333, qui ne peut pas non plus être reconnu par le navigateur

<style>.box{
    --color1:#;
    --color2:333;
    width: 100px;
    height: 100px;
    background-color: var(--color1)var(--color2);}</style><p class="box"></p>

Copier après la connexion

[Calcul]

　Les variables sont les mêmes que les valeurs de style ordinaires En plus des combinaisons, vous pouvez également utiliser calc pour le calcul

<style>.box{
    --borderWidth:2px;
    width: 100px;
    height: 100px;
    background-color:lightblue;
    border-left: calc(var(--borderWidth) * 2) solid black;}</style><p class="box"></p>

Copier après la connexion

JS.

　Les variables CSS peuvent interagir avec JS. A noter que vous ne pouvez utiliser que les méthodes getPropertyValue() et setProperty(), mais pas l'attribut style

[attribut style]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style[&#39;--color&#39;]);    //undefined</script>

Copier après la connexion

[getPropertyValue()]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style.getPropertyValue(&#39;--color&#39;));//&#39;lightgreen&#39;</script>

Copier après la connexion

【setProperty()】

<style>#box{    
    --color:lightgreen;
    background-color: var(--color);
    width: 100px;
    height: 100px;
    display:inline-block;}</style><button id="btn" type="button">变浅蓝</button><p id="box"></p>    <script>var oBox = document.getElementById(&#39;box&#39;);var oBtn = document.getElementById(&#39;btn&#39;);
oBtn.onclick = function(){
    oBox.style.setProperty(&#39;--color&#39;,&#39;lightblue&#39;);
}</script>

Copier après la connexion

Non pris en charge

Une chose à noter est que les variables ne prennent pas en charge !important

.box{
    --color:red;
    width: 100px;
    height: 100px;
    background-color:--color !important;
}</style><p class="box"></p>

Copier après la connexion

La capture d'écran du navigateur est la suivante

Objectif

1. Maintenabilité

Maintenir un jeu de couleurs ou un jeu de tailles dans une page Web signifie que certains les styles apparaissent plusieurs fois dans les fichiers CSS et sont utilisés à plusieurs reprises. Lors de la modification d'un plan, qu'il s'agisse d'ajuster un certain style ou de modifier complètement l'ensemble du plan, cela deviendra un problème complexe, et une simple recherche et remplacement ne suffit pas. C'est là que les variables CSS s'avèrent utiles

<. 🎜> 2. Sémantique

:root{
  --mainColor:#fc0;
}
.p1{
  color:var(--mainColor);
}
.p2{
  color:var(--mainColor);
}

Copier après la connexion

Le deuxième avantage des variables est que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent lisibles et compréhensibles. main-text-color est plus facile à comprendre que #fc0 dans le document, surtout lorsque la même couleur apparaît dans différents fichiers

　3. Il est plus pratique d'implémenter @media media query

En général , les requêtes multimédias sont les suivantes

Cependant, si vous utilisez des variables, vous pouvez rationaliser le code

<style>.box{    
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    background-color: red}@media screen and (max-width:600px) {
    .box{
        width: 50px;
        height: 50px;
        padding: 10px;
        margin: 5px;        
    }}</style><p class="box"></p>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article, j'espère que ce sera le cas être utile à l'apprentissage de chacun Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

<style>.box{    
    --base-size:10px;
    width: calc(var(--base-size) * 10);
    height: calc(var(--base-size) * 10);
    padding: calc(var(--base-size) * 2);
    margin: calc(var(--base-size) * 1);
    background-color: red;}@media screen and (max-width:600px) {
    .box{
        --base-size:5px;    
    }}</style><p class="box"></p>

Copier après la connexion

Recommandations associées :

Analyse de l'attribut positon de CSS

Comment définir un espace réservé via 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!