Liens de style CSS


Table des matières

    Afficher la table des matières


Avec CSS, les liens peuvent être stylisés de différentes manières.


Text Link Text Link Link Button Link Button

Liens de style

Les liens peuvent être stylisés avec n'importe quelle propriété CSS (par exemple color, font-family, arrière-plan, etc.).

Exemple

  a {
  color: hotpink;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: hotpink;
}
</style>
</head>
<body>

<h2>Style a link with a color</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>


De plus, les liens peuvent être stylisés différemment selon l'état dans lequel ils se trouvent.

Les quatre états des liens sont :

  • a:link - un lien normal et non visité

  • a:visited - un lien que l'utilisateur a visité

  • a:hover - un lien lorsque l'utilisateur passe la souris dessus

  • a:active - un lien au moment où on clique dessus

Exemple

/* unvisited link */
a:link {
  color: red;
}
/* visited 
link */
a:visited {
  color: green;
}
/* mouse over link */
a:hover {
  color: hotpink;
}
/* selected link */
a:active {
   
color: blue;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>


Lors de la définition du style pour plusieurs états de lien, il existe certaines règles d'ordre :

  • a:hover DOIT venir après a:link et a:visited

  • a:active DOIT venir après a:hover



Décoration de texte

La propriété text-decoration est principalement utilisée pour supprimer les soulignements des liens :

Exemple

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Styling a link with text-decoration property</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>



Couleur de l'arrière plan

La propriété background-color peut être utilisée pour spécifier une couleur d'arrière-plan pour les liens :

Exemple

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 
</style>
</head>
<body>

<h2>Styling a link with background-color property</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>



Boutons de lien

Cet exemple montre un exemple plus avancé dans lequel nous combinons plusieurs propriétés CSS pour afficher les liens sous forme de boîtes/boutons :

Exemple

a:link, a:visited {
  background-color: #f44336;
  
color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>



Plus d'exemples

Exemple

Cet exemple montre comment ajouter d'autres styles aux hyperliens :

 a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover 
  {color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color: 
  #0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color: 
  #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: 
  #66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color: 
  #0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color: 
  #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; 
  text-decoration: none;}
a.five:hover {text-decoration: underline;}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>


Exemple

Un autre exemple de création de zones de liens/boutons :

 a:link, a:visited {
  background-color: white;
  color: black;
  
  border: 2px solid green;
  padding: 10px 20px;
  text-align: 
  center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active 
  {
  background-color: green;
  color: white;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>


Exemple

Cet exemple montre les différents types de curseurs (peut être utile pour les liens) :

 <span style="cursor: auto">auto</span><br>
<span style="cursor: 
  crosshair">crosshair</span><br>
<span style="cursor: 
  default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
  <span style="cursor: help">help</span><br>
<span style="cursor: 
  move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
  <span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: 
  nw-resize">nw-resize</span><br>
<span style="cursor: 
  pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
  <span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: 
  se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
  <span style="cursor: text">text</span><br>
<span style="cursor: 
  w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>The cursor Property</h2>

<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

</body>
</html>