Mise en page avec CSS
Style Sheet
Le CSS (Cascading Style Sheets)
en français Feuille de Style en Cascade, est language à lui seul dans la monde du Web ouvert.
Il a beaucoup évolué et en est à la version 3. Le CSS3 est en cours de standardisation.
Véritable language de feuille de style, il permet de formater des éléments des pages HTML, afin d'y appliquer des style de mise en page.
Dans cet exemple, dans tous les éléments 'p', qui délimitent les paragraphes, les caractères seront écrits en rouge.
color: red;
}
Le CSS suit une règle. Celle-ci comporte :
- Un sélecteur
Nom de l'élément HTML concerné par le style. - Une déclaration
Règle déterminant le style. - Une propriété
Mise en forme proprement dite. - La valeur de la propriété
Accompagne la propriété pour sélectionner une valeur définie parmi d'autres. Le caractère ':' sépare les deux parties de la propriété.
La feuille de style se place entre les tags <head> et </head> de la page web. Deux options: ou bien les définitions sont dans cette zone directement, ou bien elles se trouvent dans un fichier à part. Elle est délimitée par une borne d'ouverture et une borne de fermeture:
... définitions ...
</style>
Avec un fichier externe, il suffira de donner le lien:
Sélection de plusieurs éléments ...
color: red;
}
... et ou plusieurs propriétés.
color: red;
width: 250px;
border: 1px solid #234526;
}
Note
Nul besoin des balises <style></style> dans le fichier externe. Seuls comptent les sélecteurs, les propriétés et leur valeur.
Différents types de sélecteurs
En plus des éléments HTML, il est possible de sélectionner d'autres éléments.
| Nom | Sélection | Exemple |
|---|---|---|
| les Balises | Tous les élément HTML | p Tous les <p> |
| Sélecteur ID | Élément dont 'l'ID est déclaré | #monID sélectionne seulement <p id="monID"> |
| Sélecteur de Classe | Éléments d'une page contenant une classe donnée. | .maClasse sélectionne seulement <p class="maClasse"> |
| Sélecteur d'attribut | Éléments HTML contenant l'attribut désigné. | a[title] sélectionne l'attribut <a title="" >le lien</a> |
| Sélecteur de pseudo-classe | Élément dans un état prècis. | a:hover sélectionne l'élément <a> seulement avec la souris au-dessus. |
Note
La liste des sélecteurs contient bien plus que ceux présentés dans ce tableau et porte sur toutes les balises HTML.
Les propriétés peuvent être utilisées dans tous les cas, bien certaines restent spécifiques à des éléments précis.
Style Sheet
La feuille de style peut être déclaré aussi bien dans la page HTML qu'être définie dans un fichier externe.
Feuille interne
Entre les balises <head> et </head>
p{
text-align: justify;
color: red;
font-size: 12pt;
}
a{
text-decoration: none;
}
</style>
Feuille externe
Le fichier 'monstyle.css' doit se trouver à l'adresse du lien afin d'être utilisable.
Note
L'intérêt essentiel tient du fait que le fichier CSS externe peut contenir des milliers de lignes sans impacter sur la taille du fichier HTML source.