321 Shares 8124 views

Les éléments décoratifs soulignent les CSS

La technologie des feuilles de style effectue deux fonctions lors de la création de pages HTML. Tout d'abord, avec son aide, la position des éléments individuels du site est formée. Deuxièmement, cela rend les blocs visuellement attrayants pour l'utilisateur. La deuxième fonction est implémentée de différentes façons. L'un d'eux est souligné. CSS fournit cet attribut text- decoration .

Spécification de l'enregistrement d'attribut

L'utilisation de la propriété de la décoration est simple. Il suffit d'écrire la ligne suivante pour l'élément dans le code du fichier de style:

Décoration de texte : attribut_value ;

Au lieu de la valeur attribut , la spécification CSS offre plusieurs options:

  • Souligné – la ligne est située strictement sous le texte;
  • Surline – la ligne passe du haut du texte;
  • Aucun – enlever tous les effets décoratifs;
  • Hériter – adopte la valeur de l'élément parent.

Au-dessus, toutes les formes possibles de l'enregistrement ne sont pas données, car cet attribut spécifie non seulement le soulignement de CSS, mais aussi d'autres effets, par exemple, "clignotant" le texte ou son entrelacement.

Exemples de conception de lien hypertexte

Les débutants dans la conception et la programmation Web ont la question: pourquoi faire la ligne de fond du texte? À l'aube de l'ère de la technologie Internet, cette façon de souligner a indiqué à l'utilisateur qu'il y avait un lien hypertexte devant lui – un texte qui sera cliqué sur une nouvelle page.

Par défaut, les hyperliens ont une propriété de soulignement . En pratique, le problème consiste à supprimer la ligne des éléments inactifs et à le rendre visible lorsque l'utilisateur survient sur le pointeur de la souris. Voici un exemple de code qui désactive le soulignement de CSS:

A {text-decoration: none;}

L'entrée suivante est utilisée pour les liens actifs:

A: hover {text-decoration: souligné;}

Souligné décoratif pour avancé

L'attribut standard de décoration de texte comporte plusieurs limitations:

  • La couleur de la ligne ne diffère pas de la couleur du texte du lien, il est impossible de distinguer leur "coloration";
  • Seule une ligne solide est utilisée comme trait de soulignement. CSS n'implique pas l'utilisation d'autres styles de contours.

Mais des techniques spéciales permettent de contourner la conception classique du texte. Dans le premier cas, une étiquette < span > supplémentaire est utilisée pour spécifier le lien hypertexte.

Par exemple:

hyperliens

</ A>. </ P>

Par conséquent, sur la page, l'hyperlien du mot sera écrit en bleu et la couleur de la ligne sera rouge.

Une autre méthode avancée qui vous permet d'implémenter un soulignement CSS, bordure inférieure . L'exemple ci-dessous explique son utilisation:

A {border-bottom: 1px solid red;}

Le résultat sera le même que dans l'exemple ci-dessus. Mais cette méthode présente un avantage important. En plus de modifier la couleur de la ligne (le rouge est maintenant réglé), il est possible de transformer la façon dont il est dessiné:

  • Doté – fait un point souligné;
  • Énuméré – la ligne se compose de traits;
  • Double tire une double ligne.

Ainsi, l'attribut border- bottom est plus fonctionnel. En plus d'afficher une ligne décorative sous le texte, il vous permet de personnaliser son apparence.