FAQ CSS : Les liens

Page d'introduction

Introduction

Que vais je trouver?

Vous trouverez diverses questions sur les feuilles de style css, pour la présentation des liens qui sont définis en HTML ou en XTHML par la balise A.
Descendre
Remonter

Spécifier l'aspect général des liens

Explication

Il est possible de spécifier l'aspect global des liens avec des feuilles de style css à la place les attributs HTML alink, link, vlink de la balise HTML BODY ou pour le XHTML.
Script CSS :
Exemple de code :
<style>
/*Lien nornal */
  A:link { /*Propriétés css */ }
/*Lien déja visité */
  A:visited{ /*Propriétés css */ }
/*Lien actif (quand on clique sur le lien) */
  A:active{ /*Propriétés css */ }
/*Lien survolé (quand la souris est sur le lien) */
  A:hover{ /*Propriétés css */ }
</style>

active
hover
link
visited
Descendre
Remonter

Spécifier l'aspect d'un lien

Explication

Vous pouvez en feuille de style css spécifier des propriétés css pour un lien spécifique. Pour cela vous devez d'abord, soit donner un identifiant à votre balise lien (A) avec l'attribut HTML ou XHTML ID, soit lui assigner une classe avec l'attribut HTML ou XHTML CLASS.
Code HTML ou XHTML:
Exemple de code :
<a href="#" id="identifiant">Lien</a>
<a href="#" class="maclasse">Lien</a>

Exemple de code :
<style>
/*Lien nornal */
  #identifiant:link { /*Propriétés css */ }
/*Lien déja visité */
  #identifiant:visited{ /*Propriétés css */ }
/*Lien actif (quand on clique sur le lien) */
  #identifiant:active{ /*Propriétes css */ }
/*Lien survolé (quand la souris est sur le lien) */
  #identifiant:hover{ /*Propriétes css */ }

/*Lien nornal */
  .maclasse:link { /*Propriétés css */ }
/*Lien déja visité */
  .maclasse:visited{ /*Propriétés css */ }
/*Lien actif (quand on clique sur le lien) */
  .maclasse:active{ /*Propriétés css */ }
/*Lien survolé (quand la souris est sur le lien) */
  .maclasse:hover{ /*Propriétés css */ }
</style>
active
hover
link
visited
Descendre
Remonter

Des liens non soulignés

Explication

Vous pouvez en feuille de style css spécifier qu'un lien ne soit pas souligné. Pour cela vous devez utiliser la feuille de style css text-decoration qui permet de spécifier le surlignement, soulignement,...
Exemple de code :
text-decoration:none;
Pour appliquer la feuille de style css text-decoration sur tous les liens, vous devez utiliser comment identifiant le nom de la balise.
Exemple de code :
<style>
  /* Identifiant{ Propriétés css } */
  A{text-decoration:none;}
</style>
Code HTML ou XHTML:
Exemple de code :
<a href="#">Lien</a>

active
color
cursor
font
font-family
font-size
font-style
font-variant
font-weight
link
text-decoration
visited
Descendre
Remonter

La propriété de feuille de style FONT-FAMILY css permet de spécifier la police (fonte) du texte.font-family : Times New Roman, Times, serif; La propri...[Voir]La propriété de feuille de style css FONT-STYLE permet de spécifier le style du texte, c'est à dire tout ce qui concerne l'inclinaison (italique) de l...[Voir]La propriété de feuille de style css FONT permet de spécifier le style : taille, épaisseur et la police (font),...font : 14px Arial, Helvetica, sans-s...[Voir]La propriété de feuille de style css FONT-WEIGHT permet de spécifier la graisse de la fonte (mettre en gras).font-weight:bold; font-weight:800; La pro...[Voir]La propriété de feuille de style css FONT-SIZE permet de spécifier la taille de la fonte ou police.font-size:XX-small; font-size:15px; La propriété fe...[Voir]La propriété de feuille de style COLOR css permet de spécifier la couleur d'un texte..identifiant{ color:#ffffff; } La propriété de feuille de style...[Voir]La propriété de feuille de style css TEXT-DECORATION permet de spécifier les décorations d'un mot par exemple si le mot est souligné ou surligné..iden...[Voir]La pseudo-classe de feuille de style css :link permet de spécifier le style d'un lien (<a>lien</a>) non visité.<STYLE> a:link { text-decoration:under...[Voir]La pseudo-classe feuille de style css :visited permet de spécifier toutes les propriétés css liées à la fonte, et à la décoration de texte (gras, soul...[Voir]La pseudo-classe feuille de style css :active permet de spécifier toutes les propriétés liées à la fonte (police, taille), à la décoration de texte (g...[Voir]La pseudo-classe de feuille de style css :hover permet de spécifier toutes les propriétés liées à la fonte, et à la décoration de texte (gras, soulign...[Voir]La propriété de feuille de style css CURSOR permet de spécifier la forme du curseur..identifiant{ CURSOR : nw-resize; } La propriéte de feuille de st...[Voir]La propriété de feuille de style css FONT-VARIANT permet de spécifier la case du texte (minuscule, majuscule)..identifiant{ font-variant:small-caps; ...[Voir]