La communauté ALL HTML c'est 60442 membres à ce jour dont 0 inscrits aujourd'hui et 5 depuis une semaine.

Liens et CSS

Photo de ALL HTML 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><span class="texte"><b>Propriété</b></span></td><td bgcolor="#6699cc" align=center><span class="texte"><b>Description</b></span></td></tr> <tr><td><span class="texte"><b>color:#FF0000 </b></font></td><td><span class="texte">Couleur du lien, ici rouge </span></td></tr><tr><td><span class="texte"><b>text-decoration:none </b></font></td><td><span class="texte">Le lien ne sera pas souligné </span></td></tr><tr><td><span class="texte"><b>text-decoration:underline </b></font></td><td><span class="texte">Le lien sera souligné (bas) </span></td></tr><tr><td><span class="texte"><b>text-decoration:overline </b></font></td><td><span class="texte">Le lien sera souligné (haut) </span></td></tr><tr><td><span class="texte"><b>text-decoration:overline underline </b></font></td><td><span class="texte">Le lien sera souligné (haut et bas) </span></td></tr><tr><td><span class="texte"><b>text-decoration:line-through </b></font></td><td><span class="texte">Le lien sera souligné (au milieu) </span></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>
  • ou
  • <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.

Liens sponsorisés

ACCÉS COMMUNAUTÉ

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.