Quelle est la signification de «en cascade» dans CSS?

Quelle est la signification exacte du terme "Cascading" dans CSS? J'obtiens des points de vue différents, alors je demande ici. Un exemple aiderait.

«En cascade» dans ce contexte signifie que parce que plus d'une déclaration de feuille de style peut s'appliquer à un morceau particulier de HTML, il doit y avoir un moyen connu de déterminer quelle règle de feuille de style spécifique s'applique à quel morceau de HTML.

La règle utilisée est choisie en descendant des déclarations plus générales à la règle spécifique requise. La déclaration la plus spécifique est choisie.

Quand j'enseigne le CSS, je dis toujours aux étudiants que «feuilles de style en cascade» signifie quelque chose comme « feuilles de style de combat ».

Une règle dit que votre balise H3 est rouge, une autre règle dit qu'elle est verte - les règles se contredisent, qui gagnera !? Match à mort de feuille de style!

OK, c'est peut-être une légère exagération, mais c'est beaucoup plus accessible aux personnes qui ne sont pas du code, qui ne programment pas et qui commencent tout juste que toute notion de cascade ou d'héritage.

Je m'assure bien sûr de leur dire que ce n'est pas un problème pour les feuilles de style de se battre, c'est ainsi que le langage a été conçu.

Håkon Wium Lie (co-créateur 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 à un ou plusieurs éléments particuliers.

http://www.blooberry.com/indexdot/css/topics/cascade.htm

Vous devez y penser de l'extérieur vers l'intérieur. Si vous avez une règle selon laquelle cela figure 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 passe en cascade dans 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 bas peut remplacer la même propriété dans le supérieur.)

1. déclarations d'agent utilisateur
2. déclarations normales de l'utilisateur
3. auteur des déclarations normales
4. auteur de déclarations importantes
5. déclarations importantes de l'utilisateur

En savoir plus dans les spécifications

La cascade consiste à choisir la bonne valeur à partir de plusieurs origines. Mais c'est différent du tri . Seul quelque chose qui n'est pas en ordre doit être trié. Mais en CSS, ces origines ont une priorité fixe. Et donc le pseudo-code pourrait ressembler à ce qui suit:

1. initialiser le tableau de valeurs;
2. appliquer les valeurs de la 1ère origine;
3. appliquer les valeurs de la 2ème origine, remplacer si la valeur existe;
4. ...
5. appliquer les valeurs à partir de la Nième origine, remplacer si les valeurs existent;

D'après le pseudo-code, vous pouvez voir que cela ressemble à une cascade de plusieurs cascades.

Une clarification qui peut aider. Si vous incluez deux feuilles de style et qu'il y a une règle avec la même spécificité dans chacune, celle qui inclut la dernière gagne. IE le dernier de la cascade a le plus d'influence.

