diff options
Diffstat (limited to 'files/fr/web/css/text-emphasis-style/index.md')
| -rw-r--r-- | files/fr/web/css/text-emphasis-style/index.md | 118 |
1 files changed, 53 insertions, 65 deletions
diff --git a/files/fr/web/css/text-emphasis-style/index.md b/files/fr/web/css/text-emphasis-style/index.md index 3157731726..556e8e3dd6 100644 --- a/files/fr/web/css/text-emphasis-style/index.md +++ b/files/fr/web/css/text-emphasis-style/index.md @@ -7,11 +7,12 @@ tags: - Reference translation_of: Web/CSS/text-emphasis-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>text-emphasis-style</code></strong> définit le type d'emphase utilisée. Celui-ci peut également être (re)défini via la propriété raccourcie {{cssxref("text-emphasis")}}.</p> +La propriété **`text-emphasis-style`** définit le type d'emphase utilisée. Celui-ci peut également être (re)défini via la propriété raccourcie {{cssxref("text-emphasis")}}. -<pre class="brush:css no-line-numbers">/* Valeur initiale */ +```css +/* Valeur initiale */ /* Aucune marque d'emphase */ text-emphasis-style: none; @@ -31,82 +32,69 @@ text-emphasis-style: open sesame; text-emphasis-style: inherit; text-emphasis-style: initial; text-emphasis-style: unset; -</pre> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>none</code></dt> - <dd>Aucune marque d'emphase.</dd> - <dt><code>filled</code></dt> - <dd>La forme est remplie avec une couleur unie. Si <code>filled</code> ou <code>open</code> est absent, ce sera la valeur par défaut.</dd> - <dt><code>open</code></dt> - <dd>La forme est vide.</dd> - <dt><code>dot</code></dt> - <dd>Cette valeur permet d'afficher des marques en forme de points. Le point rempli est le caractère <code>'•'</code> (<code>U+2022</code>) et le point vide est le caractère <code>'◦'</code> (<code>U+25E6</code>).</dd> - <dt><code>circle</code></dt> - <dd>Cette valeur permet d'afficher des marques en forme de cercles (plus grands que les points). Le cercle rempli est le caractère <code>'●'</code> (<code>U+25CF</code>) et celui pour le cercle ouvert est <code>'○'</code> (<code>U+25CB</code>).</dd> - <dt><code>double-circle</code></dt> - <dd>Cette valeur permet d'afficher des marques en forme de doubles cercles. Le double-cercle rempli est le caractère <code>'◉'</code> (<code>U+25C9</code>), et le double-cercle ouvert est le caractère <code>'◎'</code> (<code>U+25CE</code>).</dd> - <dt><code>triangle</code></dt> - <dd>Cette valeur permet d'afficher des marques en forme de triangles. Le triangle rempli correspond au caractère <code>'▲'</code> (<code>U+25B2</code>) et le triangle ouvert au caractère <code>'△'</code> (<code>U+25B3</code>).</dd> - <dt><code>sesame</code></dt> - <dd>Cette valeur permet d'afficher des marques en forme de points sésame :<code>'﹅'</code> (<code>U+FE45</code>) pour le caractère rempli et <code>'﹆'</code> (<code>U+FE46</code>) pour le caractère ouvert.</dd> - <dt><code><string></code></dt> - <dd>Utilise la chaîne fournie comme marque. Attention, l'agent utilisateur peut tronquer la chaîne ou choisir d'ignorer les chaînes qui ont plus d'un graphème. Il est donc conseillé de n'utiliser qu'une seule lettre.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +## Syntaxe + +### Valeurs + +- `none` + - : Aucune marque d'emphase. +- `filled` + - : La forme est remplie avec une couleur unie. Si `filled` ou `open` est absent, ce sera la valeur par défaut. +- `open` + - : La forme est vide. +- `dot` + - : Cette valeur permet d'afficher des marques en forme de points. Le point rempli est le caractère `'•'` (`U+2022`) et le point vide est le caractère `'◦'` (`U+25E6`). +- `circle` + - : Cette valeur permet d'afficher des marques en forme de cercles (plus grands que les points). Le cercle rempli est le caractère `'●'` (`U+25CF`) et celui pour le cercle ouvert est `'○'` (`U+25CB`). +- `double-circle` + - : Cette valeur permet d'afficher des marques en forme de doubles cercles. Le double-cercle rempli est le caractère `'◉'` (`U+25C9`), et le double-cercle ouvert est le caractère `'◎'` (`U+25CE`). +- `triangle` + - : Cette valeur permet d'afficher des marques en forme de triangles. Le triangle rempli correspond au caractère `'▲'` (`U+25B2`) et le triangle ouvert au caractère `'△'` (`U+25B3`). +- `sesame` + - : Cette valeur permet d'afficher des marques en forme de points sésame :`'﹅'` (`U+FE45`) pour le caractère rempli et `'﹆'` (`U+FE46`) pour le caractère ouvert. +- `<string>` + - : Utilise la chaîne fournie comme marque. Attention, l'agent utilisateur peut tronquer la chaîne ou choisir d'ignorer les chaînes qui ont plus d'un graphème. Il est donc conseillé de n'utiliser qu'une seule lettre. + +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p><em>Coucou</em>, je suis <em>là</em></p></pre> +```html +<p><em>Coucou</em>, je suis <em>là</em></p> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css"><code>em { +```css +em { text-emphasis-style: sesame; -}</code></pre> +} +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples")}}</p> +{{EmbedLiveSample("Exemples")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale. | -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.properties.text-emphasis-style")}}</p> +{{Compat("css.properties.text-emphasis-style")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{cssxref('text-emphasis-color')}}</li> - <li>{{cssxref('text-emphasis')}}.</li> - <li>{{cssxref('text-emphasis-position')}}</li> -</ul> +- {{cssxref('text-emphasis-color')}} +- {{cssxref('text-emphasis')}}. +- {{cssxref('text-emphasis-position')}} |