Langage CSSLiens hypertexte
Exemple de réalisation CSS
Définition de feuilles de style de pseudo éléments sur des liens hypertext
- L'objectif est de réaliser une définition de feuilles de style de pseudo éléments sur des liens hypertexte représentés en HTML par la balise "a".
Des pseudo éléments sont des éléments d'un fichier HTML qui ne se laissent pas décrire comme par exemple un "lien qui n'a pas encore été visité".
Pour définir de tels pseudo éléments il y a une syntaxe déterminée dans le langage des feuilles de style CSS (Cascading Style Sheet). Vous allez réaliser un style sur tous vos liens hypertext avec le code ci-dessous.
Source à copier/coller dans votre code html entre les balises <head> et </head> :
<style type="text/css">
/* www.easy-micro.org */
a {
color:#000088 ;
text-decoration: none;
}
a:link {
color:#000088 ;
text-decoration: none;
}
a:hover {
color:#ff0000 ;
text-decoration: underline;
text-transform: none;
}
</style>
Voici l'effet
Chaque lien hyper texte de votre page sera par défaut en bleu marine (color:#000088) et sans décoration (text-decoration: none). Au survol de la souris il deviendra rouge (color:#ff0000) et se transformera en souligné (text-decoration: underline).
Explication
- La balise a correspond au lien hyper text dans son état normal (a = ancre).
- a:hover correspond au lien survolé (hover) par la souris.
- text-decoration correspond à la décoration du texte et peu prendre les valeurs : none (sans), underline (souligné), overline (surligné) et line-through (barré).
- text-transform correspond à la transformation du texte et peu prendre les valeurs : none (sans), uppercase (majuscule), lowercase (minuscule) et capitalize (force en majuscule le premier caractère).
- font-weight correspond à l'épaisseur de police (font) et peut prendre les valeurs normal (sans), bold (gras) ou lighter (fin).
- background-color : correspond à la couleur de fond (ex jaune: #ffff00). La couleur est ici exprimé en hexadécimale: les deux premier chiffres pour le Rouge, puis le Vert, puis le Bleu (de 00 à 99 puis de AA à FF pour chacun). Soit #RRVVBB [Plus d'infos...].
Pour aller plus loin
- Voir les exemples d'application de CSS sur Css Zen Garden (Anglais),
- CSS Play (Anglais)
- Self Html (Français).
- Voir aussi le validateur officiel en ligne de CSS: Jigsaw W3.
