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

<a href="http://www.allhtml.com/" class="lien1">ALL HTML</a>

<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>).

VOS COMMENTAIRES ...

Commenter cette publication

Aucun commentaire pour le moment ...

Commenter cette publication

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Forums de discussions associés

Discutez et échangez sur ce thème dans notre forum XHTML - HTML - CSS.

01/09/2010 à 17 h 49 ecoles en france qui font de la formation sur le web (0 réponse)
25/08/2010 à 11 h 36 Les bases du HTML (débutant) (1 réponse)
23/08/2010 à 18 h 48 balise de creation de menu (5 réponses)
20/08/2010 à 08 h 30 Aide Html (0 réponse)
15/08/2010 à 21 h 05 Problème d'affichage au bout de quelques secondes (1 réponse)

all html : Le portail des webmaster

Liens et CSS

VOS COMMENTAIRES ...

Forums de discussions associés

Liens sponsorisés