CSS Liens
Lien Texte Lien Texte Bouton Lien Bouton Lien
Stylisation des Liens CSS
Les liens HTML peuvent être stylisés avec de nombreuses propriétés CSS, comme couleur , text-decoration , background-color , font-size , font-weight , font-family , etc.).
Exemple
Stylisez un lien avec une couleur, une couleur d'arrière-plan et un poids de police en gras :
a {
color: hotpink;
background-color: yellow;
font-weight: bold;
} Stylisation des Liens Selon l'État
De plus, les liens peuvent être stylisés différemment selon l' état dans lequel ils se trouvent.
Les quatre états des liens sont :
-
:link- un lien normal, non visité -
:visited- un lien que l'utilisateur a visité -
:hover- un lien lorsque l'utilisateur passe la souris dessus -
:active- un lien au moment où il est cliqué
Lors de la définition du style pour les états des liens, il y a quelques règles d'ordre :
- :hover doit venir après :link et :visited
- :active doit venir après :hover
Exemple
Stylisez les liens selon leur état :
/* lien non visité */
a:link {
color: red;
}
/* lien visité */
a:visited {
color: green;
}
/* lien au survol de la souris */
a:hover {
color: hotpink;
}
/* lien sélectionné */
a:active {
color: blue;
} Liens CSS - 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;
} Liens CSS - Couleur d'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;
} Boutons de Lien CSS
CSS peut être utilisé pour créer des boutons de lien HTML :
Exemple
Combinez plusieurs propriétés CSS pour afficher des liens sous forme de boîtes/boutons
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;
} Exemple
Un autre exemple de création de boîtes/boutons de lien :
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;
} Plus d'Exemples
Exemple
Cet exemple démontre comment ajouter d'autres styles aux liens HTML :
a.one:link {color:red;}
a.one:visited {color:blue;}
a.one:hover {color:orange;}
a.two:link {color:red;}
a.two:visited {color:blue;}
a.two:hover {font-size:150%;}
a.three:link {color:red;}
a.three:visited {color:blue;}
a.three:hover {background:lightgreen;}
a.four:link {color:red;}
a.four:visited {color:blue;}
a.four:hover {font-family:monospace;}
a.five:link {color:red;text-decoration:none;}
a.five:visited {color:blue;text-decoration:none;}
a.five:hover {text-decoration:underline;} Exemple
Cet exemple démontre les différents types de curseurs (qui peuvent être utiles 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>