CSS - Les classes de style

Feuilles de style en cascade (CSS)
Feuilles de style
Syntaxe des styles
Implantation des CSS
Classes et ID
Unités CSS
Couleurs CSS
Boîtes et bordures
Positionnement CSS
Propriétés CSS
A lire aussi
HTML
Javascript
PHP
AJAX
RSS
Podcast
Nom de domaine
Hébergement
Référencement

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>

nota 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 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.

Trucs & astuces pertinents trouvés dans la base de connaissances

22/02 07h12	Récupérer le style Windows XP (Windows XP)
17/02 15h24	Utiliser des styles visuels (Windows XP)
03/11 00h00	Chemin et nom de stockage de feuille de calcul (Excel)
Plus d'astuces sur « Feuille de style »

Discussions pertinentes trouvées dans le forum

04/12 14h10	Modifier la feuille style CSS	Webmastering	04/12 23h25->Gihef	3
20/01 21h14	[Impossible de modifier feuille de style CSS]	Webmastering	22/01 14h46->Gihef	3
17/11 15h37	Récupérer le code d'une feuille de style css	Webmastering	23/02 18h56->bonobo_style	14
12/06 17h10	lier une feuille de style	Développement	12/06 18h10->fabrice	10
20/02 18h56	feuille de style avec Mozilla-firefox	Webmastering	22/02 11h07->Zep3k!GnO	8
13/05 15h15	Feuille de style	Développement	14/05 11h53->Chaps	6
23/01 11h03	Feuille de style CSS	Webmastering	14/02 10h38->megara	5
15/09 10h55	"logo actif " dans une feuille de style	Webmastering	15/09 15h38->Gihef	5
14/12 08h22	Feuille de style	Windows	15/12 15h08->delirious	4
14/08 21h58	Police de caractère & feuille de style	Développement	19/08 15h25->gsx	4
Discussion fermée Problème résolu		Plus de discussions sur « Feuille de style »