Team-Masters.com
Que du Gratuit pour Webmasters
Les pseudo-classes
Les pseudo-classes constituent des classes prédéfinies en CSS. Elles s’appliquent à certains éléments dont l’état peut changer. Les plus connues et plus populaires concernent les liens hypertextes qui possèdent plusieurs états : visité, actif et non visité. Aussi, chacun possède-t-il une pseudo-classe correspondante, soit, visited, active et link. Il existe également la pseudo-classe ":hover" qui indique que le lien est survolé. À titre d’exemple, définissons les couleurs des liens selon chaque état :
a:link { color: blue }
a:visited { color: green }
a:hover {color: red}
a:active { color: orange }Ici, le lien normal sera bleu (link), quand on le survolera (hover) il deviendra rouge, quand on clique dessus (active) et qu’on maintient le clic, il est orange, et une fois le lien cliqué (visité) il devient vert.
N.B : il est important de respecter « l’ordre d’écriture » pour que le tout fonctionne. la pseudo-classe ":hover" doit suivre ":link" et ":visited" pour fonctionner ; de même ":active" doit suivre ":hover".
La syntaxe des pseudo-classes est la suivante :
[sélecteur] :[ pseudo-classe] [déclaration]
Vous pouvez donc donner les styles que vous désirez à vos liens à l’aide des pseudo-classes pour rendre vos pages plus attractives. Toutefois, les pseudo-classes donnent encore plus de flexibilité. Nous pouvons effectivement modifier l’apparence des liens à l’aide de différentes propriétés, telles que ci-dessous :
a:link {
color: blue;
font-style: italic ;
}
a:visited {
color: green;
font-weight: bold;
}
a:active {
color: orange;
text-decoration: underline;
}La norme CSS1 définit des pseudo-classes uniquement pour le sélecteur A (anchor). Pour cette raison, nous pouvons même omettre le sélecteur "a" comme suit :
:link {color: blue}
Mais CSS2 va encore plus loin et prévoit même qu’on puisse utiliser la pseudo-classe "hover" sur d’autres éléments comme la balise HTML "li" par exemple. Malheureusement, Internet Explorer ne l’applique pas sur d’autres balises que "a".
Des liens qui ont encore plus de style
Mais on peut encore aller plus loin en combinant des classes et des pseudos-classes. En effet, supposons que nous voulons avoir plusieurs styles pour les liens d’une même page : un style pour les liens du menu, un style pour la navigation, un autre pour les liens du corps de page.
Cela est évidemment possible en combinant des classes à nos pseudo-classes "link", "visited", "hover" et "active", l’essentiel étant que le nom de la classe précède celui de la pseudo-classe :
/*style pour les liens du menu */
.menu:link {
font-family: Verdana, Arial, Helvetica;
text-decoration: none;
color: pink;
}
.menu:visited {
font-family: Verdana, Arial, Helvetica;
text-decoration: underline;
color: pink;
}
.menu:hover {
font-family: Verdana, Arial, Helvetica;
font-weight: bold;
text-decoration: underline overline;
color: red;
}
/*style pour les liens du corps de page */
.page:link {
font-family: Verdana, Arial, Helvetica;
text-decoration: underline;
color: blue;
}
.page:visited {
font-family: Verdana, Arial, Helvetica;
text-decoration: underline;
color: grey;
}
.page:hover {
font-family: Verdana, Arial, Helvetica;
font-weight: bold;
text-decoration: underline overline;
color: orange;
}Dans nos liens du menu, il suffira pour appliquer le style choisi, il suffira de faire appel à la classe correspopndante : <a class="menu" href="......">Menu1</a>
Pour nos liens dans notre texte de page, agir de la même façon avec le style choisi : <a class="page" href="......">Lire la suite</a>
C’est terrible non les CSS ? Alors qu’attendez vous ? Au travail !!!!
Voyons maintenant comment les CSS peuvent nous être utiles à la mise en forme de pages web : nous allons aborder la notion de boîtes.
26 décembre 2004
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
