text-decoration |
Décoration du texte |
|---|---|
| CSS |
Syntaxe
| text-decoration: paramètres; |
Paramètres
| Paramètre | Description | ||
|---|---|---|---|
| paramètres | Ce paramètre de propriété permet d'indiquer le type de décoration du texte : | ||
| Constante | Aperçu | Description | |
| "none" | Ceci est un texte d'exemple | Cette constante indique qu'il n'y a aucune décoration pour le texte, soit un texte normal. Valeur utilisé par défaut. | |
| "underline" | Ceci est un texte d'exemple | Cette constante indique que le texte est souligné | |
| "overline" | Ceci est un texte d'exemple | Cette constante indique que le texte est surligné | |
| "line-through" | Ceci est un texte d'exemple | Cette constante indique que le texte est barré | |
| "blink" | Ceci est un texte d'exemple | Cette constante indique que le texte est clignotant. Cette fonctionnalité n'est pas supporté avec IE. | |
Description
Cette propriété permet de spécifier la présentation du texte (soulignement, barré, clignotement,...).
Remarque
- 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 :
- <span style="border-bottom: 6px solid white;padding-bottom:1px;">
- <span style="border-bottom: 5px solid #4DCCBD;padding-bottom:1px;">
- <span style="border-bottom: 4px solid white;padding-bottom:1px;">
- <span style="border-bottom: 3px solid #92693C;padding-bottom:1px;">
- <span style="border-bottom: 2px solid white;padding-bottom:1px;">
- <span style="border-bottom: 1px solid #C03576;padding-bottom:1px;">
- gladir.com
- </span>
- </span>
- </span>
- </span>
- </span>
- </span>
on obtiendra le résultat suivant :
gladir.comPar 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.
Exemples
L'exemple suivant permet de souligné un texte avec un style CSS :
on obtiendra le résultat suivant :
SoulignementL'exemple suivant permet de faire un double soulignement du texte avec un style CSS :
on obtiendra le résultat suivant :
Double soulignement