Table des matières
CSS : Cascade Style Sheet / Feuilles de style en cascade
Principes
Simplification des pages HTML
Dans une construction modulaire et évolutive des pages Web, on dissocie le contenu d'une page Web (texte, structure [tableaux, listes, etc]) de sa mise en forme (couleurs, fond, souligné, italique, position dans la pages, etc) .
Cela permet :
- de disposer de pages plus compactes
- de factoriser la mise en page dans un fichier séparé, réutilisable pour l'ensemble des pages
- de faciliter l'évolution de la mise en forme
- de diminuer le transfert d'informations entre le serveur et l'utilisateur (la mise en forme n'est transmise qu'une fois)
- de pouvoir créer des mises en pages différentes selon le support de destination (ordinateur, tablette, téléphone).
Bonnes pratiques
Les normes du W3C recommandent de ne jamais faire apparaître de mise en forme dans le code HTML. Ainsi, les attributs align, bgcolor, et autres width devraient systématiquement être renvoyées dans une feuille de style.
Balises et Styles personnalisés
Les feuilles de style peuvent redéfinir les balises standard en affectant la valeur que l’on souhaite pour chacune des options. On utilise ce principe lorsque l'on veut par exemple que tous les paragraphes aient la même mise en page (balise <p>), ou tous les formulaires (balise <form>).
On peut aussi créer des styles personnalisés en ajoutant de nouveaux intitulés auxquels on fera appel par un attribut class ou id à l’intérieur d’une balise standard. On utilise ce choix lorsqu'on souhaite que la mise en forme s'applique à différents objets d'une page web (tableau, paragraphe, zone de saisie, etc).
Fonctionnement
Application des styles
Les styles peuvent être définis à de multiples endroits, depuis l’intérieur d’une balise jusqu’à un fichier de style indépendant. Il est conseillé de tout centraliser dans une ou plusieurs feuilles de style, mais on peut à l’occasion faire un écart à ce principe.
Les éditeurs de page ou de site ont tendance à surcharger le code HTML d’options de style directement à l’intérieur des balises, perdant tout l’intérêt de factorisation des styles.
Style dans une balise
Dans toute balise HTML, on peut avoir recours à la notion de style. Ce n'est pas la solution la plus pertinente et cela ne respecte pas les recommandations du W3C.
Occasionnellement, pour une mise en forme complexe que les seules options de la balise (par exemple pour un tableau ou dans une division DIV) ne permettent pas, cette solution peut éviter d’avoir à créer un style pour une utilisation ponctuelle. Cela permet aussi de limiter l’utilisation de multiples balises (pour la police, l’alignement d’un paragraphe et la couleur d’un encadrement par exemple).
<HTML><table style=“align: center; color: white; font-family:arial ; border-color:green ;”></HTML>
Style dans une page HTML
On peut définir les styles à utiliser dans une page au sein même du code HTML de cette page.
Si l’on veut appliquer une mise en forme particulière à une page au sein d’un site, cela peut être une solution adaptée. Pour cela, on utilisera la balise STYLE :
<HTML><STYLE>liste_des_styles_définis_ou_redéfinis</STYLE>.</HTML>
Feuille de style
Une feuille de style est un fichier ayant l’extension CSS et ne contenant que des descriptions de style (il n’y a pas de HTML).
Une page HTML fera appel à une feuille de style par la balise suivante dans l’entête (<HEAD>)
<HTML><LINK REL=“stylesheet” HREF=“feuille_de_style” TYPE=“text/css”></HTML>
Hiérarchie
Dans la mesure où les valeurs des options de mise en forme peuvent être paramétrées à plusieurs endroits (dans une feuille de style, dans les styles d’une pages HTML, dans les divisions de texte (balise DIV) et dans les balises directement), le navigateur appliquera la première valeur rencontrée dans l’ordre suivant :
- valeur de la propriété dans la balise
- valeur de la propriété dans la balise DIV qui encadre une autre balise
- valeur dans le style de la page HTML elle-même
- valeur dans le style de la feuille de style appelée par le fichier HTML
- valeur dans le style de la feuille de style associée au navigateur.
Syntaxe
Paramétrage des feuilles de style
Les styles peuvent être définis dans un fichier portant par convention l’extension .css ou entre les balises <STYLE> </STYLE>. Un style s’écrit :
ObjetDePresentation {
optionMiseenForme1: valeur1 ;
[optionMiseenForme2: valeur2 ;…]
}
Les sélecteurs
Une feuille de style décrit les comportements d’affichage pour les objets de présentation (ou sélecteurs) suivants :
- Les balises standard : on indique le nom de la balise
body { /* redéfinition de la balise body */ color: lightgreen ; /* couleur du texte vert clair */ background: rgb(130,124,237) ; /* couleur du fond mauve */ }
- Une classe de style : c’est un sélecteur qui décrit un style universel, applicable à toute balise et plusieurs fois dans une page. Il est préfixé par un « . » et est appelé par l’option class=“nomClasse” à l’intérieur de la balise qui l’utilise.
.encadreRouge { /* création d’une classe encadreRouge */ border:2px solid red ; /* trait de 2 pixel, solide (continu) de couleur rouge */ } … //utilisation de la classe dans le HTML <div class="encadreRouge">Important</div>
- Un identifiant de style : c’est un sélecteur unique, applicable à toute balise. Il est préfixé par un « # » et est appelé par l’option id=“nomID” à l’intérieur de la balise qui l’utilise.
Remarque : l’id servant à nommer les objets (de formulaire ou autre), il ne doit y avoir normalement qu’un seul appel à un id dans une page HTML. On ne devrait donc l’utiliser que pour décrire des éléments uniques utilisant telle mise en forme (un logo, un menu, etc)
#menu { /* création d’une mise en forme pour l'ID nommé menu */ color:beige ; /* couleur du texte */ border:2px solid green ; /* trait de 2 pixel, solide (continu) de couleur vert */ background: rgb(100,100,137) /* couleur du fond */ } … /* utilisation de l’id dans le HTML (qui ne devrait être qu’une fois dans la page) */ <table id="menu >tableau décrivant un menu…</table >
Combinaison et hiérarchisation
On peut simplifier l’écriture du code HTML en définissant le mode d’application des styles dans une page. En effet, les classes et ID s’appliquant à toute balise, la mise en forme est universelle. Cependant, on pourrait vouloir que certains éléments de mise en forme ne s’appliquent qu’à une balise particulière, ou que le même nom (de classe) réalise quelques nuances selon qu’il s’applique à telle ou telle balise.
div.menu { /* création d’une classe menu pour la balise DIV */ background: rgb(100,100,137) /* couleur du fond */ } table.menu { /* création d’une classe menu pour la balise table */ background: rgb(100,100,137) /* couleur du fond */ border-color : rgb(200,100,100) }
En outre, on peut aussi définir comment se comportent les balises lorsqu’elles sont encadrées dans d’autres.
div.menu a { /* création d’un style pour un lien (balise a) à l’intérieur d’un div */ /* appliquant la classe menu */ color: lightgreen /* couleur du texte */ }
Principales options de style pour la mise en forme
Police de caractère
| Type | Propriété | Valeur | Description |
|---|---|---|---|
| Police | font-family | Nom de police | Définit un nom de police ou une famille |
| font-style | normal, italic, oblic | Définit le style d'écriture | |
| font-weight | normal, bold, light, bolder, lighter, valeur numérique | Définit l'épaisseur de la police | |
| font-size | Valeur numérique | Définit la taille de la police en points (pt), cm, % ou pixels (px) | |
| font-variant | small-caps ou normal | Définit le mode d’affichage (petites majuscules) | |
| color | #RRGGB ou nom de couleur ou rgb(valRouge, valVert, valBleu) | Définit la couleur de la police | |
| font | {font: bold italic} | Permet de valoriser toutes les options en une seule fois |
Paragraphes et habillage du texte
| Type | Propriété | Valeur | Description |
|---|---|---|---|
| Style | text-align | left, center, right, justify | Définit l'alignement horizontal du texte |
| text-decoration | blink (clignotant), underline (souligné), line-through (barré), overline (surligné) | Définit une décoration pour la police | |
| text-transform | uppercase (majuscule), lowercase (minuscule) , capitalize (première lettre en majuscule) | Définit la casse du texte | |
| text-indent | Valeur numérique | Permet une tabulation de n caractères | |
| vertical-align | baseline (tout en bas), middle (milieu), sub (en-dessous), super (au-dessus) text-top (sous le texte) ou text-bottom (au-dessus du texte) | Définit l’alignement vertical d’un élément par rapport à son parent (image par rapport à du texte, texte dans un tableau, etc). |
Arrière plan (pour le corps du texte, les tableaux)
| Type | Propriété | Valeur | Description |
|---|---|---|---|
| Arrière-plans | background-color | “#RRGGBB” ou nom couleur ou rgb(valRouge, valVert, valBleu) | Définit la couleur du fond |
| background-image | URL(nom de l’image) | Définit l'image d'arrière-plan | |
| background | “#RRGGBB” ou nom couleur ou rgb(valRouge, valVert, valBleu) | Permet d’affecter l’ensemble des propriétés en une seule option | |
| background-repeat | repeat (mosaïque), repeat-x (répétition horizontale), repeat-y (répétition verticale), no-repeat (pas de répétition) | Indique le mode de répétition de l’image d’arrière plan | |
| background-attachement | fixed ou scroll | Détermine si l’image d’arrière plan se déplace avec le texte ou non, permet de créer un filigrane |
Marges
| Type | Propriété | Valeur | Description |
|---|---|---|---|
| Marges | margin-top | En points (pt), pouces (in), en cm (cm), en pixels (px), ou en % (%) | Valeur de la marge au dessus du texte |
| margin-right | idem | Valeur de la marge droite | |
| margin-left | idem | Valeur de la marge gauche | |
| margin-bottom | idem | Valeur de la marge en dessous du texte | |
| margin | idem | Définit les valeurs top right left bottom en une seule ligne | |
| Espacements | padding | En points (pt), pouces (in), en cm (cm), en pixels (px), ou en % (%) | Espacement entre le texte et le conteneur (tableau, division ou autre) |
| Top, left, bottom et right | En points (pt), pouces (in), en cm (cm), en pixels (px), ou en % (%) | Espacement entre le texte et le bord supérieur, ou gauche, ou inférieur ou droit |
Bordures
| Type | Propriété | Valeur | Description |
|---|---|---|---|
| Bordure | border-width | En points (pt), pouces (in), en cm (cm), en pixels (px), ou en % (%) | Définit les propriétés d'épaisseur de trait |
| border-color | “#RRGGBB” ou rgb(valRouge, valVert, valBleu) | Couleur de la bordure | |
| border-style | dotted (pointillé), dashed (tiret), solid (trait plein), double (trait double), groove (effet de relief léger) | Définit le style de bordure | |
| border-top border-bottom border-left border-right) | épaisseur style couleur | Définit les caractéristique de bordure en une seule commande pour le dessus (ou bas ou gauche ou droit) |
Style et liste (puce)
| Type | Propriété | Valeur | Description |
|---|---|---|---|
| Listes à puces | list-style-type | disc, circle ou square | Type de puces et de numérotation |
| list-style-image | URL(nom de l’image) | Permet de remplacer les puces par une image | |
| list-styleposition | inside ou outside | Spécifie si les puces sont à l'intérieur ou à l'extérieur du texte |
Pseudo classes
Il est aussi possible de définir la mise en forme en fonction des actions menées (avec la souris par exemple), notamment lorsqu’un objet (zone, lien, image, etc) est survolé par la souris, ou qu’un lien a été visité, ou en fonction de la position d’une balise par rapport à une autre.
On parle d’une pseudo classe, qui est systématiquement préfixée par « : » et s’applique à un sélecteur (balise, classe ou id ou combinaison) sous la forme selecteur:pseudo_classe. Ces éléments ne sont pas supportés par tous les navigateurs (voir http://fr.selfhtml.org/css/proprietes/pseudoformats.htm: page qui n'existe plus mais dont les sources en français sont accessibles ici http://fr.selfhtml.org/ )
| Type | Pseudo-classe | Description |
|---|---|---|
| Liens | :link | Définit les mises en forme sur un lien non visité. S’applique à la balise <a> a:link{…} |
| :visited | Idem pour un lien non visité a:visited{…} |
|
| Souris | :hover | Définit les mises en forme lorsque la souris est amenée sur une zone. Doit venir après les pseudo classes de visite pour être actif sur un lien. S’applique à toute balise div:hover{…} |
| :active | Idem lorsque la souris reste cliquée sur un élément (doit venir après hover). | |
| :focus | Idem lorsque le curseur de saisie ou une tabulation arrive sur un élément | |
| Position | :first-line | Indique le comportement pour la première ligne à l’intérieur d’un bloc div:first-line{…} |
| :first-letter | Idem pour le premier caractère, ce qui permet de faire des lettrines p:first-letter{…} |
|
| :first-child | Indique le comportement de la première apparition d’une balise (ici p) à l’intérieur d’une autre (ici div) : div p:first-child |
|
| Encadrement | :before | Indique le texte à insérer avant un sélecteur : .important:before {font-weight:bolder ; color :red ; content:“!”;} |
| :after | Indique le texte à insérer après un sélecteur : .prix:after {content:“ €”;} |
Organisation de l’espace avec les styles et les balises DIV
Evolution
Pour répartir l’information au sein d’une page Web, on a pendant une période utilisé la notion de cadres (frames) qui permettait, sur des connexions au débit faible, de limiter les chargements de parties fixes.
Avec l’avènement des liaisons DSL, le problème de la quantité d’informations à acheminer est devenu moins critique, et l’on a préféré revenir au principe d’origine : toutes les informations d’une page (l’entête, le menu de navigation, le contenu informatif) sont contenues directement dans cette page.
Il a alors fallu penser à des techniques d’organisation de l’espace :
- faire apparaître une zone fixe en haut,
- répartir les zones à droite, au milieu, à gauche,
- encadrer une image par du texte,
- etc.
La première idée qui vient (et qui reste très actuelle et précise) est le recours à des tableaux dont les bordures sont masquées.
Une seconde évolution, plus incertaine (les navigateurs ne réagissent pas tous exactement de la même façon) est le recours à des définissions de classes de style et à leur application par le balises <DIV> (division). Ces balises ont pour but d’organiser des divisions de texte en leur appliquant des mises en forme particulières, portant aussi bien sur les caractères que les paragraphes, les couleurs et autres dispositions.
Principe d’utilisation
Pour organiser l’espace, il faut penser les différentes zones d’un écran comme autant de cadres flottants ou de flux d’informations qui se coulent dans l’espace laissé disponible par les autres portions de texte.
Par exemple, sur copie d’écran ci-contre, du site de l’académie de Caen, on peut imaginer que les zones encadrées en rouge sont autant d’espaces indépendants emboîtés les uns dans les autres.
Le principe des divisions est donc de définir comment elles se comportent les unes par rapport aux autres en terme de superposition, d’alignement et de retour à la ligne, et comment elles se positionnent par rapport à l’écran en terme d’alignement (gauche ou droite).
Par défaut, une division occupe une portion de l’espace, et tout le reste du texte ou les autres divisions se collent contre ce cadre dans l’espace disponible de l’écran.
Propriétés //float// et //clear//
Le paramétrage de ces positionnements se fait principalement par les propriétés float et clear.
- Float permet d’indiquer la position d’une division par rapport à l’écran. Les valeurs possibles sont left et right, indiquant si la division est alignée à gauche ou à droite de l’écran (ou collée à la division de gauche ou de droite qui la précède).
- Clear définit comment une division se comporte par rapport à celles qui existent précédemment. Les valeurs possibles sont :
- left (on ne se coule pas contre la division existant à gauche, et l’on retourne à la ligne),
- right (on ne se coule pas par rapport à la division de droite)
- both (on ne se coule contre aucune des divisions existante)
On trouvera une explication illustrée de ces éléments à l’adresse suivante : http://www.journaldunet.com/developpeur/tutoriel/css/061130-css-comprendre-float-clear.shtml
Une autre explication plus détaillée est lisible ici : http://openweb.eu.org/articles/initiation_flux/
Propriétés des divisions
Pour définir exactement l’espace occupé par une division, on utilisera les propriétés de marge (voir plus haut) ainsi que la hauteur (height), la largeur (width). On pourra aussi jouer sur la couleur d’arrière plan, sur les bordures, etc. Mise en œuvre
La mise en œuvre de ces divisions se fait en deux étapes. Dans un premier temps, on définit les propriétés d’un style correspondant à chacune des zones (dans la feuille de style), et dans un second temps on applique le style à une balise <DIV> grâce à l’option <… class=“nom_du_style”>.
Illustration
On peut imaginer que la page du site de l’académie de Caen avait, dans sa feuille de style les éléments suivants correspondant au cadre de tout en haut, au cadre de tout à gauche et celui de tout à droite :
.zoneHaut { background-image: URL("imageAca.gif") ; float : left ; width : 80% ; } .zoneGauche { background-color : green ; float : left ; /*collé à ce qu’il y a à gauche*/ clear : left ; /*retour à la ligne par rapport à ce qu’il y a à gauche*/ } .zoneDroite { background-color : green ; float : right ; /* est aligné sur le bord de droite */ width : 20% ; /*occupe 20% de l’espace à droite*/ }
La page HTML qui constitue l’accueil serait alors composée, notamment, des descriptions suivantes (en faisant appel à la feuille de style ci-dessus) :
<HTML>
… <div class="zoneHaut"></div> <div class="zoneDroite>…texte_ministère…</div> <div class="zoneGauche">….texte_des_menus…</div>
</HTML>
Remarque : si on avait choisi clear :both ; pour le style zoneGauche, la partie de gauche correspondant au menu se serait alors retrouvée calée à gauche en dessous de la dernière ligne de la zone de droite (logo du ministère). Complexité
La complexité de l’utilisation de ces éléments grandit à mesure que les zones s’imbriquent et se superposent. Il est même possible d’aller jusqu’à des chevauchements.
En outre, une balise <DIV> ne peut appliquer qu’une seule classe de style. On peut alors être amené à imbriquer des <DIV> faisant appel à des classes de style complémentaires.
Il s’agit d’un véritable travail de designer Web, qui nécessite une grande rigueur, une parfaite connaissance de l’organisation des sites.
En outre, les balises et les styles ne s’appliquent pas toujours parfaitement selon les différents navigateurs.
DIV vs Tableaux
L’utilisation des tableaux reste encore une solution de secours très pratique, qui permet d’avoir une vision directe de ce que l’on souhaite obtenir dans l’interface d’un éditeur de page.
L’inconvénient de ces derniers est de s’adapter à la largeur des écrans 4/3 et 16/9. On jouera alors sur des pourcentages pour définir la largeur du tableau et de ses différentes colonnes.
Pour remarque, la page de l’académie de Caen est constituée d’un mélange de tableaux et de DIV.