Les classes de style (CSS)
Les classes et les ID
Les classes
Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe.
La définition des classes est aussi simple que celles des styles. Elle consiste à préciser la balise sélectionnée (comme pour une déclaration de style), puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets :
Selecteur_de_balise.Nom-de-la-classe {
propriété de style: Valeur;
propriété de style: Valeur;
...;
}
Où « Nom-de-la-classe » représente le nom donné à la classe.
Appel d'une classe
Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise :
Soit la classe Rouge appliquée à la balise b :
B.rouge {font: Verdana 12px; color: #FF0000; }
L'appel à cette classe dans le code se fera de la façon suivante :
<B class="Rouge"> Texte à mettre en rouge et en gras </B>
Les classes universelles
Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! On parle alors de classe universelle (parfois classe indépendante). La définition d'une telle classe se fait en précédant tout simplement le nom de la classe d'un point :
.Nom-de-la-classe {propriété de style: Valeur; propriété de style: Valeur ...}
Soit la classe « important » suivante :
.important {font-type: arial; color: red; font-weight: bold}
L'appel de cette classe peut être fait à partir de n'importe quel élément HTML pour lequel la définition est valide :
<h1 class="important">Attention ceci est un avertissement</h1> <i class="important">(prière d'en tenir compte)</i>
 |
Notez l'absence de point dans l'appel à la classe. |
Les pseudo-classes
Les pseudo-classes permettent d'affiner le style appliqué à un certain nombre de balises en définissant une réaction à un événement ou bien à la position relative de la balise au sein des autres balises.
Contrairement aux classes, le nom des pseudo-classes est prédéfini, il n'est donc pas possible de créer ses propres pseudo-classes. Il existe plusieurs types de pseudo-classes :
- Les pseudo-classes dynamiques,
- Les pseudo-classes de lien,
- Les pseudo-classes de langue,
- Les pseudo-classes first-child,
- Les pseudo-classes de page,
- Les pseudo-éléments.
Les pseudo-classes dynamiques
Les pseudo-classes dynamiques permettent de modifier le style d'une balise en fonction d'un événement (mouvement de la souris, clic, ou bien appui sur une touche du clavier). Il en existe trois :
- La pseudo-classe :hover permet d'affecter un style à la balise
sélectionnée lors d'un survol par le curseur de la souris :
A:hover {font-decoration: underline;} - La pseudo-classe :focus permet de définir un style à la balise
sélectionnée lorsque le focus lui est donné (par exemple lors d'un
clic dans un élément de formulaire) :
TEXTAREA:focus {color: #FF0000;} - La pseudo-classe :active permet de définir un style à la balise
sélectionnée lorsque l'utilisateur clique sur l'élément (entre le moment où l'utilisateur
clique sur le bouton de la souris et celui où il le relâche) :
A:active {color: #FF0000;}
|
Les pseudo-classes dynamiques ne sont pas reconnues de la même façon par tous les navigateurs. |
Les pseudo-classes de lien
Les pseudos-classes de lien sont des pseudo-classes spécifiques à la balise <A> :
- La pseudo-classe :link permet de définir le style des liens hypertextes n'ayant pas encore été consultés par le client
- La pseudo-classe :visited permet de définir le style des liens hypertextes que le client a déjà visités
|
Il est possible que certains navigateurs considèrent un lien comme n'ayant pas été visité s'il n'est pas consulté pendant une longue période de temps. |
La pseudo-classe descendante
Une pseudo-classe descendante permet d'appliquer un style à la première balise au sein d'un élément. La syntaxe de cette pseudo-classe est la suivante :
Element_Parent > Balise:first-child {style;}
Ainsi la déclaration suivante s'applique à la première balise
<A> situé dans un jeu de balises <P> </P> :
P > A:first-child {color: #00FF00;}
De cette manière, la balise <A> suivante possèdera le
style ci-dessus :
<P align="justify"> <A href="http://www.commentcamarche.net">CCM</A> </P>La balise <A> suivante ne sera par contre pas prise en compte car elle n'est pas la première balise après la balise <P> :
<P align="justify"> <BR/< <A href="http://www.commentcamarche.net">CCM</A> </P>
Les pseudo-classes de texte
Les pseudo-classes de texte permettent d'appliquer un style à une partie du texte délimité par les balises auxquelles ils s'appliquent. Ainsi les pseudo-classes de texte s'utilisent généralement conjointement avec la balise de paragraphe (<P>).
Il existe deux pseudo-classes de texte :
- :first-line : permet d'appliquer un style à la première ligne d'un paragraphe.
P:first-line { text-transform: uppercase } - :first-letter : permet d'appliquer un style à la première
lettre d'un paragraphe afin de produire un effet typographique. L'exemple suivant
par exemple double la taille et met en gras la première lettre d'un paragraphe :
P:first-letter { font-size: 200%; font-weight: bold; }
Les pseudo-classes de langue
Il est possible de définir un style en fonction de la langue du document (spécifiée dans les en-têtes HTTP ou dans les balises méta) ou de la langue d'un élément HTML ou XML (spécifié grâce à l'attribut optionnel LANG) si celle-ci est précisée.
Une pseudo classe de langue utilise la notation suivante :
- :lang(Langue). La pseudo classe de langue suivante permet de définir les guillemets
selon la notation française
HTML:lang(fr) { quotes: '« ' ' »' }
Les pseudo-classes de page
Le sélecteur @page permet de modifier les définition de mise en page d'une page HTML (taille, marge, etc.) à l'impression, telles que les marges (margin-left, margin-top, margin-right, margin-bottom), la taille (size). Il faut alors imaginer la page web comme un ensemble de pages constituant un ouvrage papier.
Les pseudo-classes de page permettent ainsi de sélectionner les pages de gauche, de droite ou bien la première page d'un document.
Il existe différentes pseudo-classes de page :
- @page:left : permet de définir les propriétés des pages de gauche.
@page:left { size: landscape; margin-left: 2cm; } - @page:right : permet de définir les propriétés des pages de droite.
@page:right { size:landscape; margin-left: 2.5cm; } - @page:first : permet de définir les propriétés de la première page d'un document.
@page:first { size: portrait; margin-left: 2.5cm; margin-right: 2cm; margin-bottom: 1cm; margin-top: 4cm;}
Les sélecteurs d'ID
Le sélecteur d'ID (identifiant) permet de faire référence à un élément unique d'une page repéré par son identifiant. Les ID servent notamment à localiser des éléments HTML grâce au JavaScript.
La syntaxe d'un sélecteur d'ID est la suivante :
#nom_ID { style }
Un tel style s'appelle de la manière suivante :
<BALISE ID="nom_ID" > ... </BALISE>
Il ne peut exister qu'un seul ID par page ! Notez également
l'absence de # dans l'appel au sélecteur d'ID.