Bonjour ,
aujourdhui conformement au jour 5 de notre programe on va voir
comment styler les liens hypertextes sur une page web.
un lien hypertexte comme on l'a dit avant est un lien sur une page qui pointe sur d'autres ressources soit sur dans un meme site web(page,image,...) ou pointe sur un document exterieur du site web ,n'importe ou sur internet(compte facebook,twiiter,google,paypal payment ,mastercard...).
pour styler un lien on se base sur 4 proprietes ou attributs
1. lien en soit = a : link{}
2. quand il est clickE = a : active{}
3.quand la souris le survole = a : hover{}
4.quand il a deja ete visitE = a : visited{}
par defaut le style que donne le navigateur au lien est :
a:link{
color:blue;
text-decoration:underline;
}
a:visited{
color:indigo;
text-decoration:underline;
}
a:hover{
color:blue;
text-decoration:underline;
}
a:active{
color:red;
text-decoration:underline;
}
ceci signifi que le lien a une couleur bleue et est souligne.
quand on passe dessus il reste intact, quand on le click il change de couleur il devien rouge.
apres avoir cliquer il reste violet pour indiquer qu'il a deja ete visitE par l'utilisateur.
pour donner un style autre que celui du navigateur il faut le definir dans le css style tag :
NB: observez bien l'ordre dans la quelle ils sont definit (link,visited,hover,active)
ex:
<html>
<head>
<title>CSS3 | links styling</title>
<style>
.styled{
color:white;
text-decoration:none;
background-color:green;
padding:2px;
border:2px solid #eee;
}
.styled:visited{
color:white;
text-decoration:none;
background-color:green;
padding:2px;
border:2px solid #eee;
}
.styled:hover{
color:green;
text-decoration:none;
background-color:#eee;
padding:2px;
border:2px solid #eee;
}
.styled:active{
color:red;
text-decoration:none;
background-color:#eee;
padding:2px;
border:2px solid #eee;
}
</style>
</head>
<body>
<h1>CSS WEB LINKS EXAMPLE</h1>
<a href="#link" >clickez moi je suis le lien par defaut</a>
<br><br>
<a href="#style" class="styled">clickez moi je suis le lien avec du style</a>
</body>
</html>
No comments:
Post a Comment