Quelle est la signification de "cascade" en CSS?
Quelle est la signification exacte du terme "cascade" en CSS? Je reçois des points de vue différents, alors je demande ici. Un exemple aiderait.
"Cascader" dans ce contexte signifie que, comme plusieurs règles de feuille de style peuvent s'appliquer à un élément HTML particulier, il doit exister un moyen connu de déterminer quelle règle de feuille de style spécifique s'applique à quel élément HTML.
La règle utilisée est choisie en passant des règles plus générales à la règle spécifique requise. La règle la plus spécifique est choisie.
Quand j'enseigne le CSS, je dis toujours aux élèves que "feuilles de style en cascade" signifie quelque chose comme " combat feuilles de style".
Une règle indique à votre balise H3 d'être rouge, une autre règle indique qu'elle est verte - les règles se contredisent, qui va gagner !? Stylesheet deathmatch!
OK, c’est peut-être un peu exagéré, mais il est beaucoup plus facile pour les non-programmeurs qui ne font pas de programmation qui débutent que pour la moindre notion de cascade ou de succession.
Bien sûr, je m'assure de leur dire que ce n'est pas un problème que les feuilles de style se battent, c'est la façon dont le langage a été conçu.
Håkon Wium Lie (co-créateur de CSS) définit "cascade" dans sa thèse de doctorat sur CSS comme "Le processus de combinaison de plusieurs feuilles de style et de résolution des conflits entre elles" https://www.wiumlie.no/ 2006/phd/
L'article suivant répond parfaitement à votre question.
C'est l'ordre dans lequel les propriétés sont appliquées sur un ou des éléments particuliers.
Vous devez y penser de l'extérieur. Si vous avez une règle qui se trouve sur la balise body, elle "cascade" à travers chaque balise enfant. Si vous mettez une règle sur une balise à l'intérieur du corps, elle adoptera cette règle, et ainsi de suite. Ainsi, la règle traverse tout le contenu sauf si elle est interrompue par une règle d'une balise incorporée.
Vous pouvez traiter le traitement CSS comme une cascade contenant plusieurs cascades. Voici ces cascades de haut en bas dans l'ordre: (Le plus bas peut remplacer la même propriété dans le plus haut.)
- déclarations de l'agent utilisateur
- déclarations normales de l'utilisateur
- déclarations normales de l'auteur
- auteur des déclarations importantes
- déclarations utilisateur importantes
Voir plus dans le spec
Le cascading consiste à choisir la bonne valeur parmi plusieurs origines. Mais c'est différent de sorting. Seulement quelque chose qui n'est pas en ordre doit être trié Mais en CSS, ces origines ont une priorité fixe. Et ainsi le pseudo-code pourrait ressembler à ceci:
- initialiser le tableau de valeurs;
- appliquer les valeurs de 1ère origine;
- applique les valeurs de 2st Origin, remplace si la valeur existe;
- ...
- appliquer les valeurs de Nième origine, remplacer si les valeurs existent;
D'après le pseudo-code, vous pouvez voir qu'il ressemble assez à une cascade de plusieurs cascades.
Une clarification qui peut aider. Si vous incluez deux feuilles de style et qu'il existe une règle avec la même spécificité dans chacune, la dernière incluse gagne. C'EST À DIRE. le dernier de la cascade a le plus d'influence.
(Il s'agit simplement d'une variante pour avoir les deux règles dans la même feuille - la dernière gagne si toutes les autres choses sont égales.)
Par exemple, étant donné
body {
background:blue;
}
body {
background:green;
}
alors le fond sera vert.
C'est un processus utilisé pour résoudre les conflits dans la spécification de la feuille de style.
C’est d’abord le processus de résolution de conflit effectué conformément à la priorité mentionnée dans CSS.
CSS est l'acronyme de Cascading Style Sheet. De par leur nature même, les styles plus bas, une feuille de style en cascade remplace les styles équivalents par le haut (sauf si les styles plus haut sont plus spécifiques). Nous pouvons donc définir des styles de base au début d'une feuille de style, applicables à toutes les versions de notre conception, puis remplacer les sections pertinentes par des requêtes multimédia plus loin dans le document.
La cascade signifie descendre par étapes ou en ajouter par étapes. Les feuilles de style contiennent des codes pour le style d'un élément HTML. Et la manière dont les codes sont écrits dans la feuille de style est à la cascade. Ou simplement, les codes consécutifs dans les calques pour chaque élément html d'une page html de la feuille de style constituent la feuille de style en cascade.
La cascade est un algorithme qui attribue un poids à chaque règle de style . Lorsque plusieurs règles s'appliquent, celle qui a le poids le plus élevé a la priorité.