Souligner un document ou un texte est toujours considéré comme facile. Mais si l'on considère le cas des sites Web, est-ce encore facile? La plupart d'entre nous diraient oui, mais créer une ligne horizontale comprenant des motifs personnalisés rend cette tâche simple fastidieuse. Commençons le voyage de la décoration de texte en utilisant CSS de la manière suivante:
- Qu'est-ce que la décoration de texte?
- Types de décorations de texte en CSS
- Décoration de texte en utilisant CSS: Code
- Sauter la décoration du texte
Qu'est-ce que la décoration de texte?
Il définit l'apparence des lignes décoratives sur le texte. C'est une propriété abrégée pour:
- texte-décoration-ligne
- texte-décoration-couleur
- texte-décoration-style
Il est spécifié comme une ou plusieurs valeurs séparées par des espaces représentant le tepropriétés de décoration xt.
Syntaxe:
texte-décoration: || ||
Où,
texte-décoration-ligne: Il est utilisé pour définir le type de décoration utilisé tel quesouligné, surligné et traversé.
texte-décoration-couleur:Il est utilisé pour définir la couleur de la décoration.
texte-décoration-style: Il est utilisé pour définir le style de la ligne tel quesolide, ondulé, pointillé, pointillé, double
Types de décorations de texte en CSS
- Overline:
#decoration {text-decoration: overline} 
configuration de php sous windows
- Ligne à travers:
#decoration {text-decoration: line-through}- Souligner:
#decoration {text-decoration: underline}- Combinaison:
#decoration {text-decoration: underline line-through overline}Production:
Décoration de texte en utilisant CSS: Code
Code:
Code CSS:
#overline {text-decoration: wavy overline lime} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline dotted red} #wavy {text-decoration: line-through wavy}Production:
Sauter la décoration du texte
Une propriété connue sous le nom de text-decoration-skip peut également être utilisée lorsqu'un texte est surligné, sur ligne et souligné. Cela aide à décorer le texte. Il spécifie simplement comment le surlignage et le soulignement sont dessinés lorsqu'ils passent au-dessus des ascendeurs et des descendants.
#decoration {text-decoration-skip: ink}Les valeurs qui peuvent être utilisées avec les sauts de décoration de texte sont:
objets : (par défaut) la ligne saute les objets en ligne, comme les images ou les éléments de bloc en ligne.
aucun : la ligne traverse tout.
les espaces : La ligne de décoration saute les espaces, les caractères de séparation de mots et tous les espaces définis avec des espaces entre les lettres ou des mots.
encre : la ligne de décoration saute les glyphes, les descendants ou les ascendeurs.
bords : la ligne de décoration commence légèrement après le bord de départ du contenu et se termine légèrement avant le bord de fin du contenu.
boîte-décoration : la ligne de décoration ignore la marge, la bordure et le remplissage hérités.
Étant donné que cette propriété n'est prise en charge par aucun navigateur, il n'y a pas encore de démonstration, mais voici un exemple dans l'image ci-dessous de ce à quoi chacune des valeurs pourrait ressembler une fois que text-decoration-skip est implémenté.
Avec cela, nous arrivons à la fin de ce blog Text Decoration Using CSS. Si vous avez des questions concernant ce sujet, veuillez laisser un commentaire ci-dessous et nous vous répondrons.
Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires du blog «Décoration de texte en CSS» et nous vous recontacterons.