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 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 répéter le graphique souligné 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 garantir 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, un espace blanc approprié doit être ajouté pour permettre l'espace pour les graphiques personnalisés sous le texte du lien. 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 CSS white-space pour empêcher le retour à la ligne du texte du lien, c'est-à-dire un { white-space: nowrap }.
Pour résumer, un exemple complet de définition de propriétés de style CSS pour un élément de lien serait :
un {
décoration de texte : aucune ;
arrière-plan : url(underline.gif) répéter-x 100 % 100 % ;
rembourrage en bas : 4 px ;
espace blanc : nowrap ;
}
Si vous souhaitez que le soulignement personnalisé apparaisse uniquement lorsque la souris survole , modifiez simplement la propriété CSS background initialement définie directement sur l'élément de lien en :hover, par exemple :
un {
décoration de texte : aucune ;
rembourrage en bas : 4 px ;
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 ondulée) 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.
<html>
<tête>
<titre>ex</titre>
<type de style=texte/css>
a#exemple1a {
décoration de texte : aucune ;
arrière-plan : url(diagonal.gif) répéter-x 100 % 100 % ;
espace blanc : nowrap ;
rembourrage en bas : 2 px ;
}
a#exemple1b {
décoration de texte : aucune ;
espace blanc : nowrap ;
rembourrage en bas : 2 px ;
}
a#exemple1b:survolez {
arrière-plan : url(diagonal.gif) répéter-x 100 % 100 % ;
}
a#exemple2a {
décoration de texte : aucune ;
arrière-plan : url(flower.gif) répéter-x 100 % 100 % ;
espace blanc : nowrap ;
remplissage en bas : 10 px ;
}
a#exemple2b {
décoration de texte : aucune ;
espace blanc : nowrap ;
remplissage en bas : 10 px ;
}
a#exemple2b:survolez {
arrière-plan : url(flower.gif) répéter-x 100 % 100 % ;
}
-->
</style>
</tête>
<corps>
<p>Exemple :</p>
<p> <a href=# id=example1a>soulignement statique ondulé</a>,
<a href=# id=example1b>La ligne d'ondulation qui apparaît lorsque la souris est survolée</a>. </p>
<p> <a href=# id=example2a>Soulignement statique de fleur</a>,
<a href=# id=example2b>Le soulignement de la fleur qui apparaît lorsque la souris est survolée</a>. </p>
</corps>
</html>