From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/inheritance/index.md | 78 ++++++++++++++++++----------------- 1 file changed, 41 insertions(+), 37 deletions(-) (limited to 'files/fr/web/css/inheritance') diff --git a/files/fr/web/css/inheritance/index.md b/files/fr/web/css/inheritance/index.md index 65f8e21a57..4e1d5e1331 100644 --- a/files/fr/web/css/inheritance/index.md +++ b/files/fr/web/css/inheritance/index.md @@ -8,70 +8,74 @@ tags: translation_of: Web/CSS/inheritance original_slug: Web/CSS/Héritage --- -
{{CSSRef}}
+{{CSSRef}} -

Pour chaque propriété CSS, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.

+Pour [chaque propriété CSS](fr/R%c3%a9f%c3%a9rence_CSS), la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné. -

Propriétés héritées

+## Propriétés héritées -

Lorsqu'aucune valeur n'est spécifiée pour une propriété héritée sur un élément, l'élément récupère la valeur calculée de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède la valeur initiale donnée via la spécification.

+Lorsqu'aucune valeur n'est spécifiée pour une _propriété héritée_ sur un élément, l'élément récupère la [valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) donnée via la spécification. -

Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :

+Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style : -
 p { color: green; }
-
+```css + p { color: green; } +``` -

Sur le fragment HTML suivant :

+Sur le fragment HTML suivant : -
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
-
+```html +

Ce paragraphe contient du texte mis en emphase text.

+``` -

On obtient le résultat suivant :

+On obtient le résultat suivant : -

{{EmbedLiveSample("Propriétés_héritées")}}

+{{EmbedLiveSample("Propriétés_héritées")}} -

Les mots « texte mis en emphase » apparaîtront en vert, car l'élément em a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément p. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).

+Les mots « texte mis en emphase » apparaîtront en vert, car l'élément `em` a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément `p`. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur). -

Propriétés non héritées

+## Propriétés non héritées -

Lorsqu'aucune valeur n'est définie pour un élément, pour une propriété non héritée, l'élément prendra la valeur initiale de cette propriété (telle qu'indiquée par la spécification).

+Lorsqu'aucune valeur n'est définie pour un élément, pour une _propriété non héritée_, l'élément prendra [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) de cette propriété (telle qu'indiquée par la spécification). -

Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :

+Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style : -
 p { border: medium solid; }
-
+```css + p { border: medium solid; } +``` -

Sur le fragment de code HTML :

+Sur le fragment de code HTML : -
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
-
+```html +

Ce paragraphe contient du texte mis en emphase text.

+``` -

On obtient le résultat suivant :

+On obtient le résultat suivant : -

{{EmbedLiveSample("Propriétés_non_héritées")}}

+{{EmbedLiveSample("Propriétés_non_héritées")}} -

Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est none).

+Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est `none`). -

Notes

+## Notes -

Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.

+Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées. -

Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.

+Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés. -

Ainsi :

+Ainsi : -
font: {
+```css
+font: {
   all: revert;
   font-size: 200%;
   font-weight: bold;
-}
+} +``` -

permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.

+permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras. -

Voir aussi

+## Voir aussi - +- {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}} +- [La notion de valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) +- [La notion de valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) -- cgit v1.2.3-54-g00ecf