Explication détaillée de l'héritage, de la particularité, de la cascade et de l'importance en CSS

1. Héritage

Certains styles de CSS sont hérités, alors qu'est-ce que l'héritage ? L'héritage est une règle qui permet d'appliquer des styles non seulement à un élément de balise HTML spécifique, mais également à ses descendants. Par exemple, le code suivant : Si une certaine couleur est appliquée à la balise p, ce paramètre de couleur s'applique non seulement à la balise p, mais également à tout le texte des sous-éléments de la balise p, où le sous-élément est le span. étiqueter.

p{color:red;}   
<p>三年级时，我还是一个<span>胆小如鼠</span>的小男孩。</p>

En conséquence, le texte dans p et le texte dans span sont tous deux définis en rouge. Mais notez que certains styles CSS ne sont pas hérités. Par exemple, border:1px solid red;

p{border:1px solid red;}

Dans l'exemple ci-dessus, la fonction du code est simplement de définir la bordure sur 1 pixel, rouge, et bordure solide pour la balise p Mais pour l'élément enfant span, cela n'a aucun effet.

2. Particularité

Parfois, nous définissons différents codes de style CSS pour le même élément, alors lequel sera activé pour l'élément Quoi ? à propos des styles CSS ? Jetons un coup d'œil au code suivant :

p{color:red;}   
.first{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小男孩。</p>

p et .first correspondent tous deux à la balise p, alors quelle couleur sera affichée ? le vert est la bonne couleur, alors pourquoi ? En effet, le navigateur détermine quel style CSS utiliser en fonction du poids, et celui avec le poids le plus élevé utilisera quel style CSS.

Voici les règles de poids :

Le poids de l'étiquette est de 1, le poids du sélecteur de classe est de 10, et le poids du sélecteur ID est de 10. La valeur de poids maximale est de 100. Par exemple, le code suivant :

p{color:red;} /*权值为1*/   
p span{color:green;} /*权值为1+1=2*/   
.warning{color:white;} /*权值为10*/   
p span.warning{color:purple;} /*权值为1+1+10=12*/   
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

Remarque : Il existe également un poids spécial - l'héritage a également un poids mais il est très faible. Certaines publications le proposent. n'est que de 0,1, on peut donc comprendre que le poids hérité est le plus bas.

3. Cascade

Pensons à un problème : s'il peut y avoir plusieurs styles CSS pour le même élément dans un fichier html Et quoi dois-je faire si ces plusieurs styles CSS ont la même valeur de poids ? Eh bien, la mise en cascade dans cette section vous aide à résoudre ce problème.

La cascade signifie qu'il peut y avoir plusieurs styles CSS pour le même élément dans le fichier HTML. Lorsqu'il y a des styles avec le même poids, cela sera déterminé en fonction de l'ordre de ces styles CSS. la fin sera appliquée.

Comme indiqué dans le code suivant :

p{color:red;}   
p{color:green;}

Enfin, le texte en p sera mis en vert. Cette cascade est facile à comprendre. que les styles ultérieurs écraseront les styles précédents.

La priorité de style CSS précédente n'est donc pas difficile à comprendre :

Feuille de style en ligne (à l'intérieur de la balise) > Feuille de style intégrée (dans le fichier actuel) > déposer).

4. Importance

Lorsque nous créons du code de page Web, il existe des situations particulières dans lesquelles nous devons définir le poids le plus élevé pour certains. styles, que faire ? À ce stade, nous pouvons utiliser !important pour le résoudre.

Le code suivant :

p{color:red!important;}   
p{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小男孩。</p>

À ce moment, le texte du paragraphe p sera affiché en rouge.

Remarque : !important doit être écrit devant le point-virgule

Notez ici que lorsque le créateur de la page Web ne définit pas le style CSS, le navigateur affichera la page Web selon son propre style. ensemble de styles. Et les utilisateurs peuvent également définir leurs propres styles personnalisés dans le navigateur. Par exemple, certains utilisateurs ont l'habitude de définir une taille de police plus grande afin de pouvoir afficher plus clairement le texte de la page Web. Pour le moment, veuillez noter que la priorité du style est : style par défaut du navigateur < style du créateur de page Web < l'utilisateur.

L'article ci-dessus traite brièvement de l'héritage, de la particularité, de la cascade et de l'importance en CSS. C'est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde prendra en charge PHP chinois. . filet.

Pour des explications plus détaillées sur l'héritage, la particularité, la cascade et l'importance en CSS, veuillez faire attention au site Web PHP chinois !