CSS Les classes de style

Retour à la page d'accueil Page suivante Page précédente
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 que vous donnez à 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; font-color: #FF0000; }
L'appel à cette classe dans le code se fera de la façon suivante : 
<B class="Rouge"> Tete à 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. 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 ...}

Créons par exemple la classe "important" 

.important {font-type: arial; color: red; font-weight: bold}

Les pseudo-classes

Les pseudo-classes permettent d'affiner le style appliqué à un certain nombre de balise 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 pseudos-classes dynamiques,
  • Les pseudo-classes de lien
  • Les pseudo-classes de page

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 de définir 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;}
nota 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é
nota 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 first-child

La pseudo-classe first-child 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 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.

Les pseudo-éléments

Les pseudo-éléments permettent d'appliquer un style à une partie du texte délimité par les balises auxquelles ils s'appliquent. Ainsi les pseudo-éléments s'utilisent généralement conjointement avec la balise de paragraphe (<P>).

Il existe deux pseudo-éléments :

  • :first-line : permet d'appliquer un style à la première ligne d'un paragraphe. 
    P:first-line { text-transform: uppercase }
  • :first-letter : pemret 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 ID

Les ID servent à remplacer les classes lorsqu'il y a du JavaScript dans la page, car le JavaScript emploie lui aussi la syntaxe nom.nom (nom-point-nom).

La syntaxe est alors: 

#nom_ID { propriété de style: Valeur; propriété de style: Valeur ...}

On l'appelera de la manière suivante: 

<BALISE ID="nom_ID" > ... </BALISE>

On ne peut faire appel qu'à un seul même ID par page!

Page suivante