Explication détaillée du mécanisme de cascade CSS

CSS (Cascading Style Sheet)

La cascade dans les feuilles de style en cascade signifie que les styles sont transmis d'un niveau à un autre dans la structure du document, et son rôle est de laisser le navigateur décider quoi utiliser dans plusieurs sources , pour appliquer des attributs de style à partir de quelle source pour une étiquette.

La cascade est une mécanique puissante. Comprendre les cascades peut vous aider à écrire du CSS de la manière la plus économique et la plus maintenable, et peut vous aider à créer l'apparence de document idéale que vous souhaitez.

Source des styles

Tout d'abord, il devrait y avoir une feuille de style de navigateur (feuille de style par défaut) cachée dans le navigateur, car chaque balise aura des styles sans rien écrire. Par exemple, le texte de la balise h1 apparaîtra en gras plus gros, le texte de la balise em apparaîtra en italique, etc., tout est ajouté automatiquement.

Deuxièmement, il y a la feuille de style utilisateur. Très rare, mais peut offrir une grande commodité. Par exemple, les utilisateurs malvoyants peuvent augmenter eux-mêmes la taille de base du texte (par exemple : body { font-size:200%}) ou forcer l'affichage du texte dans des couleurs lisibles les unes par rapport aux autres. Les fonctionnalités d'accessibilité de Windows peuvent ajouter des feuilles de style.

Enfin, il existe une feuille de style du concepteur. Il est écrit par des développeurs Web.

Ordre dans lequel les navigateurs traitent les sources de style :

Feuille de style du navigateur par défaut

Feuille de style utilisateur

Feuille de style du concepteur

Styles intégrés au concepteur

Styles en ligne du concepteur

Lorsque le navigateur recherche les styles aux positions correspondantes dans l'ordre ci-dessus, s'il rencontre la valeur d'attribut définie pour une certaine balise, il Les paramètres pour le correspondant l’étiquette sera mise à jour. Le navigateur définit le style de l'étiquette dans la feuille de style par défaut. Si le style est également défini pour l'étiquette ailleurs, le navigateur mettra à jour le paramètre avec la valeur définie par le document.

Ce sont les principes de base du fonctionnement de l'empilage.

Règles en cascade

Règle 1 : Trouver toutes les déclarations de bons attributs qui s'appliquent à chaque élément.

Règle 2 : Trier par ordre et importance. Le navigateur vérifie les cinq sources de style dans l'ordre et définit les attributs correspondants. Si une origine ultérieure définit à nouveau un attribut correspondant, le navigateur met à jour la valeur de l'attribut si nécessaire et répète le processus.

Règle 3 : Trier par pertinence. Dans les situations où il est difficile de porter un jugement (par exemple, deux règles correspondent à la même balise et proviennent de la même source de style), la pertinence peut déterminer le gagnant de la règle.

Exemple 1 : La feuille de style contient ces deux règles,

P {font-size:12px;}

p.largetext { font-size:16px }

Ensuite, le texte dans

Un peu de texte

apparaîtra sur 16 pixels de haut. Car cette dernière est plus ciblée.

P {font-size:12px;}

.largetext { font-size:16px;>

Les deux règles correspondent à la même balise, mais à cause de la classe The Le sélecteur est prioritaire, le texte affichera donc 16 pixels. La raison spécifique est la suivante : le ciblage numérique du sélecteur d'étiquettes est 1, tandis que le ciblage du sélecteur de classe est 1-0. Il y a un problème sur la façon de calculer le ciblage du sélecteur. Il y aura un système de notation simple pour chaque style. Le score est exprimé dans les trois valeurs suivantes :

A – B – C . La méthode de notation est la suivante :

1 S'il y a un ID dans le sélecteur, 1 doit être ajouté à A.

2. S'il y a une classe dans le sélecteur, 1 doit être ajouté à B.

3. S'il y a un nom d'élément (nom de tag) dans le sélecteur, 1 doit être ajouté à C.

4. Le résultat final est calculé sur la base du certificat à trois chiffres. (Le résultat n'est pas un véritable nombre à trois chiffres, mais dans la plupart des cas, il est plus facile de l'interpréter comme un nombre à trois chiffres. Par exemple, comparé à 0-1-12 et 0-2-1, ce dernier est Sexualité plus spécifique)

Regardez l'ensemble d'exemples suivant :

P 0 – 0 – 1 ciblé = 1 >

p#largetext 1 – 0 – 1 Targeted=101

body p#largetext 1 – 0 – 2 Targeted=102

body p#largetext ul.mylist 1 – 1 – 3 Targeted=113

body p#largetext mylist ul. 1 – 1 – 4 Targeted=114

Règle 4 : Trier dans l'ordre. Si deux règles ont exactement le même poids, la règle la plus basse dans l’ordre d’empilement est prioritaire.

La spécificité est plus importante que l'ordre, donc les règles avec une spécificité plus élevée ont priorité sur les règles moins spécifiques qui sont plus proches du bas de la cascade.

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!