- Ecrit en face: reportez-vous au tutoriel du professeur Bilibili Dark Horse programmeur rose
- Adresse: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
table des matières
Trois fonctionnalités majeures de CSS
Empilabilité CSS
- concept:
- La soi-disant empilabilité fait référence à la superposition de plusieurs styles CSS.
- C’est la capacité du navigateur à gérer les conflits. Si un attribut est défini sur le même élément via deux sélecteurs identiques, un attribut mettra en cascade l’autre à ce moment.
- en principe:
- Pour les conflits de style , le principe à suivre est le principe de proximité . Si le modèle est proche de la structure, exécutez ce modèle.
- Pas de conflits de styles, pas de cascade
- Cas:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red; font-size: 30px; } div { color: pink; } </style> </head> <body> <div> 长江后浪推前浪，前浪死在沙滩上。 </div> </body> </html>
Héritage CSS
- concept:
- Les balises enfants héritent de certains styles de la balise parent, tels que la couleur du texte et la taille de la police.
- Pour définir une propriété héritable, appliquez-la simplement à l'élément parent.
- La compréhension simple est: le fils hérite de l'héritage du père
- Remarque :
- Une bonne utilisation de l'héritage peut simplifier le code et réduire la complexité des styles CSS . Par exemple, de nombreux enfants ont besoin d'un certain style, vous pouvez en attribuer un au parent et ces enfants en hériteront.
- Les éléments enfants peuvent hériter du style de l'élément parent ( texte, police, ligne, ces éléments peuvent être hérités au début et l'attribut de couleur )
- Cas:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: yellow; } </style> </head> <body> <div> <p>博人</p> </div> </body> </html>
Priorité CSS (souligné)
- concept:
- Lors de la définition des styles CSS, deux règles ou plus sont souvent appliquées au même élément. À ce stade,
- Si les sélecteurs sont les mêmes, la cascade est effectuée
- Différents sélecteurs entraîneront des problèmes de priorité
Formule de calcul du poids
- Concernant les poids CSS, nous avons besoin d'un ensemble de formules de calcul pour calculer, c'est la spécificité CSS (spécificité)
Sélecteur d'étiquettes Formule de calcul du poids Hériter ou * 0,0,0,0 Chaque élément (sélecteur de balises) 0,0,0,1 Chaque classe, pseudo classe 0,0,1,0 Chaque ID 0,1,0,0 Chaque style de style en ligne = "" 1,0,0,0 Chaque! Important important ∞ infini
- La valeur est de gauche à droite, la plus grande à gauche, le premier niveau est supérieur au premier niveau, il n'y a pas de base entre les chiffres et les niveaux ne peuvent pas être dépassés.
- Concernant les poids CSS, nous avons besoin d'un ensemble de formules de calcul pour calculer, c'est la spécificité CSS (spécificité)
div { color: pink!important; }
- Cas: priorité CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*div { color: red; }*/ /*标签选择器 权重 0,0,0,1 小组长*/ div { color: pink!important; } /*类选择器 权重 0,0,1,0 班长*/ .one { color: blue; } /*id 选择器 权重 0,1,0,0 班主任*/ #two { color: green; } /*style= 行内样式表 权重 1,0,0,0 校长*/ /*!important 在样式属性的后面添加 权重最高 ∞ 教育局局长*/ </style> </head> <body> <div class="one" id="two" style="color: yellow;"> 权重还有30秒到达战场 </div> </body> </html>
Chevauchement de poids
- Nous utilisons souvent des sélecteurs d'intersection, des sélecteurs descendants, etc., qui sont composés de plusieurs sélecteurs de base, puis à ce moment, il y aura des poids qui se chevauchent.
- Est un simple calcul d'addition
- Remarque:
Il n'y a pas de base entre les chiffres, par exemple: 0,0,0,5 + 0,0,0,5 = 0,0,0,10 au lieu de 0,0, 1, 0, il n'y aura donc pas 10 div Peut rattraper un sélecteur de classe.
- Cas: chevauchement des droits
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*出现了权重叠加的现象 */ /*.nav a 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */ .nav a { color: red; } /*.first 权重 0,0,1,0*/ /*.first { color: pink; }*/ /*0020*/ .nav .first { color: pink; } /*0,0,0,5 + 0,0,0,5 = 0,0,0,10*/ </style> </head> <body> <div> 人生四大悲 </div> <div class="nav"> <a href="#" class="first">家里没宽带</a> <a href="#">网速不够快</a> <a href="#">手机没流量</a> <a href="#">学校无wifi</a> </div> </body> </html>
Le poids hérité est 0
- Ce n'est pas difficile, mais il est facile de se confondre en l'ignorant. En fait, lorsque l'on modifie le style, il faut voir si l'étiquette est sélectionnée .
- S'il est sélectionné, le poids est calculé selon la formule ci-dessus. Qui écoute qui .
- S'il n'est pas sélectionné, le poids est 0, car le poids hérité est 0
- Cas: le poids hérité est 0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red; } p { color: green; } /*因为demo 没有选p标签，所以 继承的权重为 0*/ .demo { color: blue; } #test { color: pink; } </style> </head> <body> <div class="demo" id="test"> <p>继承的权重为 0</p> </div> </body> </html>
