Les liens hypertexte de cet exemple sont définis avec deux styles différents, afin de pouvoir éventuellement orienter les visiteurs avec précision (par exemple une couleur pour les liens internes et une autre couleur pour les liens externes à votre site). Deux classes "ex1" et "ex2" avec les liens par défaut pouvant être maintenus mais je ne pense pas que ce soit l'idéal, à vous de juger.
Code placé dans HEAD ou fichier externe
<style type="text/css">
body { font-family: verdana, sans-serif ; font-size: 10pt ; color: black ; text-align: justify ; background-color: #FFFFFF ; }
a.ex1
{color: green ; text-decoration: none ; } = vert
a:hover.ex1
{ color: maroon ; text-decoration: underline overline ; } = marron
a.ex2
{color: #FF00FF ; } = rose
a:hover.ex2 {color: #3399FF ; text-decoration: none overline ; } = bleu turquoise
</style>
Pour bien démontrer les possibilités offertes en CSS:
- lien "ex1" qui au repos est en vert et sans soulignement, vu que "text-decoration:none" est là pour le supprimer. (voir si besoin les détails de la propriété "text-decoration, page 7e). Lors du survol le lien passe en marron, est souligné et surligné à la fois avec "text-decoration:underline overligne".
- lien "ex2" qui lui au repos est en rose et souligné d'office par défaut (correspond à "text-decoration:underline"). Mais lorsqu'il est survolé il passe à la couleur bleu turquoise et avec "text-decoration: none overligne" ce lien n'est plus souligné mais au contraire surligné.
Ne pas abuser tout de même de ces possibilités!
Vous pouvez bien entendu définir à votre goût les liens "visited" et "active" mais dans ces exemples à mon avis ils sont superflus.
Code dans BODY
<p><a href="#exercice" class="ex1"><font size="4"><b>Exemple A</b></font></a>
