Maison  >  Article  >  interface Web  >  Comment utiliser l'héritage de valeur d'attribut en CSS

Comment utiliser l'héritage de valeur d'attribut en CSS

php中世界最好的语言
php中世界最好的语言original
2018-03-21 14:59:392020parcourir

Cette fois, je vais vous montrer comment utiliser l'héritage de valeur d'attribut en CSS et quelles sont les précautions à prendre pour utiliser l'héritage de valeur d'attribut en CSS. Ce qui suit est un cas pratique, jetons un coup d'œil.

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, table-layout, alignement vertical, saut de page- après, page-pain-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, texte-transform, direction.
Les éléments du bornier peuvent hériter : text-indent et text-align.
Les éléments de liste peuvent hériter : list-style, list-style-type, list-style-position, list-style-image.
Les éléments du tableau peuvent hériter de : 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, vous ne pouvez généralement réinitialiser la largeur de l'élément enfant qu'à ce moment)

Si vous vous égarez, revenez en arrière ; si vous y allez précipitamment, allez-y doucement. Arrêtez-vous et réfléchissez-y de temps en temps, jetez un œil, réfléchissez-y, puis continuez à marcher.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation de la barre de menu de transition en douceur Css3 Transition

Comment créer une ligne de 0,5 pixel en 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