01 - Introduction :
Les feuilles de styles (ou CSS, Cascading Style Sheets) permettent de créer des présentations surprenantes, des mises en pages très précises en modifiant les balises existantes, ou en créant de nouvelles dont les propriétés sont à votre choix.
02 - Insertion d'une feuille de styles :
Une feuille de style s'insère grâce à la balise <STYLE>
Nous l'écrirons :
2identifiant { une de vos définitions des styles}
3</style>
Cette balise se trouve généralement dans la balise <HEAD> et en dessous de la balise <TITLE>.
Mais il est possible de le mettre directement dans la balise.
Nous l'écrirons alors :
Je dirais qu'il existe trois manières d'imposer un style.
- La première consiste à mettre le style directement dans la balise.
- La seconde consiste à imposer un style à un endroit précis du document HTML, pour cela nous utiliserons la balise <DIV> ou <SPAN> pour délimiter l'endroit.
- La troisième consiste à imposer un style à toutes les balises du même type (<P> par exemple)
et de personnaliser chaque balise en lui rajoutant des caractéristiques propre.
Pour cela nous utiliserons l'attribut CLASS.
03 - Comment atteindre la zone :
On peut atteindre la balise de trois façons :
- Par le Nom de la Balise.
- Grâce à l'attribut ID.
- Grâce à l'attribut CLASS.
01 - Nom balise :
Par exemple, nous voulons que ce qui se trouve dans la balise <ADDRESS> soit souligné.
Nous mettrons dans la feuille de style :
Le code HTML sera :
Cette technique est embêtante lorsque l'on possède plusieurs balises <ADDRESS>, car toutes seront soulignées. (voir plus bas CLASS)
02 - ID :
Nous mettrons dans la feuille de style :
Le code HTML sera :
Cette technique est intéressante, puis qu'elle permet d'assigner le soulignement à toutes les balises ayant comme ID "nom" ou plutôt à la balise ayant comme ID "nom" car la valeur de ID des unique.
03 - CLASS :
Nous mettrons dans la feuille de style :
Le code HTML sera :
Cette technique est intéressante, puis qu'elle permet d'assigner le soulignement à toutes les balises <address> ayant comme class "nom".
CLASS permet de créer des "sous styles", par exemple :
Vous voulez que tous vos paragraphes aient une taille de police de 12 px, mais votre second paragraphe à une couleur verte et votre troisième paragraphe est souligné.
Vous allez donc crée dans votre feuille de style créer un style pour que tout les paragraphes soient en taille 12px :
Puis créer deux sous classes pour les deux autres paragraphes :
2p.nom1 { text-decoration:underline; }
Le code HTML sera :
2<p class="nom"> votre paragraphe </p>
3<p class="nom1"> votre paragraphe </p>
 |
 |
 |