logo

Comment souligner du texte en CSS ?

Propriété CSS Text-decoration : -

Les soulignements peuvent être utilisés pour mettre en évidence un texte important. L'élément U et la propriété CSS text-decoration sont les deux techniques les plus utilisées pour souligner le texte sur les pages Web.

Les deux sont simples à utiliser, mais l’élément U offre une valeur sémantique au sens. Un autre peut être affiché à la demande, ce qui simplifie la modification de l'état de soulignement en ajoutant simplement des classes CSS au texte.

La question de savoir si les soulignements sont utiles ou non pour exprimer du sens ou de l'accessibilité est un sujet de débat. Les soulignements constituent une approche naturelle pour offrir une plus grande valeur à l'expérience utilisateur lorsque la couleur à elle seule ne suffit pas à exprimer un sens.

L'attribut text-decoration offre une autre façon de souligner le texte. Le texte du lien hypertexte peut également être utilisé pour remplacer les soulignements par des surlignages.

Un surlignement est l’opposé du soulignement. Une ligne est ajoutée en haut du texte.

Nous pouvons utiliser toutes les valeurs soulignées et surlignées pour la même définition de classe. La propriété text-decoration régit la façon dont le texte est présenté de plusieurs manières. Lorsque text-decoration est défini sur souligné, le texte à l'intérieur du composant est souligné.

Les propriétés CSS de décoration de texte sont fantastiques pour le texte, mais elles peuvent être limitées en termes de conception et ne sont pas applicables aux types de contenu non textuels. Les soulignements peuvent également être créés avec les attributs de bordure CSS.

liste des méthodes java

L'attribut text-decoration est le moyen le plus simple de souligner du texte. L’inconvénient le plus important de la décoration de texte est qu’elle n’est pas configurable.

La propriété text-decoration utilise le soulignement, le surlignement, le passage en ligne ou une combinaison de lignes pour mettre en évidence le texte sélectionné.

Le contenu est souligné à l'aide de l'attribut text-decoration-line. Surligner, souligner et passer au trait sont les trois options pour cet attribut. En CSS, l'attribut soulignement est utilisé pour surligner le texte. Le soulignement est dessiné sous le texte en ligne avec cette valeur.

Sur les éléments de texte descendants, des décorations de texte sont dessinées. Cela implique que lorsqu'un élément définit une décoration de texte, la décoration ne peut pas être supprimée par un élément enfant.

char et int java

Aucune ligne n'est tracée et toutes les décorations existantes sont supprimées.

Souligner: une ligne de 1 px est tracée sur la ligne de base du texte.

Ligne à travers: au point « milieu » du texte, insère une ligne de 1 px à travers celui-ci.

Surligner : ajoute une ligne de 1 px directement au-dessus du point « supérieur » du texte.

Hériter: hérite de la décoration du parent.

La décoration du texte est spécifiée via la propriété text-decoration, qui est une caractéristique abrégée pour :

Paraphraser si par Rudyard Kipling
  • ligne-de-décoration-de-texte (obligatoire)
  • texte-décoration-couleur
  • style de décoration de texte
  • texte-décoration-épaisseur

surligner, souligner, souligner-surligner, passer au trait relève de la ligne de décoration de texte.

Solide, pointillé, pointillé, ondulé, double relève du style de décoration de texte.

La couleur en valeur décimale, en valeur hexadécimale ou en héritage relève de la couleur de la décoration du texte.

La propriété border-bottom est une alternative à la décoration de texte. Nous pouvons également utiliser border-bottom pour fournir un remplissage.

Syntaxe : -

 text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness 

Cherchons maintenant un exemple et comprenons l'utilisation de la propriété text-decoration.

Décoration de texte : souligner surligner

Exemple: -

 h1 { text-decoration: underline overline dotted purple; } h3 { text-decoration: underline wavy cyan 10px;} <h2>This is an example of text decoration property color using underline overline. </h2> <h3>This is an example of text decoration property color using line-through. </h3> 

Sortir:

Comment souligner du texte en CSS ?