Les soulignements
Complément : Éditeur de Soulignement
Decoration
Définition : Soulignement
Le soulignement peut se décomposer en plusieurs parties
Position
1
.p1 { text-decoration-line: none;} // aucun
2
.p2 { text-decoration-line: underline;} // sous
3
.p3 { text-decoration-line: overline;} // au-dessus
4
.p4 { text-decoration-line: line-through;} // au travers
5
.p5 { text-decoration-line: underline overline ;} // sous et au dessus
Couleur
1
.p1 { text-decoration-color: red;}
Forme
1
.p1 { text-decoration-style: solid;} // plein
2
.p2 { text-decoration-style: double;} // double
3
.p3 { text-decoration-style: dotted;} // points
4
.p4 { text-decoration-style: dashed;} // tirets
5
.p5 { text-decoration-style: wavy ;} // ondulé
Combinaison
1
p { text-decoration: underline red wavy;} // soulignement rouge ondulé
2
a {text-decoration: none;}; // supprime le soulignement des ancres
1
<p>Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.</p>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
Interprétation de CSS
text-underline-offset : Permet de préciser la distance entre le texte et le soulignement (underline seulement).
1
p { text-underline-offset: 6px;} // 6px entre texte et soulignement