Soulignements et surlignements en couleurs
Avez-vous bien observé le titre de cette page ? Vous pouvez y déplacer le curseur de la souris : son aspect n'a pas été modifié par une règle de style (souvenez-vous : c'est possible grâce aux CSS) et ce titre n'est pas un lien fictif ! Voici une astuce bien utile que bien des concepteurs n'utilisent pas ... imaginant peut-être qu'elle est irréalisable. Ici encore, les FDS offrent une solution qu'HTML ignorait superbement, si ce n'est au prix d'une écriture peu orthodoxe.
Voyez ci-dessous quelques variantes :
Voici une démonstration plus parlante qu'un long discours.
Voici une démonstration plus parlante qu'un long discours.
Encore mieux ... :
Ne boudons pas notre plaisir et entrons carrément dans la fantaisie :
Vous aurez remarqué qu'il est possible d'utiliser 3 types de lignes dont les valeurs s'expriment en :
qui correspondent successivement au traçage d'une ligne supérieure, en travers ou inférieure. Il s'agit de valeurs faisant partie de la famille de propriétés de texte des FDS et qu'il convient donc d'utiliser en lieu et place d'anciens attributs analogues qui faisaient partie du langage HTML. Ici encore, les feuilles de styles offrent plus de possibilités, grâce à la séparation des langages.
En effet, vous aurez également remarqué qu'il est possible de créer un, deux ou trois traçages sur le même texte en utilisant n'importe quelle combinaison de couleur et d'utiliser également des combinaisons de couleurs pour différentes parties d'un même texte sur la même ligne ! Si vous avez suivi cette rubrique pas à pas, vous aurez sans doute compris que seul un sélecteur est capable d'offrir ces possibilités : span. La réalisation sera donc très simple : il vous suffira de créer une feuille de styles (utilisable sur d'autres pages, plus efficace et plus légère que des règles de styles internes) comportant des classes attribuant les différentes couleurs. Comme ceci, par exemple :
.textebleu {color : blue}
... etc ... pour les couleurs de texte, et
.surlignerouge {color : red ; text-decoration : overline}
.soulignerouge {color : red ; text-decoration : underline}
.traverslignerouge {color : red ; text-decoration : through-line}
... etc ... pour les couleurs ET types de lignes
que vous appelerez, selon vos besoins, dans l'écriture de votre code grâce au sélecteur "à tout faire" qu'est span.
Voici un exemple de cette écriture :
plus parlante qu'un <span class="soulignebleu"><span class="texterouge">long discours</span></span></p>
dont le résultat s'affichera par le navigateur sous cet aspect :
Attention : dans l'exemple ci-dessus, j'ai modifié délibérément la taille et le poids de la police de caractères et installé la phrase dans un calque afin que l'affichage soit clairement visible !
Attention (bis) : pour ceux ou celles que cela n'aurait pas "frappé", remarquez l'ordre dans lequel sont écrits les appels de classes : le traçage de la ligne d'abord, le texte ensuite ! Si vous désirez utiliser 2 ou 3 traçages comme dans les exemples du haut de cette page, il suffit d'écrire l'appel de leurs classes les uns à la suite des autres MAIS toujours avant celle du texte.
Voilà : c'est tout ! Etonnantes, les feuilles de styles, n'est-ce pas ! Une seule balise ... et tant d'effets !
