diff options
Diffstat (limited to 'files/fr/web/css/text-decoration/index.html')
| -rw-r--r-- | files/fr/web/css/text-decoration/index.html | 14 |
1 files changed, 6 insertions, 8 deletions
diff --git a/files/fr/web/css/text-decoration/index.html b/files/fr/web/css/text-decoration/index.html index 49f244c559..0cee3a8764 100644 --- a/files/fr/web/css/text-decoration/index.html +++ b/files/fr/web/css/text-decoration/index.html @@ -12,19 +12,17 @@ translation_of: Web/CSS/text-decoration <p>La propriété <strong><code>text-decoration</code></strong> est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}.</p> -<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div <p>Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML <code><p>Ce texte a <em> des mots mis en avant</em> dedans.</p></code>, et cette règle CSS <code>p { text-decoration: underline; }</code>, on aura tout le paragraphe souligné, même si on applique la règle <code>em { text-decoration: none; }</code>, cela n'aurait aucun impact. En revanche, ajouter la règle <code>em { text-decoration: overline; }</code> entraînerait un cumul des décorations pour « des mots mis en avant ».</p> -<div class="note style-wrap"> -<p><strong>Note : </strong>La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.</p> +<div class="note"> +<p><strong>Note :</strong> La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: css no-line-numbers notranslate">/* Valeurs avec mots-clés */ +<pre class="brush: css no-line-numbers">/* Valeurs avec mots-clés */ text-decoration: none; /* Aucune décoration */ text-decoration: underline red; /* On souligne en rouge */ text-decoration: underline wavy red; /* On souligne en rouge avec */ @@ -55,7 +53,7 @@ text-decoration: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">.under { +<pre class="brush: css">.under { text-decoration: underline red; } @@ -82,7 +80,7 @@ text-decoration: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p class="under">Ce texte a une ligne en dessous.</p> +<pre class="brush: html"><p class="under">Ce texte a une ligne en dessous.</p> <p class="over">Ce texte a une ligne au dessus.</p> <p class="line">Ce texte est barré d'une ligne.</p> <p>Ce <a class="plain" href="#">lien ne sera pas souligné</a>, |