La communauté ALL HTML c'est 58027 membres à ce jour dont 3 inscrits aujourd'hui et 32 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é.

agenda