Gestion des liens en Css - FAQ CSS

Comment gérer les liens en CSS

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 .

Particularité de propriétes CSS de balise A

Sur une balise (X)HTML , le navigateur souligne le texte et le met généralement en couleur bleu.
La propriété CSS n'est pas héritée du parent.
La propriété CSS est héritée du parent, sauf si elle est none.

Vous devez donc spécifier la propriété CSS text-decoration et la propriété CSS color sur le lien.

Exemples de Css :
<style>
#conteur{ 
  /* n'a pas d'impact sur la balise HTML A*/
  color:green; text-decoration : none;
  }
#conteur a{
  /* a un impact sur la balise HTML A*/ 
  color:green; text-decoration : none;
}
</style>
<div id="conteur"><a href="monlien.html">texte de lien</a></div>

Comment spécifier l'aspect général des liens en Css?

Spécifier l'aspect général des liens grâce aux feuilles de style Css

Avant de charter un lien déclaré avec la balise (X)HTML A, il est important de comprendre les différents états qui le compose :

  • l'état :link : qui représente l'état normal une balise a de type lien (non visité : non présente dans l'historique de navigation) à l'affichage de la page.
  • l'état :visited : qui représente l'état quand le lien a été visité et présent dans l'historique du navigateur.
  • l'état :hover : qui représente l'état quand le curseur survole le lien.
  • l'état :focus : qui représente l'état quand le lien est sélectionné via la tabulation ou enfoncé avec la souris.
  • l'état :active : qui représente l'état quand l'internaute enfonce ce dernier avec le curseur ou avec une action clavier (touche entrée).
Exemple de code CSS pour un lien :
/* Respecter l'ordre des états, c'est celui conseillé par le W3c */
/* Lien normal */
  A:link { /*Propriétés Css */ }

/* Lien déjà visité */
  A:visited{ /* Propriétés Css de type couleur seulement */ }

/* Lien survolé (quand la souris est sur le lien) */
  A:hover{ /* Propriétés Css */ }

/* Lien qui a le focus (via tabulation ou clique sur le lien) */
  A:focus{ /* Propriétés Css */ }

/* Lien actif  (quand on clique sur le lien)  */
  A:active{ /* Propriétés Css */ }

L'état :visited hérite des propriétés Css de l'état :link
Les états :active, :hover, :focus :

  • héritent des propriétés Css des états de :visited et :link
  • peuvent être déclenchés en même temps donc l'ordre de leur déclaration peut être important dans l'héritage d'une propriété Css :
    :active :focus :hover
    x x x
    x x  
Le code Css ci-dessus permet de spécifier l'aspect global des liens avec des feuilles de style Css à la place les attributs HTML alink, link, vlink, visited, focus de la balise HTML BODY ou pour le XHTML.

Comment modifier l'aspect d'un lien spécifique en Css?

Modifier l'aspect d'un lien grâce aux feuilles de style Css

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 : 
<a href="#" id="identifiant">Lien</a>
<a href="#" class="maclasse">Lien</a>

Code CSS : 
/*Lien nornal */
  #identifiant:link { /* Propriétés Css */ }
/* Lien déjà visité */
  #identifiant:visited{ /* Propriétés Css */ }
/* Lien survolé (quand la souris est sur le lien) */
  #identifiant:hover{ /* Propriétés Css */ }
/* Lien qui a le focus (via tabulation) */
  #identifiant:focus{ /* Propriétés Css */ }
/* Lien actif  (quand on clique sur le lien, ou l'active via le clavier )  */
  #identifiant:active{ /* Propriétés Css */ }

/* Lien nornal */
  .maclasse:link { /* Propriétés Css */ }
/* Lien déja visité */
  .maclasse:visited{ /* Propriétés Css */ }
/* Lien survolé (quand la souris est sur le lien) */
  .maclasse:hover{ /* Propriétés Css */ }
/* Lien qui a le focus (via tabulation) */
  .maclasse:focus{ /* Propriétés Css */ }
/* Lien actif  (quand on clique sur le lien, ou l'active via le clavier )  */
  .maclasse:active{ /* Propriétés Css */ }
Il existe d'autres moyen pour cibler un élément. Je vous invite à consulter le cours dédié aux sélecteurs.

Comment supprimer le soulignement d'un lien en Css?

Supprimer le soulignement d'un lien grâce aux feuilles de style Css

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

Code CSS : 
text-decoration:none;
Pour appliquer la feuille de style Css sur tous les liens, vous devez utiliser comment identifiant le nom de la balise.

Code CSS : 
  /* Identifiant{ Propriétés Css } */ 
  A{text-decoration:none;}

Code HTML ou XHTML:
<a href="#">Lien</a>

Comment supprimer la bordure d'une image dans un lien en Css?

Supprimer la bordure d'une image d'un lien grâce aux feuilles de style Css

Certains navigateurs rajoutent une bordure aux images contenues dans un lien. Pour supprimer cette bordure, vous devez utiliser la propriété Css border pour la mettre à none.

Exemple d'écriture pour supprimer la bordure d'une image de lien en Css : 
a img{
/* Applique la suppression de bordures à toutes les images des liens */
border : none;
}
.ciblage-lien img{
/* Applique la suppression de bordures à toutes les images d'un lien précis */
border : none;
}

Comment cibler un lien en fonction de son attribut target en Css

Cibler un lien en fonction de son attribut target grâce aux feuilles de style Css

Si pour une raison quelconque, vous désirez charter différemment vos liens en fonction de la valeur de l'attribut target de la balise (X)HTML , utiliser le sélecteur d'attribut [target=valeur].

Exemple d'écriture pour charter de lien ayant un attribut target=_blank en Css : 
a[target=_blank]:link { }
a[target=_blank]:visited{ } 
a[target=_blank]:hover{ } 
a[target=_blank]:focus{ }
a[target=_blank]:active{ }

Exemple d'écriture pour charter de lien ayant un attribut hreflang=fr ou hreflang=fr-* en Css : 
a[hreflang|=fr]:link{ }
a[hreflang|=fr]:visited{ } 
a[hreflang|=fr]:hover{ } 
a[hreflang|=fr]:focus{ }
a[hreflang|=fr]:active{ }

Comment ajouter la langue du document de destination dans le texte du lien?

Ajouter la valeur de l'attribut hreflang dans le texte du lien en Css

Si votre lien a un attribut (X)HTML hreflang, vous pouvez le récupérer et le mettre par exemple à la fin texte du lien. Pour cela vous devez utiliser le sélecteur d'attribut [target=valeur] et la propriété Css content introduite avec :after.

Exemple d'écriture d'ajout de l'attribut hreflang dans le texte du lien en Css : 
a:link[hreflang]:after{ content:" (" attr(hreflang) ")"}

Exemple :

Code Html de l'ajout de l'attribut hreflang dans le texte du lien : 
<style>
  a:link[hreflang]:after{ content:" (" attr(hreflang) ")"} 
</style>
<a href="http://w3c.org" target="_blank">W3c</a> | 
<a href="http://w3c.org.br" target="_blank" hreflang="br">W3c</a> | 
<a href="http://w3c.de" target="_blank" hreflang="de">W3c</a> | 
<a href="http://w3c.it" target="_blank" hreflang="it" >W3c</a>

W3c | W3c | W3c | W3c

Comment cibler l'ancre de l'url ?

Appliquer un style à l'ancre présent dans l'url de la page

Quand vous cliquer sur un lien avec une ancre (hash), vous pouvez spécifier un style à la balise qui est ciblée par l'ancre en utilisant la pseudo-classe CSS .
Voir un exemple de ciblage de l'ancre en Css

Exemple d'écriture de :target en Css
<div id="mon-ancre-cible">
  Balise <span>cible</span>
</div>

Exemple d'écriture de la pseudo-classe CSS :target en Css
#mon-ancre-cible:target { border : 1px solid red } 
#mon-ancre-cible:target span{ color : red }