CSS : Personnalisez le lien Web coloré underlines_CSS/HTML

Le CSS lui-même ne fournit pas directement la fonction de modification du soulignement des liens HTML, mais tant que nous utilisons certaines techniques, nous pouvons toujours rendre le soulignement monotone des liens Web coloré.

1. Principes de base

Tout d'abord, la première étape pour personnaliser le soulignement des liens HTML consiste à créer un graphique. Répétez ce graphique dans le sens horizontal pour former un effet de soulignement. Si vous souhaitez afficher l'arrière-plan de la page Web derrière le soulignement, vous pouvez utiliser un graphique .gif transparent.

Deuxièmement, si la hauteur du graphique souligné est grande, la hauteur du texte doit être augmentée de manière appropriée afin qu'il y ait un espace plus grand entre le bas d'une ligne de texte et le haut de la ligne de texte suivante, par exemple comme p { hauteur de ligne : 1,5 } .

Exemple de soulignement de lien personnalisé

Troisièmement, pour afficher un soulignement personnalisé, le soulignement par défaut doit être masqué, c'est-à-dire un { text-decoration: none;

Quatrièmement, définissez le graphique de soulignement pour l'élément de lien et créez un soulignement personnalisé. En supposant que le graphique souligné est underline.gif, le code CSS pour définir le graphique souligné est un { background-image: url(underline.gif });

Cinquièmement, nous devons faire apparaître le graphique souligné à plusieurs reprises dans le sens horizontal, mais pas dans le sens vertical, sinon il sera caché derrière le texte. Le code qui nécessite que le soulignement se répète uniquement dans le sens horizontal est : a { background-repeat: répétition-x }.

Sixièmement, pour vous assurer que le graphique apparaît sous le texte du lien (quelle que soit la taille de la police), utilisez l'attribut background-position pour placer le graphique au bas de l'élément de lien. Pour les graphiques soulignés tels que les flèches, vous pouvez également envisager l’alignement horizontal des graphiques. Supposons que vous souhaitiez placer le graphique souligné dans le coin inférieur droit, le code CSS est : a { background-position: 100% 100% }.

Septièmement, afin de laisser de l'espace pour des graphiques personnalisés sous le texte du lien, un espace blanc approprié doit être ajouté. La position spécifique du graphique souligné par rapport au texte du lien est liée à la taille du texte, mais de manière générale, vous pouvez d'abord rendre la marge inférieure égale à la hauteur du graphique souligné, puis l'ajuster si nécessaire. Par exemple : a { padding-bottom: 4px }.

Huitièmement, puisque le graphique souligné est placé au bas de l'élément de lien, il faut s'assurer que le lien ne se rompt pas (si le lien est autorisé à s'étendre sur plusieurs lignes, seul le texte du lien dans la ligne suivante aura un soulignement personnalisé). Utilisez l'attribut white-space de CSS pour empêcher le retour à la ligne du texte du lien, c'est-à-dire un { white-space: nowrap }.

En résumé, un exemple complet de définition d'attributs de style CSS pour les éléments de lien est le suivant :

　a {
​​ décoration de texte : aucune ;
​​ arrière-plan : url(underline.gif) répéter-x 100 % 100 %
​​ rembourrage en bas : 4px ;
​​ espace blanc : nowrap ;
​ }

Si vous souhaitez que le soulignement personnalisé apparaisse uniquement lorsque la souris survole, modifiez simplement l'attribut CSS background initialement défini directement sur l'élément de lien en :hover, par exemple :

　a {
​​ décoration de texte : aucune ;
​​ rembourrage en bas : 4px ;
​​ espace blanc : nowrap ;
​ }

a: survolez {
​​ arrière-plan : url(underline.gif) répéter-x 100 % 100 % ;
​ }

2. Appréciation des exemples

Supposons qu'il y ait deux graphiques soulignés diagonal.gif (ligne d'ondulation) et flower.gif (fleur). La hauteur et la largeur du premier sont 3 et 9, et la hauteur et la largeur du second sont 11 et 15. Voici un exemple complet de définition de deux types de soulignement :

Exemple de soulignement de lien personnalisé

Le code source de la page web est le suivant :
​ Remarque : diagonal.gif et flower.gif ont été copiés dans le même répertoire où se trouve la page Web.

　
​
​ ex

　

​

　

　

Beispiel:

​

statische Ripple-Unterstreichung,
​ Die Wellenlinie, die erscheint, wenn sich die Maus darüber befindet.

​

statische Blumenunterstreichung,
​ Blumenunterstreichung, die angezeigt wird, wenn sich die Maus darüber befindet.

　
​