Liens de style CSS
Avec CSS, les liens peuvent être stylisés de différentes manières.
Lien de texte Lien de texte Bouton de lien Bouton de lien
Liens de style
Les liens peuvent être stylisés avec n’importe quelle propriété CSS (par exemple color, font-family,
backgroundetc.).
De plus, les liens peuvent être stylisés différemment selon ce que État ils sont dans.
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
/* lien non visité */
un lien {
La couleur rouge;
}
/* lien visité */
un : visité {
la couleur verte;
}
/* souris sur le lien */
un: survolez {
couleur : rose vif ;
}
/* lien sélectionné */
un : actif {
Couleur bleue;
}
Essayez-le vous-même »
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
Le text-decoration La propriété est principalement utilisée pour supprimer les soulignements des liens :
Exemple
un lien {
décoration de texte : aucune ;
}
un : visité {
décoration de texte : aucune ;
}
un: survolez {
décoration de texte : souligné ;
}
un : actif {
décoration de texte : souligné ;
}
Essayez-le vous-même »
Couleur de l’arrière plan
Le background-color La propriété peut être utilisée pour spécifier une couleur d’arrière-plan pour les liens :
Exemple
un lien {
couleur de fond : jaune ;
}
un : visité {
couleur de fond : cyan ;
}
un: survolez {
couleur de fond : vert clair ;
}
un : actif {
couleur de fond : rose vif ;
}
Essayez-le vous-même »
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:lien, a:visité {
couleur de fond : #f44336 ;
Couleur blanche;
rembourrage : 14px 25px ;
aligner le texte : centrer ;
décoration de texte : aucune ;
affichage : bloc en ligne ;
}
a:hover, a:actif {
couleur de fond : rouge ;
}
Essayez-le vous-même »
Plus d’exemples
Exemple
Cet exemple montre comment ajouter d’autres styles aux liens hypertexte :
a.one : lien {couleur : #ff0000 ;}
a.one : visité {couleur : #0000ff ;}
a.one:hover {couleur : #ffcc00;}
a.two:link {couleur : #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}
a.trois:lien {couleur : #ff0000;}
a.trois : visité {couleur : #0000ff ;}
a.trois: survolez {arrière-plan : #66ff66;}
a.four:lien {couleur : #ff0000;}
a.four : visité {couleur : #0000ff ;}
a.four:hover {font-family: monospace;}
a.cinq : lien {couleur : #ff0000 ; décoration de texte : aucune ;}
a.cinq : visité {couleur : #0000ff ; décoration de texte : aucune ;}
a.five:hover {text-decoration: underline;}
Essayez-le vous-même »
Exemple
Un autre exemple de création de boîtes de liens/boutons :
a:lien, a:visité {
couleur de fond : blanc ;
la couleur noire;
bordure : 2px vert solide ;
rembourrage : 10px 20px ;
aligner le texte : centrer ;
décoration de texte : aucune ;
affichage : bloc en ligne ;
}
a:hover, a:actif {
couleur de fond : vert ;
Couleur blanche;
}
Essayez-le vous-même »
Exemple
Cet exemple montre les différents types de curseurs (peut être utile pour les liens) :
auto
réticule
par défaut
e-resize
aide
déplacer
n-resize
ne-resize
nw-resize
pointeur
progrès
s-resize
se-resize
sw-resize
texte
w-resize
attendre
Essayez-le vous-même »
#Liens #style #CSS