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; }
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 chinois H2 sera un texte de style Titre 2 au lieu d'un texte de taille 12px. body { font-size: 12px; }