Cascading Style Sheets : feuilles de style en cascade.
Besoin
Définir l'apparence des balises HTML.
Analyse
Un style est un ensemble de paramètres déterminant le rendu visuel d'une balise, comme :
- la fonte
- les couleurs (avant-plan, arrière-plan, etc.)
- l'espacement
- la justification
- la casse
La spécification des styles applicables à un document est contenue dans une feuille de style.
On prévoit de spécifier pour un document une série de feuilles de styles, dont certaines peuvent redéfinir les styles des précédentes. On parle alors de cascade de feuilles de styles, pour atteindre les buts de :
- modularité : capacité à construire un style global à partir de feuilles de styles élémentaires
- adaptabilité : appliquer les style adéquats en fonction des volontés des rédacteurs, des lecteurs, des cas d'utilisation, etc.
Conception
Une feuille de style est constituée de :
- règles (rules), elles-mêmes constituées de :
- un sélecteur (selector) d'éléments auxquels appliquer le style, via (par
spécificité croissante) :
- leur type : nom d'élément :
a
,p
, etc. - la classe qu'il leur est appliquée :
.classe
. La règle s'appliquera donc à tous les éléments ayant cette classe. - leur identité (id) :
#id
. La règle ne doit alors concerner qu'un seul élément (ou plusieurs mais via l'héritage du style) tel que en-tête, pied de page, navigation, barre latérale, etc.
- leur type : nom d'élément :
- une déclaration : définition du style sous la forme d'une suite de :
- propriété
- valeur
- un poids, considéré en cas de conflits de redéfinitions entre règles. Par défaut les règles issues de l'auteur d'un document sont plus fortes que celles d'un lecteur par exemple.
- un sélecteur (selector) d'éléments auxquels appliquer le style, via (par
spécificité croissante) :
Une feuille de style peut être :
Implémentation
Propriétés | 1 (1996) | 2 | 3 (2012) | 4 | ||
---|---|---|---|---|---|---|
0 (1998) | 1 (2011) | |||||
Texte | Propriétés de fontes (typeface, emphasis) | Sélection plus précise d'élément avec >, +, [attr], :first-child, etc. | ||||
Couleur d'avant-plan, arrière-plan | ||||||
Espacement entre mots et lignes | ||||||
Alignement | ||||||
Marge, bordure, padding et positionnement | ||||||
Identification unique et classification générique de groupes d'attributs | ||||||
Sélecteur | Element particulier | #idElement |
||||
Classe d'élément | .classe |
|||||
Pseudo-classe d'élément | classe:link |
|||||
Descendant d'élément | parent child |
|||||
Tous éléments | [parent] * |
|||||
Images | Alignement, marge, bordure, padding et positionnement | |||||
Tableaux | Alignement, marge, bordure, padding et positionnement | |||||
Positionnement | position: static |
|||||
Relatif | position: relative (top, bottom, left, right offsets) |
|||||
Absolu | position: absolute |
|||||
Fixe | position: fixed |
|||||
Affichage | display: [none|inline|block] |
|||||
|
Non | z-index |
||||
|
border-radius |
|||||
media-queries | @media screen and (min-width: 400px) and (max-width: 700px) { … } |
Exemples
Un exemple de feuille de style CSS est :
<style type="text/css"> .mainTitle { // classe font-family: Verdana, Arial, Helvetica, sans-serif; font-size: larger } h1 { font-family: "Bookman Old Style"; font-size: x-large; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: left; word-spacing: normal; letter-spacing: 0mm } p { font-size: small; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: justify; color: #000000; font-family: "Bookman Old Style"; clip: rect( ); text-indent: 20pt } ul { font-family: "Bookman Old Style"; font-size: small; list-style-position: outside; list-style-type: disc; text-align: justify
}
address { font-family: "Courier New", Courier, mono;
font-size: small; margin-left: 1cm
}
ol { font-family: "Bookman Old Style"; font-size: small; list-style-position: outside; list-style-type: decimal; text-align: justify
}
h2 { font-family: "Bookman Old Style"; font-size: large; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; height: auto; margin-top: 25px; margin-right: 0; margin-left: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; border: 0; black groove; clip: rect( ) } </style>
Un exemple de page Web (HTML) utilisant une feuille de style est :
<html> <head> <title>Test de feuille de style</title> <link rel="stylesheet" type"text/css" href="/monStyle.css" title="MonStyle"> <style type="text/css"> <!-- @import url(http://javarome.net/basic); h1 { color: blue } --> </style> </head> <body> <h1>Ce titre 1 est bleu</h1> <p style="color: green">Alors que ce paragraphe est vert.</p> </body> </html>
Notes
- CSS ne doit pas être confondu avec le standard XSL (eXtensible Style Sheet) lié à XML.
- Des outils permettent une écriture simplifiée de feuilles CSS :
Références
- Learn CSS Layout
- "CSS", Can I use...