Héritage CSS

Découvrez ce que signifie l'héritage CSS et pourquoi c'est important

Lorsque vous définissez certaines propriétés sur un sélecteur en CSS, elles sont héritées par tous les enfants de ce sélecteur.

J'ai ditquelques, car toutes les propriétés ne présentent pas ce comportement.

Cela se produit parce que certaines propriétés ont du sens d'être héritées. Cela nous aide à écrire le CSS de manière beaucoup plus concise, car nous n'avons pas à redéfinir explicitement cette propriété sur chaque enfant.

Certaines autres propriétés ont plus de sens pourne pasêtre hérité.

Pensez aux polices: vous n'avez pas besoin d'appliquer lefont-familyà chaque balise de votre page. Vous définissez lebodytag font, et tous les enfants en héritent, ainsi que d'autres propriétés.

Lebackground-colorla propriété, en revanche, n'a pas de sens d'être héritée.

Propriétés qui héritent

Voici une liste des propriétés qui héritent. La liste n'est pas exhaustive, mais ces règles ne sont que les plus populaires que vous utiliserez probablement:

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-size-adjust
  • font-stretch
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • quotes
  • tab-size
  • text-align
  • text-align-last
  • text-decoration-color
  • text-indent
  • text-justify
  • text-shadow
  • text-transform
  • visibility
  • white-space
  • widows
  • word-break
  • word-spacing

Je l'ai eu de çabel article Sitepointsur l'héritage CSS.

Forcer les propriétés à hériter

Que faire si vous avez une propriété qui n'est pas héritée par défaut et que vous souhaitez qu'elle soit dans un enfant?

Dans les enfants, vous définissez la valeur de la propriété sur le mot clé spécialinherit.

Exemple:

body {
	background-color: yellow;
}

p { background-color: inherit; }

Forcer les propriétés à NE PAS hériter

Au contraire, vous pourriez avoir une propriété héritée et vous voulez éviter cela.

Vous pouvez utiliser lerevertmot-clé pour le rétablir. Dans ce cas, la valeur est rétablie à la valeur d'origine que le navigateur lui a donnée dans sa feuille de style par défaut.

En pratique, cela est rarement utilisé et la plupart du temps, vous ne définissez qu'une autre valeur pour la propriété afin de remplacer cette valeur héritée.

Autres valeurs spéciales

En plus deinheritetrevertmots-clés spéciaux que nous venons de voir, vous pouvez également définir n'importe quelle propriété sur:

  • initial: utilisez la feuille de style du navigateur par défaut si disponible. Sinon, et si la propriété hérite par défaut, héritez de la valeur. Sinon, ne faites rien.
  • unset: si la propriété hérite par défaut, hérite. Sinon, ne faites rien.

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: