WEB design with CSS: styled links
1. Click on this link to watch the video on "decorated links"
Cliquer-ici pour regarder la vidéo sur les "liens décorés"
2. Adjust in your "mystyle.css" file the style of the various possible states of your hypertext links.
Régler dans votre fichier "mystyle.css" le style des divers états possibles de vos liens hypertexte.
Example:
/* couleur du lien au départ et après être cliqué */
a:link, a:visited {
margin-left: 25%;
margin-right: 25%;
margin-top: 50px;
background-color: black;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
border: 3px solid grey;
border-radius: 12px;
display: block;
}
/* survol du lien et pendant click */
a:hover, a:active {
background-color: plum;
}
3. Then move on to the "Display" part. Those interested can read what is below this text before moving on to the next chapter.
Passer ensuite à la partie "Display". Les personnes intéressées peuvent lire ce qui est en dessous de ce texte avant de passer au chapitre suivant.
Résumé du chapitre:
Les liens hypertextes peuvent être stylisés en utilisant les propriétés color, background-color, etc..
De plus on peut donner un style différent en fonction de l'état du lien, on distingue 4 cas:
a:link état normal, la page pointée par le lien n'a pas encore été visitée.
a:visited la page pointée par le lien a été visitée.
a:hover le lien est survolé avec la souris.
a:active le lien vient d'être cliqué.
Exemple de réglages CSS:
- Avant visite et après:
a:link, a:visited {
margin-left: 25%; /* marge à gauche 1/4 du body */
margin-right: 25%; /* marge à droite 1/4 du body */
margin-top: 50px; /* placer le lien 50 px en dessous de l'élément précédent */
background-color: hotpink; /* couleur fond rose*/
color: white; /* couleur texte blanc */
padding: 14px 25px; /* marges intérieures*/
text-align: center; /* le texte est centré */
text-decoration: none; /* le lien n'est pas souligné*/
border: 3px solid yellow; /* bordure solide jaune*/
border-radius: 12px; /* bord arrondi */
display: block; /* afficher le lien comme un block*/
}
Résultat:
Pendant le survol et lors d'un clic sur le lien:
a:hover, a:active {
background-color: plum;
}
Créé avec HelpNDoc Personal Edition: Produire facilement des livres électroniques Kindle