Testez vos compétences : La cascade
L'objectif de ce test de compétences est de vous aider à évaluer si vous comprenez les valeurs universelles des propriétés pour contrôler l'héritage en CSS.
Note : Pour obtenir de l'aide, consultez notre guide d'utilisation Testez vos compétences. Vous pouvez également nous contacter par l'un de nos canaux de communication.
La cascade n°1
Dans cette tâche, nous voulons que vous utilisiez l'une des valeurs spéciales que nous avons examinées dans la section contrôler l'héritage.
Pour compléter la tâche, écrivez une déclaration dans une nouvelle règle qui réinitialise la couleur de fond à blanc, sans utiliser une valeur de couleur réelle.
Le point de départ de la tâche ressemble à ceci :
Voici le code sous-jacent pour ce point de départ :
<div class="conteneur" id="exterieur">
<div class="conteneur" id="interieur">
<ul>
<li class="nav"><a href="#">Un</a></li>
<li class="nav"><a href="#">Deux</a></li>
</ul>
</div>
</div>
#exterieur div ul .nav a {
background-color: powderblue;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
div div li a {
color: rebeccapurple;
}
Le style mis à jour doit ressembler à ceci :
Cliquez ici pour afficher la solution
Une solution possible est la suivante :
#exterieur #interieur a {
background-color: inherit;
}
Il y a deux choses à faire dans cette tâche. Tout d'abord, écrivez un sélecteur pour l'élément a qui est plus spécifique que le sélecteur utilisé pour rendre le fond bleu poudre. Dans cette solution, c'est réalisé en utilisant le sélecteur id, qui a une spécificité très élevée.
Ensuite, vous devez vous rappeler qu'il existe des valeurs de mot-clé spéciales pour toutes les propriétés. Dans ce cas, l'utilisation de inherit rétablit la couleur de fond pour qu'elle soit la même que celle de son élément parent.
La cascade n°2
Pour compléter cette tâche, manipulez l'ordre des couches de la cascade pour colorer les liens en rebeccapurple. Ne modifiez pas la déclaration lightgreen !
Cette tâche est un objectif ambitieux — elle nécessite une connaissance des couches de la cascade, que nous n'avons pas abordée dans l'article Gérer les conflits. Vous pouvez trouver les informations nécessaires pour tenter cette tâche dans Couches de la cascade > Déterminer la priorité en fonction de l'ordre des couches.
Le point de départ de la tâche ressemble à ceci :
Voici le code sous-jacent pour ce point de départ :
<div class="conteneur" id="exterieur">
<div class="conteneur" id="interieur">
<ul>
<li class="nav"><a href="#">Un</a></li>
<li class="nav"><a href="#">Deux</a></li>
</ul>
</div>
</div>
@layer yellow, purple, green;
@layer yellow {
#exterieur div ul .nav a {
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
}
@layer purple {
div div li a {
color: rebeccapurple;
}
}
@layer green {
a {
color: lightgreen;
}
}
Le style mis à jour doit ressembler à ceci :
Cliquez ici pour afficher la solution
Une solution possible est la suivante :
@layer yellow, green, purple;
Il y a une chose que vous devez faire dans cette tâche : changer l'ordre de priorité afin que la déclaration pour la couleur souhaitée se trouve dans la dernière couche déclarée, ce que montre cette solution.
Vous devez vous rappeler que les styles normaux non organisés en couches ont la priorité sur les styles normaux organisés en couches. Mais, si tous les styles sont dans des couches — comme dans le cas de cette tâche — les styles dans les couches déclarées plus tard ont la priorité sur les styles déclarés dans les couches plus anciennes. Déplacer la couche violette à la fin signifie qu'elle a la priorité sur les couches verte et jaune.