À propos des problèmes de priorité et d'héritage CSS

Problèmes de priorité CSS et d'héritage

★Conflit CSS, c'est-à-dire priorité
Le Les paramètres du CSS lui-même peuvent appliquer plusieurs styles au même élément en même temps. À ce stade, des conflits peuvent survenir entre les styles et l'effet souhaité par l'utilisateur ne peut pas être obtenu.
★Règles de priorité pour résoudre les conflits CSS :
● Priorité des méthodes d'introduction des feuilles de style en cascade CSS : en ligne > intégré >Importé
● Parmi plusieurs styles externes, le style qui apparaît plus tard a une priorité plus élevée que le style qui apparaît en premier, communément appelé remplacement
● Dans le style, la priorité du sélecteur : style d'ID > style de classe> style de marque (en utilisant la métaphore du poids : le poids de l'identifiant est de 100, le poids de la classe est de 10 et le poids du nom de l'étiquette est de 1)
● Ajoutez un !important après le style, par exemple : .abc { background:#fff !improtant;} La priorité de ce style sera élevée au niveau supérieur par défaut, et le style global ne pourra pas l'affecter.
✪Remarque : !important doit être écrit devant le point-virgule
Priorité :
Principe de proximité (plus le code est proche, plus la priorité est élevée)
Plus la plage de sélection est petite, plus la priorité est élevée. Affinez le CSS et enveloppez-le couche par couche en ajoutant plus de sélecteurs de l'élément parent pour restreindre la plage de sélection

★Héritage de style :
L'héritage fait référence à nos paramètres Le style CSS du niveau supérieur (parent), à la fois le niveau supérieur (parent) et les enfants suivants (subordonnés) ont cet attribut. Généralement, seul le texte a des propriétés héritées, telles que la taille du texte, la gras du texte, la couleur du texte, la police, etc. Mais notez que certains styles CSS ne sont pas hérités. Par exemple, border : 1px solid red ;

démo :

<p style="color:red;">如果你不知道自己<span>想做什么该做什么</span>，那你什么都做不好。</p>

Description : (1) Je définis la couleur du texte du supérieur (parent : p) en rouge, L'enfant (span) ne définit pas la couleur du texte, mais le texte a des propriétés d'héritage, donc le contenu du texte enfant est toujours rouge.
(2) Si après avoir défini le style de couleur du texte parent, ses multiples enfants seront les mêmes que ceux du parent en raison de l'héritage. Si la couleur de certains enfants ne veut pas être la même que celle du parent, alors vous n'en avez besoin que. pour définir la couleur requise pour l'enfant correspondant.
✪Remarque : Il existe un autre poids spécial : l'héritage a également un poids mais il est très faible. Certaines publications suggèrent qu'il n'est que de 0,1, on peut donc comprendre que l'héritage a le poids le plus faible.

Avantages de l'héritage : vous ne pouvez définir que les attributs de feuille de style CSS de niveau supérieur, et les enfants (subordonnés) n'ont pas besoin de les définir. Ils ont tous cet attribut CSS, ce qui peut réduire le CSS. coder et faciliter la maintenance.

★ Propriétés pouvant et ne pouvant pas être héritées en CSS
1. Propriétés sans héritage

1. display : Spécifie le type de boîte que l'élément doit générer

2. Attribut de texte :

vertical-align : Alignement vertical du texte

text- decoration : Spécifiez la décoration ajoutée au texte

text-shadow : Effet d'ombre du texte

white-space : Le traitement des caractères d'espacement

unicode-bidi : Définissez la direction du texte

3. Attributs du modèle de boîte : width, height, margin, margin-top, margin-right, margin-bottom, margin-left, border, border-style, border-top-style , style de bordure droite, style de bordure inférieure, style de bordure gauche, largeur de bordure, largeur de bordure supérieure, bordure droite-droite, largeur de bordure inférieure, largeur de bordure gauche, couleur de bordure , couleur de la bordure supérieure, couleur de la bordure droite, couleur de la bordure inférieure, couleur de la bordure gauche, bordure supérieure, bordure droite, bordure inférieure, bordure gauche, remplissage, remplissage supérieur, remplissage droit , padding-bottom, padding-left

4. Attributs d'arrière-plan : background, background-color, background-image, background-repeat, background-position, background-attachment

5. : float, clear, position, top, right, bottom, left, min-width, min-height, max-width, max-height, overflow, clip, z-index

6. Générer des attributs de contenu : contenu, contre-réinitialisation, contre-incrément

7. Attributs de style de contour : style de contour, largeur de contour, couleur de contour, contour

Attributs de style de page : taille, page-. break-before, page -break-after

9. Attributs de style sonore : pause-avant, pause-après, pause, repère-avant, repère-après, repère, lecture-pendant

2. Attributs hérités

1. Attribut de famille de police

police : police combinée

font-family : spécifie la police. famille de l'élément

font-weight : Définir le poids de la police

font-size : Définir la taille de la police

font-style : Définir le style de la police

font-variante : Définit la police en petites majuscules pour afficher le texte, ce qui signifie que toutes les lettres minuscules sont converties en majuscules, mais toutes les lettres en petites majuscules ont une taille de police plus petite par rapport au reste de le texte.

font-stretch : étire et transforme la famille de polices actuelle. Non pris en charge par tous les principaux navigateurs.

font-size-adjust : Spécifiez une valeur d'aspect pour un élément afin que la hauteur x de la police préférée soit conservée.

2. Attributs de la série de texte

text-indent : indentation du texte

text-align : alignement horizontal du texte

line-height : hauteur de la ligne

espacement des mots : augmenter ou diminuer l'espace entre les mots (c'est-à-dire l'espacement des mots)

espacement des lettres : augmenter ou diminuer l'espacement entre les caractères (espacement des caractères)

transformation de texte : Contrôler la casse du texte

direction : Spécifiez le sens d'écriture du texte

couleur : Couleur du texte

3. Visibilité de l'élément : visibilité

4. attributs : côté légende, effondrement de la bordure, espacement des bordures, cellules vides, mise en page du tableau

5. Attributs de mise en page de la liste : type de style de liste, image de style de liste, style de liste -position. , style de liste

6. Générer des attributs de contenu : guillemets

7. Attributs du curseur : curseur

8. Attributs de style de page : page, saut de page à l'intérieur, fenêtres. , orphelins

9. Attributs de style sonore : parler, parler-ponctuation, parler-numéral, parler-en-tête, débit de parole, volume, famille de voix, hauteur, plage de hauteur, accentuation, richesse, azimut. , élévation

3. Attributs pouvant être hérités par tous les éléments

Visibilité de l'élément : visibilité

2 , Attributs du curseur : curseur

4. Attributs pouvant être hérités par les éléments en ligne

1. Attributs de la famille de polices

2. , Attributs de série de texte autres que text-indent et text-align

5. Attributs dont les éléments de niveau bloc peuvent hériter

1. -indentation, alignement du texte

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!