« Le langage CSS/Texte » : différence entre les versions

Contenu supprimé Contenu ajouté
Ligne 151 :
 
La propriété <code>text-decoration</code> permet d'ajouter un trait au texte. Les valeurs possibles sont :
* <code>none</code>, : texte normal,
* <code>underline</code>, : texte souligné,
* <code>overline</code>, : texte surligné,
* <code>line-through</code>, : texte barré.
 
Cette propriété est très utile pour styliser les liens qui sont par défaut soulignés dans les navigateurs. Il est en effet assez courant de nos jours ne plus les souligner mais de seulement les colorer.
Ligne 168 :
 
{{Cadre}}
<strong style="text-decoration: underline;">Texte strong</strong>, <em style="text-decoration: overline;">texte em</em> et <span style="text-decoration: line-through;">texte span</span><span style="text-decoration: underline double;">texte span</span>
{{Fin}}
 
{{NB: |le style standard de ''strong'' est caractères gras, celui de ''em'' est caractères en italique, enfin ''span'' est du texte normal.}}
 
Cette propriété permet en fait de rassembler quatre sous-propriétés :
 
;<code>text-decoration-line</code>:La position du trait :
:* <code>none</code> : texte normal (par défaut),
:* <code>underline</code> : texte souligné,
:* <code>overline</code> : texte surligné,
:* <code>line-through</code> : texte barré.
:Plusieurs valeurs peuvent être spécifiées pour produire une combinaison ; par exemple souligné et surligné.
:{| class="flexible"
| <pre><span style="text-decoration-line: underline;">Souligné</span></pre>
| <span style="text-decoration-line: underline;">Souligné</span>
|-
| <pre><span style="text-decoration-line: overline;">Surligné</span></pre>
| <span style="text-decoration-line: overline;">Surligné</span>
|-
| <pre><span style="text-decoration-line: overline underline;">Surligné et souligné</span></pre>
| <span style="text-decoration-line: overline underline;">Surligné et souligné</span>
|}
 
;<code>text-decoration-style</code>:Le style de trait :
:* <code>solid</code> : trait continu (par défaut),
:* <code>dotted</code> : ligne de points,
:* <code>dashed</code> : tirets,
:* <code>double</code> : trait double,
:* <code>wavy</code> : vague.
:{| class="flexible"
| <pre><span style="text-decoration-line: underline; text-decoration-style: solid;">Souligné continu</span></pre>
| <span style="text-decoration-line: underline; text-decoration-style: solid;">Souligné continu</span>
|-
| <pre><span style="text-decoration-line: underline; text-decoration-style: dotted;">Souligné en pointillé</span></pre>
| <span style="text-decoration-line: underline; text-decoration-style: dotted;">Souligné en pointillé</span>
|-
| <pre><span style="text-decoration-line: underline; text-decoration-style: dashed;">Souligné de tirets</span></pre>
| <span style="text-decoration-line: underline; text-decoration-style: dashed;">Souligné de tirets</span>
|-
| <pre><span style="text-decoration-line: underline; text-decoration-style: double;">Souligné double</span></pre>
| <span style="text-decoration-line: underline; text-decoration-style: double;">Souligné double</span>
|-
| <pre><span style="text-decoration-line: underline; text-decoration-style: wavy;">Souligné par une vague</span></pre>
| <span style="text-decoration-line: underline; text-decoration-style: wavy;">Souligné par une vague</span>
|}
 
;<code>text-decoration-thickness</code>:Épaisseur de trait :
:* <code>auto</code> : automatique (par défaut),
:* <code>from-font</code> : selon les indications d'épaisseur de la police de caractères,
:* ''valeur'' : [[../Valeurs et unités#Distances et dimensions|épaisseur explicite (px, cm, ...)]].
:{| class="flexible"
| <pre><span style="text-decoration-line: underline; text-decoration-thickness: from-font;">Souligné</span></pre>
| <span style="text-decoration-line: underline; text-decoration-thickness: from-font;">Souligné</span>
|-
| <pre><span style="text-decoration-line: underline; text-decoration-thickness: 3px;">Souligné de 3 pixels d'épaisseur</span></pre>
| <span style="text-decoration-line: underline; text-decoration-thickness: 3px;">Souligné de 3 pixels d'épaisseur</span>
|}
 
;<code>text-decoration-color</code>:Couleur du trait, voir [[../Valeurs et unités#Les couleurs|la section « Les couleurs » du chapitre « Valeurs et unités »]].
:{| class="flexible"
| <pre><span style="text-decoration-line: underline; text-decoration-color: #00aaff;">Souligné en bleu</span></pre>
| <span style="text-decoration-line: underline; text-decoration-color: #00aaff;">Souligné en bleu</span>
|-
| <pre><span style="text-decoration-line: underline; text-decoration-color: red;">Souligné en rouge</span></pre>
| <span style="text-decoration-line: underline; text-decoration-color: red;">Souligné en rouge</span>
|}
 
Il est courant de souligner des erreurs par une vague rouge :
 
<pre><span style="text-decoration: underline wavy red;">Souligné par une vague rouge</span></pre>
 
<span style="text-decoration: underline wavy red;">Souligné par une vague rouge</span>
 
=== Majuscules et minuscules ===