Maison  >  Article  >  interface Web  >  Quels sont les héritages de propriétés CSS ? Résumé des propriétés héritables et non héritables en CSS

Quels sont les héritages de propriétés CSS ? Résumé des propriétés héritables et non héritables en CSS

不言
不言original
2018-07-27 16:30:0415763parcourir

Ce qu'on appelle l'héritage signifie que l'élément html peut hériter de certains attributs CSS de l'élément parent, même si l'élément actuel ne définit pas cet attribut. Alors, quelles propriétés CSS peuvent être héritées et quelles propriétés ne peuvent pas être héritées ? Jetons un coup d'œil au contenu de l'héritage d'attributs en CSS.

Jetons d'abord un coup d'œil à la priorité CSS :

!important > Caractères génériques > Héritage > Propriétés par défaut du navigateur.

Attributs CSS non-héritables couramment utilisés

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

text-decoration : spécifie la boîte type ajouté au texte Décoration

text-shadow : effet d'ombre du texte

white-space : traitement des espaces blancs

Attributs du modèle de boîte : largeur, hauteur, marge, bordure, padding

Attributs d'arrière-plan : background

Attributs de positionnement : float, clear, position, top, right, bottom, left, min-width, min-height, max-width, max-height, overflow, clip, z-index

Attributs héritables CSS couramment utilisés :

police : police combinée

font-family : famille de polices des éléments spécifiés

font-weight : Définir l'épaisseur de la police

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

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

text-indent : retrait du texte

text-align : alignement horizontal du texte

line-height : hauteur de la ligne

color : couleur du texte

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

Attribut du curseur : curseur

Tous les éléments peuvent hériter

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

2. Attribut du curseur :cursor

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

1. Attributs de la famille de polices

2. -align Les attributs de série de texte des

éléments de niveau bloc peuvent hériter des attributs

text-indent, text-align

inherit ( Inherit) valeur

Chaque attribut peut se voir attribuer une valeur de "inherit", c'est-à-dire : pour un élément donné, l'attribut prend la même valeur que la valeur calculée de l'attribut relatif de son élément parent. 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: hériter }

hériter Limitations

Bien que l'héritage réduise les problèmes liés aux définitions répétées, certaines 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 e388a4556c0f65e1904146cc1a846bee, si cet attribut est également hérité, alors tous les éléments de ce e388a4556c0f65e1904146cc1a846bee produira sans aucun doute un résultat éblouissant. 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 :

body { font-size: 12px; }

c1a436a314ed609750bd7c7d319db4daLe texte du titre de niveau 2 ne fait pas 12px. // 2e9b454fa8428549ca2e64dfac4625cd Le texte chinois H2 sera un texte de style Titre 2 au lieu d'un texte de taille 12 px.

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

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

Une fois héritées, les propriétés CSS ne peuvent pas être annulées et ne peuvent être que redéfinies.

Articles connexes recommandés :

Attributs d'élément d'héritage CSS_html/css_WEB-ITnose

Attributs en CSS Comment utiliser l'héritage de valeur

Introduction à l'héritage de valeur d'attribut 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