Formation CSS les feuilles de style

Formation CSS les feuilles de style, tutoriel & guide de travaux pratiques en pdf.

Les sélecteurs

Quelques règles de bases

L’essentiel des sélecteurs sera formé de noms d’éléments, ce qui désigne tous, ou certains éléments de ce type.
Il est possible de mettre plusieurs sélecteurs par règle, en les séparant par une virgule. La règle s’applique alors à tous les sélecteurs, comme si plusieurs règles avaient été écrites.
Un même élément du document peut recevoir différentes mises en forme par différentes règles. En général, les règles sont simplement combinées : par exemple du bleu parce que c’est un lien, et du gras parce que c’est dans un <strong>, ça donne du bleu gras.

Si les règles portent sur le même attribut (par exemple la couleur), c’est la règle la plus précise qui l’emporte. Ainsi, on peut définir l’apparence de tous les liens de la page, mais revenir ensuite pour définir l’apparence des liens de la barre de navigation.

Les sélecteurs hiérarchiques

Considérons par exemple :
table p { par-indent: 0; }

Ce sélecteur s’applique à tous les éléments de type p contenus dans un élément de type table, et seulement ceux-là. Dans cet exemple, p et table auraient pu être des sélecteurs plus compliqués (mais vous ne savez pas encore en faire). Et il est également possible de mettre trois sélecteurs à la suite ou plus.

Ce genre de règle s’applique à n’importe quel degré de descendance : dans l’exemple, le p ne sera pas directement dans le table, il y aura certainement un tr et un td entre les deux. Ça n’a pas d’importance.
Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement dans sélecteur1, ce qui peut être utile dans quelque chose de la forme :
ul > li { margin-left: 1em; }
si on n’a pas envie que la règle s’applique à un li qui serait contenu dans une sous-liste de type ol.

La classe d’un élément

En HTML, n’importe quel élément peut être affublé d’un attribut class, qui n’a aucune signification, et sert uniquement à faire le lien avec une feuille de style.
Ainsi, il peut me prendre l’envie, quand un paragraphe est un exemple, d’écrire non pas <p> tout court, mais <p class= »exemple »>. Si je ne fais rien de plus, ça ne servira à rien. Mais je peux ajouter une règle CSS comme par exemple :
p.exemple { font-family: sans-serif; } et alors tous ces paragraphes apparaîtront dans une police différente.
L’attribut class s’utilise souvent en conjonction avec les éléments div et span, qui deviennent ainsi des balises à tout faire. Il peut être plus pratique de travailler au niveau abstrait de div. Supposons que je veuille mettre un filet bleu à gauche de mes exemples. Je peux écrire :
p.exemple { border-left: solid blue 2px; }
Mais si je fais ainsi, je ne peux pas mettre un exemple de plusieurs paragraphes, parce que le filet bleu serait interrompu dans l’espace entre les paragraphes. Je ne peux pas non plus mettre une énumération ou une table dans l’exemple. Il vaut mieux alors écrire :
div.exemple { border-left: solid blue 2px; }…<div class= »exemple »><p>Ici mon exemple.</p><p>Il peut faire plusieurs paragraphes</p></div>
Je peux également utiliser .exemple tout court comme sélecteur, ce qui s’applique alors à tous les éléments de classe exemple, quel que soit leur type, et me laisse ainsi la liberté d’écrire <p class= »exemple »> dans les cas simples, et de recourir à un div dans les cas plus compliqués.
Les classes peuvent bien sûr être utilisée avec des sélecteurs hiérarchiques.