Maison  >  Article  >  interface Web  >  Explication détaillée de la cascade CSS, de l'héritage et des exemples spécifiques

Explication détaillée de la cascade CSS, de l'héritage et des exemples spécifiques

零下一度
零下一度original
2017-06-24 13:40:263711parcourir

En cascade

La soi-disant cascade fait référence à la superposition de plusieurs styles CSS, ce qui signifie que les styles définis ultérieurement mettront en cascade (couvriront) les styles précédents Le principe de la cascade est la sélection. de CSS Par exemple, lorsque vous utilisez la feuille de style CSS en ligne pour définir la taille de police de la balise

sur 12 pixels et la couleur de la balise liée

sur rouge, le texte du paragraphe sera affiché sous la forme 12. pixels rouges, les deux styles sont superposés.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5  6     <title>CSS层叠性</title> 7     <style> 8         .box { 9             background-color: red;10             height: 200px;11             width: 200px;12         }13 14         .wrap {15             background-color: green;16         }17     </style>18 </head>19 <body>20     <div class="box wrap">21         22     </div>23 </body>24 </html>

Le résultat affiché par le navigateur est un div d'une longueur et d'une largeur de 200 pixels et d'une couleur de fond verte La raison est que la couleur de fond définie dans la case est. remplacé par la couleur de fond définie dans wrap Remplacement

L'inspection des éléments via le F12 du navigateur peut également être vue

héritage

L'héritage CSS signifie que le style du conteneur enfant héritera du style du conteneur parent. Mais tous les styles ne peuvent pas être hérités. Seuls certains styles peuvent être hérités, tels que la taille de police liée au texte, la couleur, le style de police, la hauteur de ligne, le style de souris, etc.

Les styles liés aux boîtes ne peuvent pas être hérités, tels que la largeur et la hauteur, la couleur d'arrière-plan, les marges, le flottement, le positionnement absolu, etc.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>CSS继承性</title> 6  7     <style type="text/css"> 8         .parent { 9             color: red;10             font-size: 20px;11             height: 300px;12             width: 300px;13             background-color: green;14         }15 16         .child {17             height: 100px;18             width: 100px;19         }20     </style>21 22 </head>23 <body>24     <div class="parent">25         我是父div26         <p>27             我是段落28         </p>29 30         <div class="child">我是子div</div>31     </div>32 </body>33 </html>

L'effet est le suivant :

Vous pouvez voir que la balise p et l'enfant div hérite de la police de la couleur et de la taille du div parent, mais le div enfant n'hérite pas de la largeur, de la hauteur et de la couleur d'arrière-plan du div parent. Les styles hérités de

. sont affichés en lignes pleines et les autres styles sont flous.

Remarque : une utilisation appropriée de l'héritage peut simplifier le code et réduire la complexité des styles CSS. Cependant, si tous les éléments d'une page Web héritent d'un grand nombre de styles, il sera difficile de déterminer la source du style. Par conséquent, l'héritage peut être utilisé pour les styles courants dans les pages Web, tels que les polices et les attributs de texte. Par exemple, la police, la taille de la police, la couleur, l'espacement des lignes, etc. peuvent être définis uniformément dans l'élément body, puis affecter tout le texte du document par héritage.

Spécialité (Priorité)

Lors de la définition des styles CSS, il arrive souvent que deux règles ou plus soient appliquées au même élément, et il y aura alors un problème de priorité. Quel style l’élément affiche-t-il à ce moment-là ?

Tout d'abord, donnons une conclusion prioritaire :

  • Style en ligne> Style de référence externe> 🎜>

  • important > en ligne > pseudo-classe | sélection d'attribut de classe > pseudo-objet > >

    Regardons un exemple. Par défaut, la couleur de la police est déterminée par les paramètres du navigateur

Lorsque nous donnons le corps après l'ajout. le style, la couleur de la police passe au rouge, indiquant que le style hérité > style par défaut du navigateur

Lorsque nous ajoutons le style générique, la couleur de la police change Pour que le gris

pour indiquer que le style générique est supérieur au style hérité, essayez à nouveau la priorité de style du sélecteur de balise

Les sélecteurs de balises visibles ont la priorité sur les styles génériques. D'autres types de styles peuvent être testés par vous-même !important peut modifier le poids du style

comme vous pouvez le voir. la couleur de la police affichée dans le titre h1 est bleue car l'attribut !important peut augmenter le poids du style. Voici une brève explication du poids du CSS. Chaque type de style en CSS a son propre poids

1. Le poids de la feuille de style en ligne est de 1000

2. Le poids du sélecteur d'ID est de 100

3. 4 , le poids du sélecteur de balise HTML est de 1

Parfois nous appliquons des règles de style différentes sur le même élément, comme




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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn