CSS  
Liens et CSS

A l'aide des feuilles de style et de l'attribut class, Les liens peuvent être soulignés (simple ou double) ou non. Voici ci-dessous la liste des propriétés et leur description.

Propriété Description
color:#FF0000 Couleur du lien, ici rouge
text-decoration:none Le lien ne sera pas souligné
text-decoration:underline Le lien sera souligné (bas)
text-decoration:overline Le lien sera souligné (haut)
text-decoration:overline underline Le lien sera souligné (haut et bas)
text-decoration:line-through Le lien sera souligné (au milieu)


Note : Il est à noter que c'est propriétés et valeurs sont valables lorsque la souris n'est pas sur le lien, et lorsque qu'elle se trouve au-dessus d'un lien (attribut hover). De plus la "pseudo-class" hover fonctionne uniquement avec I.Explorer et Netscape version 6.

Exemple

Par l'intermédiaire d'une feuille de style nous pouvons redéfinir la balise A. Code ci-dessous à insérer entre vos balises <head> et </head>. La première section consiste à définir le lien sans passage de la souris, la deuxième section lors du passage de la souris au-dessus du lien.

<style>
<!--
a
{
color:#9999ff;
text-decoration:none;
}

a:hover
{
color:#FF9900;
text-decoration:underline;
}
-->
</style>


Autres exemples
a) Avec les valeurs overline et underline soit text-decoration:overline underline
b) En changeant la taille du texte (de 11px à 12 px)


Note : Vous pouvez redéfinir votre feuille de style (passer par des CLASS) et avoir accès à plusieurs type de liens pour un même documents

Exemple de code (ici a) ou b))

<style type="text/css">
<!--
a.lien1
{
color:#9999FF;
text-decoration:none;
font-weight:bold;
}
a.lien1:hover
{
color:#FF9900;
text-decoration:underline;
font-weight:bold;
}

a.lien2
{
color:#9999FF;
text-decoration:none;
font-weight:bold;
}
a.lien2:hover
{
color:#FF9900;
text-decoration:underline overline;
font-weight:bold; }
//-->
</style>


Ici l'appel à ces liens se fera de cette façon
a) <a href="http://www.allhtml.com/" class="lien1">ALL HTML</a>
ou
b) <a href="http://www.allhtml.com" class="lien2">ALL HTML</a>

Note : La feuille de style peut se trouver également dans un fichier externe (avec la balise <link>).