recherche

Maison  >  Article  >  interface Web  >  Résumé complet des connaissances sur l'héritage des valeurs d'attribut en CSS

Résumé complet des connaissances sur l'héritage des valeurs d'attribut en CSS

小云云
小云云original
2017-12-12 09:31:591670parcourir

Cet article présente principalement l'héritage des valeurs d'attribut en CSS, présente les attributs qui peuvent et ne peuvent pas être hérités, et analyse également les limites de l'héritage et s'il peut être annulé, etc. Vous pouvez consulter l'explication détaillée ci-dessous pour les étapes spécifiques de l'opération. Si vous êtes intéressé, les amis peuvent s'y référer, j'espère que cela pourra aider tout le monde.

Héritage : les éléments HTML peuvent hériter de certains attributs CSS de leurs éléments parents, même si l'élément actuel ne définit pas cet attribut.

Attributs 1.css qui peuvent et ne peuvent pas être hérités

Non héritables : affichage, marge, bordure, remplissage, arrière-plan, hauteur, hauteur min, max- hauteur, largeur, largeur minimale, largeur maximale, débordement, position, gauche, droite, haut, bas, z-index, float, clear, disposition du tableau, alignement vertical, saut de page après, pain de page. avant et unicode-bidi.
Tous les éléments héritent : visibilité et curseur.
Les éléments en ligne peuvent hériter : espacement des lettres, espacement des mots, espace blanc, hauteur de ligne, couleur, police, famille de polices, taille de police, style de police, variante de police, poids de police, texte - décoration, transformation de texte, direction.
Les éléments du bornier peuvent hériter : text-indent et text-align.
Les éléments de liste peuvent hériter : style de liste, type de style de liste, position de style de liste, image de style de liste.
Les éléments du tableau peuvent hériter : border-collapse.

2. Héritage des valeurs

L'héritage est également basé sur l'arborescence du document. Certains attributs des éléments de l'arborescence du document peuvent être hérités par leur. éléments enfants. Chaque propriété CSS définit si elle peut être héritée. Pour définir certains attributs de style par défaut du document, vous pouvez définir cet attribut à la racine de l'arborescence du document. Si cet attribut peut être hérité, ses éléments descendants hériteront de cet attribut, tels que la couleur, la taille de la police et d'autres attributs.

3. Valeur "hériter"

Chaque attribut peut spécifier la valeur "hériter", c'est-à-dire : pour un élément donné, cet attribut et la valeur calculée de l'attribut relatif de l'élément parent prend la même valeur. Les valeurs héritées ne sont généralement utilisées que comme valeurs de secours, qui peuvent être améliorées en spécifiant explicitement « hériter », par exemple :

                    🎜> p { font-size: inherit; }

Bien que l'héritage réduise les problèmes liés aux définitions répétées, certaines les propriétés ne peuvent pas être héritées, telles que la bordure, la marge, le remplissage et l'arrière-plan.

Ce paramètre est logique. Par exemple, si une bordure est définie pour un

, si cet attribut est également hérité, alors tous les éléments de ce

résultat. De même, les propriétés qui affectent la position des éléments, telles que la marge et le remplissage, ne sont pas héritées. Dans le même temps, le style par défaut du navigateur affecte également les résultats de l'héritage. Par exemple :


Le texte du titre de niveau 2 ne fait pas 12px.

//

Le texte chinois H2 sera un texte de style Titre 2 au lieu d'un texte de taille 12px. body { font-size: 12px; }

En effet, le style par défaut du navigateur définit la règle CSS

.

Dans le même temps, certains navigateurs plus anciens peuvent ne pas bien prendre en charge l'héritage. Par exemple, certains navigateurs perdront tous les attributs hérités lorsqu'ils rencontreront

5. annulée ?

Une fois héritée, la propriété CSS ne peut pas être annulée et ne peut être que redéfinie.

6. Cas

Position de l'élément parent : relatif Élément enfant : position : absolue La largeur de l'élément parent est fixe et l'élément enfant héritera de la largeur de l'élément parent (pour la navigation secondaire, c'est très important. Lorsque la largeur de la barre de navigation masquée n'est pas fixe, ou que la largeur est plus grande que l'élément parent, la largeur de l'élément enfant ne peut généralement être réinitialisée qu'à ce moment)

Recommandations associées :

Introduction à l'héritage des valeurs d'attribut en CSS


Javascript pour obtenir des valeurs d'attribut CSS spécifiques_Échange d'expérience

Explication détaillée de l'utilisation de la valeur de l'attribut CSS

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
Article précédent：BFC caché dans CSSArticle suivant：BFC caché dans CSS

Articles Liés

Voir plus