Les pseudo-formats
Les pseudo-formats (ou pseudo-propriétés) fonctionnent comme des conditions d'application des propriétés CSS. Avec cet outils il est possible par exemple de modifier l'apparence d'un lien qui à déjà été visité ou l'apparence d'un texte ou d'une image lorsque le pointeur de la souris survole un élément.
Un pseudo-format ne s'utilisent pas exactement comme une propriété CSS (sinon on l'appellerai propriété CSS...). Il s'applique à une balise, une class ou un id de la manière suivante:
{
background-color: red;
}
Dans cet exemple, lorsque le curseur de la souris passe sur un lien, un fond rouge apparaît sous le lien.
Les pseudo-formats réservés aux liens
Les pseudo-formats que nous allons voir ne s'appliquent que sur les liens.
- :link : concerne les liens qui n'ont pas encore été visités
- :visited : celle si est réservé aux liens ayant déjà été visités
- :hover : le CSS sera appliqué lorsque le curseur de la souris passe sur le lien
- :active : le CSS sera appliqué lorsque l'on clique sur le lien
- :focus : le CSS sera appliqué lorsque le lien sera sélectionné
Avec touts ces pseudo-formats, vous pouvez maintenant modifier les couleurs par défaut des liens qui ne plaisent pas forcément à tout le monde...
Les autres pseudo-formats
Les propriétés suivantes peuvent être appliquées à la plupart des balises (ceci dépend du résultat que vous souhaitez).
- :hover : la même propriété que pour les liens, elle permet d'appliquer le CSS lorsque le curseur de la souris est sur l'élément concerné
- :focus : il s'agit aussi de la même propriété que pour les liens, le CSS est appliqué quand l'élément est sélectionné
- :first-letter : permet de modifier l'apparence de la première lettre contenu entre les balises concernées. En général ce pseudo-format est utilisé pour les paragraphes mais il est possible de l'appliquer sur toutes les balises contenant du texte.
- :first-line : permet de modifier l'apparence de la première ligne, généralement utilisé dans les paragraphes
- :before : Ce pseudo-format est un peu différent, il permet d'ajouter un contenu devant la balise sur laquelle est
appliqué le pseudo-format de la manière suivante:
h1: beforeAvec ces lignes de code, chaque titre de type h1 sera précédé du texte "Titre h1: ". Il est possible de remplacer le texte par une image avec un content: url("image.jpg");
{
content:"Titre h1: ";
}
- :after : Même principe que :before sauf que cette fois-ci, le contenu sera ajouté après la balise concernée.