(Ceci est juste une variante d'avoir les deux règles dans la même feuille - la dernière gagne si toutes les autres choses sont égales.)

Par exemple, donné

body {
    background:blue;
}

body {
    background:green;
}

alors le fond sera vert.

Cette réponse est pour les débutants absolus. Si vous voulez un aperçu de cette réponse, veuillez lire ma deuxième réponse.

La cascade est le processus de combinaison de différentes feuilles de style et de résolution de conflits entre différentes règles et déclarations CSS lorsque plusieurs règles s'appliquent à un certain élément . Parce que comme vous le savez probablement déjà, une déclaration pour une certaine propriété de style telle que la taille de la police peut apparaître dans plusieurs feuilles de style et également plusieurs fois dans une seule feuille de style.

Pour comprendre la cascade, vous devez commencer par la phase d'analyse CSS car dans la phase d'analyse, la première étape consiste à résoudre les déclarations CSS conflictuelles et la deuxième étape consiste à traiter les valeurs CSS finales.

Désormais, le CSS peut également provenir de différentes sources. Le plus courant est le CSS que nous, les développeurs, écrivons. Ces déclarations que nous mettons dans nos feuilles de style sont appelées les déclarations d'auteur. Une autre source peut être les déclarations des utilisateurs, qui sont des CSS provenant de l'utilisateur. Par exemple, lorsque l'utilisateur modifie la taille de police par défaut dans le navigateur, il s'agit du CSS de l'utilisateur, et enfin, il y a les déclarations de navigateur par défaut.

Par exemple, si nous mettons une balise d'ancrage dans notre HTML pour un lien et que nous ne le stylisons pas du tout, il sera généralement rendu avec du texte bleu et souligné, à droite. C'est ce qu'on appelle le CSS de l'agent utilisateur car il est défini par le navigateur. La cascade combine donc les déclarations CSS provenant de toutes ces sources différentes, mais comment la cascade résout-elle réellement les conflits lorsque plus d'une règle s'applique?

Eh bien, ce qu'il fait, c'est regarder l'importance, la spécificité du sélecteur et l'ordre de source des déclarations contradictoires afin de déterminer laquelle a la priorité, et voici comment cela fonctionne. Tout d'abord, la cascade commence par donner les déclarations contradictoires d'importance différente en fonction de l'endroit où elles sont déclarées sur leur source. Les déclarations les plus importantes sont les déclarations d'utilisateur marquées du mot clé important.

Les deuxièmes déclarations les plus importantes sont les déclarations de l'auteur marquées d'importantes. Troisièmement, les déclarations normales de l'auteur, puis les déclarations normales des utilisateurs et enfin les moins importantes sont les déclarations par défaut du navigateur, ce qui est en fait très logique que nous puissions facilement écraser ces déclarations provenant par défaut du navigateur.

Maintenant, bien souvent, nous aurons juste un tas de règles contradictoires dans nos feuilles de style d'auteur sans aucun mot clé important. C'est en fait le scénario le plus courant et dans ce cas, toutes les déclarations ont exactement la même importance. Maintenant, que se passe-t-il dans ce cas? Ce que fait la cascade si tel est le cas est de calculer et de comparer les spécificités des sélecteurs de déclaration, et c'est ainsi que cela fonctionne.

Les styles en ligne ont la spécificité la plus élevée, suivis des ID, puis des classes, des pseudo-classes et des sélecteurs d'attributs, et enfin du sélecteur d'élément et de pseudo-élément le moins spécifique. Donc, lorsque nous avons des déclarations contradictoires avec la même importance que celle que nous avons vue dans la dernière diapositive, nous calculons leur spécificité de sélecteur en fonction des priorités que je viens de vous montrer, mais voyons comment nous calculons réellement les spécificités avec un petit exemple, c'est toujours mieux, non.

D'après l'exemple ci-dessus, toutes ces déclarations ont la même importance, car ce sont toutes des déclarations d'auteur. Calculons donc leurs spécificités de sélecteur afin de savoir si la couleur de fond sera soit bleu, vert, violet ou jaune, et c'est ainsi que nous le faisons. La spécificité n'est en fait pas qu'un seul chiffre, mais un chiffre pour chacune des quatre catégories que je vous ai montrées auparavant. Styles en ligne, ID, classes, pseudo-éléments et attributs, et enfin éléments et pour chacun d'entre eux, nous comptons le nombre d'occurrences dans le sélecteur.

Donc ici dans le sélecteur un, nous n'avons pas de styles en ligne bien sûr, car un style en ligne doit être écrit dans le HTML, ce qui n'est pas le cas ici, donc c'est un zéro. Nous n'avons pas non plus d'ID ici, donc c'est encore un zéro, mais nous avons une classe, la classe bouton. Donc pour la catégorie classes, nous en avons un, et enfin, il n'y a pas de sélecteur d'élément ici donc zéro pour celui-là également, et c'est tout. La spécificité du sélecteur est zéro, zéro, un, zéro.

Maintenant, comparons-le aux autres. Le suivant n'est pas non plus un style en ligne, donc zéro pour le premier. Maintenant, nous avons ici en fait un sélecteur d'ID pour l'ID de navigation, à droite, donc c'est un pour l'ID. Nous avons également deux classes tirant à droite et bouton, donc c'est un deux pour la catégorie classes, et enfin, il y a aussi deux sélecteurs d'éléments ici. L'élément nav et l'élément div, ce qui signifie qu'il est également deux pour la catégorie éléments. Donc finalement la spécificité du sélecteur est zéro, un, deux, deux, qui est en fait un sélecteur très spécifique.

Le sélecteur numéro trois est très simple. C'est juste un sélecteur d'élément et donc la spécificité est zéro, zéro, zéro, un.

Maintenant le dernier, le sélecteur numéro quatre. Tout d'abord, nous avons l'ID de navigation, donc c'est un pour l'ID. Ensuite, nous avons une classe, la classe bouton, et aussi une pseudo-classe, qui est survolée, ce qui en fait deux pour la catégorie classes au total. Puisqu'il y a aussi un sélecteur d'élément, la spécificité finale est zéro, un, deux, un.

Voyons maintenant comment utilisons-nous réellement ces nombres pour savoir lequel des sélecteurs s'applique. Nous commençons à regarder les nombres de gauche à droite en commençant par la catégorie la plus spécifique, les styles en ligne. S'il existe un sélecteur avec un pour les styles en ligne l'emporte sur tous les autres sélecteurs, car il s'agit de la catégorie la plus spécifique. Eh bien, ce n'est pas le cas ici, alors passons aux identifiants. Nous voyons que les sélecteurs deux et quatre en ont un ici tandis que les autres ont zéro, donc ceux avec zéro sont hors jeu car ils sont moins spécifiques que les sélecteurs deux et quatre ceux avec les ID.

Maintenant que les deux sélecteurs en ont un dans la catégorie ID, nous devons passer à autre chose et vérifier les classes. Ils ont tous les deux un deux dans cette catégorie, c'est toujours une égalité entre eux, et enfin, dans la catégorie des éléments, le sélecteur deux a un deux tandis que le sélecteur quatre n'en a qu'un et nous avons donc un gagnant ici. Le sélecteur numéro deux est le sélecteur le plus spécifique de tous et donc il donnera à notre bouton un arrière-plan vert.34 La valeur de la déclaration gagnante est appelée la valeur en cascade parce qu'elle est le résultat de la cascade.

Nous commençons donc avec un tas de valeurs déclarées dans ce cas bleu, vert, violet et jaune, l'une d'elles gagne et devient la valeur en cascade, qui est dans notre exemple verte.

Imaginez maintenant que le secteur quatre ait également deux éléments, alors les deux sélecteurs deux et quatre auraient exactement la même spécificité, à droite. Alors que se passe-t-il dans ce cas et je vous promets que c'est presque fini maintenant, d'accord. Eh bien, s'il y a encore une égalité à ce stade, la dernière déclaration CSS écrite dans le code est celle qui s'appliquera. Donc encore une fois si tout est égal, si tous les sélecteurs de déclarations ont la même spécificité alors c'est simplement la dernière déclaration qui sera utilisée pour styliser l'élément sélectionné.

C'est un processus utilisé pour résoudre les conflits dans la spécification des feuilles de style.

C'est principalement le processus de résolution de conflit effectué selon la mention de priorité dans CSS.

CSS signifie feuille de style en cascade. De par leur nature même, les styles plus bas une feuille de style en cascade remplacent les styles équivalents plus haut (à moins que les styles supérieurs ne soient 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édias plus loin dans le document.

La cascade signifie verser par étapes ou ajouter des étapes. Les feuilles de style contiennent des codes pour styliser un élément html. Et la manière dont les codes sont écrits dans la feuille de style est en cascade. Ou simplement, les codes dos à dos dans les couches pour chaque élément html d'une page html dans la feuille de style font 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 plus de poids prévaut.

Lorsqu'un ou plusieurs styles sont appliqués au même élément, le CSS exécute un ensemble de règles appelé cascade qui évalue la force de spécificité des deux styles appliqués et détermine le gagnant, c'est-à-dire la règle de style qui a le plus de poids l'emporte. même poids que la règle appliquée en dernier gagne.

Cascade et spécificité ce que vous devez savoir:

1. Les déclarations CSS marquées de! Important ont la priorité la plus élevée.

2. Mais n'utilisez! Important que comme dernière ressource. Il est préférable d'utiliser des spécificités correctes - un code plus maintenable!

3. Les styles en ligne auront toujours la priorité sur les styles des feuilles de style externes.

4. Un sélecteur qui contient 1 ID est plus spécifique qu'un sélecteur avec 1000 classes.

5. Un sélecteur qui contient 1 classe est plus spécifique qu'un sélecteur de 1000 éléments.

6. Le sélecteur universel * n'a pas de valeur de spécificité (0,0,0)

7. Misez davantage sur la spécificité que sur l'ordre des sélecteurs.

8. Mais comptez sur l'ordre lorsque vous utilisez des feuilles de style tierces - mettez toujours votre feuille de style d'auteur en dernier.

Lors du choix des styles CSS à appliquer à un élément HTML, la spécificité remplace la généralité selon un ensemble de règles en cascade qui règlent les conflits entre les styles:

1. Sans CSS, le HTML sera affiché selon les styles par défaut du navigateur.
2. Les sélecteurs de balises CSS (correspondant à la balise HTML) remplacent les valeurs par défaut du navigateur.
3. Les sélecteurs de classe CSS (avec.) Remplacent les références de balises.
4. Les sélecteurs d' ID CSS (avec #) remplacent les références de classe.
5. CSS en ligne codé dans un ID de remplacement de balise HTML, une classe et une balise CSS.
6. L'ajout de la valeur ! Important à un style CSS remplace tout le reste.
7. Si les sélecteurs CSS sont identiques, le navigateur combine leurs propriétés. Si les propriétés CSS résultantes sont en conflit, le navigateur choisit la valeur de propriété qui est apparue plus tard ou plus récemment dans le code.

Un sélecteur CSS qui correspond à une combinaison plus spécifique de balises, de classes et / ou d'identifiants sera prioritaire. Parmi les exemples suivants, le premier prévaudra sur le second, quel que soit leur ordre d'apparition dans le CSS:

ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }

CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

rendrait la police p à 14 pt car elle est "plus proche" de l'élément réel (les feuilles de style externes se chargent du haut du fichier au bas du fichier). Si vous utilisez une feuille de style liée et que vous incluez du CSS dans l'en-tête de votre document après avoir lié au document CSS externe, la déclaration "in head" gagnerait car elle est encore plus proche de l'élément défini. Ceci n'est vrai que pour les sélecteurs à pondération égale. Consultez http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html pour une bonne description du poids d'un sélecteur donné.

Cela dit, vous pouvez également considérer «l'héritage» comme faisant partie de la cascade - à toutes fins pratiques. Les choses "cascade" à partir d'éléments contenant.