À propos de l'utilisation du mot-clé currentColor en CSS3-tutoriel CSS-php.cn

À propos de l'utilisation du mot-clé currentColor en CSS3

不言

Libérer： 2018-06-20 17:40:25

original

1691 Les gens l'ont consulté

Cet article présente principalement la merveilleuse utilisation du mot-clé currentColor dans CSS3. Une utilisation appropriée de currentColor rend souvent le code CSS plus concis et peut également être bien utilisé avec les icônes SVG. Les amis dans le besoin peuvent s'y référer

Première connaissance

Qu'est-ce que c'est ? Quel effet cela a-t-il ? D'où ça vient ? Avec ces questions, nous continuons.

Ce qui suit est une explication de MDN :

currentColor représente la valeur de couleur appliquée à l'élément actuel. Utilisez-le pour appliquer la valeur de couleur actuelle à d'autres attributs ou à d'autres attributs d'éléments imbriqués.

Vous pouvez comprendre cela. En CSS, vous pouvez utiliser la variable currentColor partout où vous avez besoin d'écrire une couleur. La valeur de cette variable est la valeur de couleur de l'élément actuel. Si l'élément actuel ne spécifie pas explicitement une valeur de couleur en CSS, sa valeur de couleur suit les règles CSS et est héritée de l'élément parent.

Cela semble avoir résolu les trois questions philosophiques ci-dessus, mais c'est encore un peu vague. La communication entre programmeurs se fait mieux via le codage.

Scénario 1

<p>约么？</p>   
p{   
    color: red;   
}

Copier après la connexion

À l'heure actuelle, la valeur de l'étiquette

Scénario 2

<p class="container">   
    <p>约么？</p>   
</p>   
.container{   
    color: #00ff00;   
}

Copier après la connexion

Maintenant, nous ne spécifions pas de couleur pour la balise

avec conteneur de classe Inherited, en d'autres termes, la couleur de la balise p est #00ff00 et currentColor prend directement la valeur de couleur de l'élément, donc la valeur currentColor de la balise p est également #00ff00.

2016227111701365.jpg (430×378)

Scénario 3
Et si l'élément parent n'écrit pas de couleur ? En fait, cela relève toujours des règles CSS et n’a pas grand-chose à voir avec le protagoniste de cet article. Mais partant du principe que si tu ne parles pas trop, tu vas mourir, j’ai commencé à parler.

Si l'élément parent ne spécifie pas de couleur, son élément parent héritera du parent du parent. Jusqu'à ce que la balise html du nœud racine du document n'ait pas encore spécifié de couleur, appliquez alors la couleur par défaut du navigateur. ~

<!doctype html>
<html>
    <head>
        <title>我来组成头部</title>
    </head>
    <body>
        <p>约么？</p>
    </body>
    <footer>战神金钢，宇宙的保护神！</footer>
</html>
/**   
 * 无CSS   
 */

Copier après la connexion

2016227111740673.jpg (759×247)

Ensuite, la couleur noire à ce moment est en fait la couleur par défaut donnée par le navigateur. À ce stade, la valeur currentColor de la balise p est naturellement la même que la valeur de couleur, qui est le noir, le noir pur #000.

Comment utiliser ?

Après avoir compris de quel type d'objet il s'agit, la question suivante se pose, comment l'utiliser ? Y a-t-il un effet de buff supplémentaire, combien de mana est consommé et quelle est la durée du CD ? . .

Comme mentionné précédemment, il s'agit d'une variable CSS qui stocke la valeur de couleur. Cette valeur provient de l'attribut colorCSS de l'élément actuel. Il entre en scène lorsque vous devez spécifier des couleurs pour d'autres propriétés de l'élément.

<p class="container">   
    好好说话，有话好好说   
</p>   
.container{   
    color: #3CAADB;   
    border: 4px solid currentColor;   
}

Copier après la connexion

2016227111807718.png (1063×50)

Ici, nous expérimentons pour la première fois l'effet miraculeux de currentColor. Lors de la spécification de la couleur de la bordure, nous utilisons directement la variable currentColor au lieu d'écrire une valeur de couleur traditionnelle.

Vous semblez savoir comment vous en servir. Pas seulement les bordures, mais d'autres endroits où les couleurs peuvent être utilisées, comme l'arrière-plan, l'ombre de la boîte, etc.

Mélanger et assortir avec des dégradés

Ce que vous n'imaginez peut-être pas, c'est qu'en plus d'utiliser currentColor dans des scènes nécessitant de la couleur, il peut également être utilisé dans des dégradés.

<p class="container">   
</p>   
.container{   
  height:200px;   
  color: #3CAADB;   
  background-image: linear-gradient(to rightright, #fff, currentColor 100%);   
}

Copier après la connexion

2016227111918197.png (1023×188)

peut même être utilisé pour remplir du svg, comme indiqué ci-dessous.

currentColor et SVG

Nous pouvons utiliser currentColor pour détecter la couleur actuelle utilisée par un élément, il n'est donc pas nécessaire de définir la couleur plusieurs fois.

currentColor est utile lorsqu'il est utilisé avec des icônes SVG, car les icônes changent de couleur en fonction de leur élément parent. Habituellement, nous faisons ceci :

.button {   
  color: black;   
}   
.button:hover {   
  color: red;   
}   
.button:active {   
  color: green;   
}   
.button svg {   
  fill: black;   
}   
.button:hover svg {   
  fill: red;   
}   
.button:active svg {   
  fill: green;   
}

Copier après la connexion

Après avoir utilisé currentColor :

svg {     
  fill: currentColor;   
}   
.button {   
  color: black;   
  border: 1px solid currentColor;   
}   
.button:hover {   
  color: red;   
}   
.button:active {   
  color: green;   
}

Copier après la connexion

Une autre façon consiste à utiliser des pseudo-éléments :

a {     
  color: #000;   
}   
a:hover {     
  color: #333;   
}   
a:active {     
  color: #666;   
}   
a:after,     
a:hover:after,     
a:active:after {     
  background: currentColor;   
  ...   
}

Copier après la connexion

Ce qui précède est l'intégralité Nous espérons que le contenu de cet article sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois !

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!