Feuilles de style : Les classes

Les prérequis :

1 - Les bases de la structure Html
2 - Mise en forme

Les contraintes des feuille de style :

Il vous est possible de reprendre directement dans un fichier CSS lesbalise tel que <input> <div> <form> ... Mais cela risque d'être assez vite dur à gerer car ce changement ce fera au niveau de tout le site. Il faut donc définir des classes

La définition d'un style était :

balise { propriété de style: valeur }
Elle devient :

balise.nom_de_classe { propriété de style: valeur }
remarquez le point entre balise et nom_de_classe

Ou, comme la mention de la balise est facultative,

.nom_de_classe { propriété de style: valeur }
Attention! L'emploi du point (.) devant le nom de classe est indispensable.

Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise.

<balise class="nom_de-classe"> .... </balise>
Exemple :

Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je crée la classe .Gbleu :

.Gbleu { font-weight: bold; font-color: #000080 }

Et dans le document Html, il suffit d'appeler la classe quand cela se révèle nécessaire :

<P class="Gbleu"> ... blabla ... </P>
<H1 class="Gbleu">Titre 1</H1>
<TABLE><TR><TD class="Gbleu">cellule</TD></TD>...
Définition des pseudo classesUne pseudo classe est un ensemble d'éléments qui répondent à un même critère de contexte forme.
Cette définition ne s'applique concrètement qu'à un cas particulier, celui de la balise A, la balise des liens.
Celle ci peut en effet connaître plusieurs contextes de formes selon que le lien est inactif, visité, ou en train d'être visiter.
Concrètement on peut définir alors pour chacun des états de la balise une mise en forme particulière, voici comment:

Exemple:

A:link {font-family:Arial; color:"#0099FF"; font-size:12px; cursor:text;}
A:visited {font-family:Arial; color:blue; font-size:12px; cursor:text;}
A:active {color:red;}
A:hover {color:red; text-decoration:none;}Notion des IDLorsqu'on désire utiliser les feuilles de style avec du Javascript on utilise les ID (appelés les identifiants).
Les ID fonctionnent exactement comme les classes.
La syntaxe est :

#nom_de_ID { propriété de style: valeur }
Et pour l'appeler :

<balise id="nom_de_ID"> .... </balise>
Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page. Ainsi,

Pour #Classe{ ... }

<P id=Classe> est correct.
Mais si on rencontre dans la même page

<H1 id=Classe> ce n'est plus correct !
Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts, oubliez au plus vite ID et utilisez exclusivement les classes.Le principe de l'héritageCertains éléments de la page HTML héritent des propriétés des styles définis. Supposons le style suivant où la couleur turquoise en arrière-plan est appliquée à la balise H1:
Lorsque nous appliquons la balise H1 dans le corps de la page, il arrive fréquemment que nous y combinions d'autres balises comme ceci :
<H1> Le principe de <I> l'héritage </I> </H1>
Nous nous retrouvons avec la balise italique à l'intérieur de la balise H1. En conséquence, la balise italique héritera des propriétés du style H1 et affichera également la couleur de fond turquoise. Le même principe s'applique à beaucoup d'autres styles.

Prenons l'exemple de 3 styles imbriqués :

Le Style 1 se caractérise par son propre style
Le Style 2 se caractérise par son propre style et celui du style 1
Le Style 3 se caractérise par son propre style et ceux des styles 1 et 2
Les feuilles de style en cascade

En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" ou d'ordre de priorité.
La concurrence entre plusieurs éléments de style peut provenir des différentes possibilités de localisation de feuilles de style :

SPAN

SPAN est une balise de marquage, qui va considérer une petite portion particulière de texte. Elle va servir à mettre en valeur des citations, des exemples, des extraits ...
On peut l'utiliser de la même manière que DIV avec des feuilles de style. Elle s'utilise également couramment avec des feuilles de style intra-lignes.

Ainsi, si je voulais écrire :

Toto est beau.
Le code serait :

<STYLE type="text/css">
.element {font-size: x-large; color: navy}
</STYLE>
Toto est <SPAN class=element>beau</SPAN>.