text-decoration

Syntaxe

Paramètres

Description

Cette propriété permet de spécifier la présentation du texte (soulignement, barré, clignotement,...).

Remarques

• Le CSS est très confortable, mais pour faire un triple souligner avec 3 couleurs différentes, il faudra plutôt utiliser une technique comme ceci :
1. <span style="border-bottom: 6px solid white;padding-bottom:1px;">
2.  <span style="border-bottom: 5px solid #4DCCBD;padding-bottom:1px;">
3.   <span style="border-bottom: 4px solid white;padding-bottom:1px;">
4.    <span style="border-bottom: 3px solid #92693C;padding-bottom:1px;">
5.     <span style="border-bottom: 2px solid white;padding-bottom:1px;">
6.      <span style="border-bottom: 1px solid #C03576;padding-bottom:1px;">
7.       gladir.com
8.      </span>
9.     </span>
10.    </span>
11.   </span>
12.  </span>
13. </span>

on obtiendra le résultat suivant :

gladir.com



Par conséquent, cette technique se base sur le fait qu'on imbrique récursivement une boite dans une autre une boite en prenant soins de mettre la bordure du bas de la couleur du soulignement. Pour que le soulignement est l'air plus naturel (que les lignes ne se colles pas), on insère une ligne blanche entre chacune des trois boites. Le résultat est donc un trompe oeil, et lorsqu'on regarde a vraiment l'impression qu'il s'agit d'un triple soulignement.

• Contrôle des décorations de texte : La propriété text-decoration permet de contrôler les décorations appliquées au texte, comme les soulignements, les barrages ou les surlignages. Elle peut être utilisée pour ajouter ou supprimer des styles visuels sur le texte afin d'améliorer l'accessibilité ou la présentation du contenu. Les valeurs courantes incluent underline, line-through, overline, et none.
• Valeurs multiples : text-decoration permet l'application de plusieurs décorations en même temps. Par exemple, vous pouvez combiner underline et line-through pour qu'un texte soit à la fois souligné et barré. Cela permet une flexibilité accrue dans la présentation du texte. Cette fonctionnalité est utile pour des effets visuels plus complexes, tels que la mise en évidence de texte dans un contexte particulier.
• Propriétés spécifiques avec text-decoration : CSS a subdivisé la propriété text-decoration en plusieurs propriétés spécifiques, comme text-decoration-line, text-decoration-color, et text-decoration-style. Cela permet de contrôler non seulement le type de décoration (souligné, barré,...), mais aussi la couleur et le style de la ligne (par exemple, une ligne pointillée ou double). Cela permet un contrôle plus précis et détaillé.
• Utilisation dans les liens hypertexte : L'une des applications les plus courantes de text-decoration est l'alignement visuel des liens hypertexte. Par défaut, les liens sont souvent soulignés, mais en utilisant text-decoration: none, vous pouvez enlever ce soulignement, ce qui est utile pour des designs modernes où les liens sont mis en valeur par des effets de survol ou d'autres styles.
• Accessibilité et lisibilité : L'usage de text-decoration a des implications importantes sur l'accessibilité. Par exemple, l'utilisation de underline ou line-through peut avoir un impact sur la lisibilité du texte. Il est crucial de s'assurer que les décorations appliquées au texte n'entravent pas la compréhension du contenu, en particulier pour les utilisateurs ayant des déficiences visuelles.
• Effet de survol (hover) : La propriété text-decoration peut être utilisée pour ajouter des effets de survol intéressants. Par exemple, en combinant text-decoration: underline avec :hover, vous pouvez créer un effet où un lien devient souligné uniquement lorsque l'utilisateur survole celui-ci. Cela permet d'améliorer l'interaction utilisateur tout en maintenant un design minimaliste.
• Compatibilité avec les navigateurs Web : Bien que la propriété text-decoration soit largement prise en charge par tous les navigateurs Web modernes, il est important de noter que certaines de ses variantes plus récentes (comme text-decoration-line, text-decoration-color, et text-decoration-style) peuvent ne pas être entièrement compatibles avec les anciennes versions des navigateurs Web. Par conséquent, des tests de compatibilité sont essentiels lors de l'utilisation de ces nouvelles valeurs.
• Personnalisation du style de décoration : Avec text-decoration, il est désormais possible de définir des styles de décoration plus personnalisés en utilisant des valeurs comme dotted, dashed, double ou wavy. Ces styles ajoutent des effets visuels variés à la décoration du texte, allant des lignes pointillées au soulignement ondulé, permettant ainsi d'affiner le style de l'interface et de mieux correspondre à l'identité visuelle du site ou de l'application.

Exemples

L'exemple suivant permet de souligné un texte avec un style CSS :

on obtiendra le résultat suivant :

L'exemple suivant permet de faire un double soulignement du texte avec un style CSS :

on obtiendra le résultat suivant :