Liens CSS
Avec CSS, les liens peuvent être stylisés de différentes manières.
Lien texte Lien texte Bouton Lien Bouton Lien
Liens de style
Les liens peuvent être stylisés avec n'importe quelle propriété CSS (par exemple color, font-family,
background, etc.).
Exemple
a {
color: hotpink;
}
De plus, les liens peuvent être stylés différemment selon l'état dans lequel ils se trouvent.
Les quatre états de liens sont :
a:link- un lien normal non visitéa:visited- un lien que l'utilisateur a visitéa:hover- un lien lorsque l'utilisateur passe la souris dessusa:active- un lien au moment où il est cliqué
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;
}
Lors de la définition du style pour plusieurs états de lien, il existe des 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 text-decorationpropriété 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;
}
Couleur de l'arrière plan
La background-colorpropriété 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;
}
Boutons de lien
Cet exemple montre un exemple plus avancé où nous combinons plusieurs propriétés CSS pour afficher les liens sous forme de cases/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;
}
Plus d'exemples
Exemple
Cet exemple montre comment ajouter d'autres styles aux liens hypertexte :
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;}
Exemple
Un autre exemple de création de boîtes 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;
}
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>