ALL HTML - Liens et CSS

retour

Liens et CSS

Article publié le dimanche 13 mars 2005 par ALL HTML.
Cet article est classé dans les catégories « 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.

<table border=1 bordercolor="#330033" width=489 cellpadding=3 cellspacing=1><tr><td bgcolor="#6699cc" align=center>Propriété</td><td bgcolor="#6699cc" align=center>Description</td></tr> <tr><td>color:#FF0000 </td><td>Couleur du lien, ici rouge </td></tr><tr><td>text-decoration:none </td><td>Le lien ne sera pas souligné </td></tr><tr><td>text-decoration:underline </td><td>Le lien sera souligné (bas) </td></tr><tr><td>text-decoration:overline </td><td>Le lien sera souligné (haut) </td></tr><tr><td>text-decoration:overline underline </td><td>Le lien sera souligné (haut et bas) </td></tr><tr><td>text-decoration:line-through </td><td>Le lien sera souligné (au milieu) </td></tr></table>

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 type="text/css">
<!--
  a
  {
    color:#9999ff;
    text-decoration:none;
  }

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

Autres exemples

Avec les valeurs overline et underline soit text-decoration:overline underline
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

<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