Chapitres :
01 - Introduction :
Présentation des feuilles de style
Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS.
Le principe des feuilles de style consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte. Il est ainsi possible de créer un groupe de titres en police Arial, de couleur verte et en italique.
Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation. En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre style, indépendamment des éléments qui l'entourent. Grâce aux feuilles de style, lorsque la charte graphique d'un site composé de plusieurs centaines de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier !
Elles sont appellées « feuilles de style en cascade » (en anglais « Cascading Style Sheets ») car il est possible d'en définir plusieurs et que les styles peuvent être hérités en cascade.
Les feuilles de style permettent notamment :
- d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style ;
- de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes ;
- une plus grande lisibilité du HTML, car les styles sont définis à part ;
- des chargements de page plus rapides, pour les mêmes raisons que précédemment ;
- un positionnement plus rigoureux des éléments.
CSS 2.0
Depuis le 12 mai 1998, la norme CSS 2.0 est le standard en vigueur. La norme CSS2 apporte un grand nombre de nouvelles fonctionnalités par rapport à la précédente norme (1.0), parmi lesquelles :
- La prise en compte de la diversité de médias (écran, imprimante, braille, synthétiseur vocal, etc.) ;
- L'ajout de propriétés auditives pour les aveugles et malvoyants ;
- La manipulation de curseurs ;
- La gestion des débordements et de la visibilité des éléments.
02 - Déclaration d'une feuille de style :
Comment appliquer ce style CSS au document HTML ?
Il existe pour cela trois méthodes, mais nous utiliserons de préférence celle de la feuille de styles, qui présente de nombreux avantages.
Insérer des styles dans l’en-tête du document :
On peut d’abord placer des styles CSS dans l’en-tête HTML (contenu de l’élément <head>). Placé entre les balises <style> et </style>, ce code s’appliquera à tout le document :
2h1 {color: blue;}
3</style>
Cette technique, qui sépare correctement contenu et mise en forme, portera automatiquement sur tous les titres <h1> du document. Mais, la portée de ce style se limite au document HTML du fichier.
Lier les styles à partir d’une feuille séparée :
Il s’agit de stocker les ressources dans des fichiers distincts : documents HTML et feuilles de styles CSS. Ces dernières renfermeront toutes les règles nécessaires à la mise en page et au design des fichiers HTML. Il suffira alors de modifier le fichier CSS séparé pour changer l’allure de toutes les pages HTML du site. Ce fichier CSS, appelé feuille de styles, portera l’extension .css
Liaison par la balise <link>
Pour lier cette feuille de styles à toutes les pages HTML du site, il est d’usage de placer une balise <link> dans l’en-tête (<head>) de ces dernières.
2<link rel="stylesheet" type="text/css" href="styles.css" />
3</head>
Utiliser la règle @import
Cette règle permet aussi de lier une feuille de styles externe à son document HTML. Ce n’est pas une balise HTML, mais une règle CSS 2. Il est donc nécessaire de la déclarer dans l’élément <style> de l’en-tête du document :
2import url(styles.css);
3</style>
Méthode link ou @import ?
Le résultat est en pratique identique sauf que la méthode @import sera utilisée pour la compatibilité avec les anciens navigateurs.
03 - Les styles en cascade :
Il est possible de définir plusieurs styles en utilisant les différents moyens qu'offrent les CSS. Ainsi, lorsque plusieurs feuilles de style externes sont appelées, on obtient ce que l'on appelle une cascade de styles, c'est-à-dire une combinaison de styles pour divers éléments HTML.
2<link href="Style2.css" rel="stylesheet" type="text/css" />
3<link href="Style3.css" rel="stylesheet" type="text/css" />
04 - Les unités :
Grâce aux feuilles de style il est possible de définir des valeurs numériques pour les propriétés de style de plusieurs façons :
- de façon absolue, (unité indépendante du format de sortie)
- de façon relative, (unité relative à un élément)
Unités absolues :
| Unité | Description |
|---|---|
| cm | Le centimètre |
| in | Le pouce (en anglais « inch ») correspondant à 2,54 cm |
| mm | Le millimètre |
| pt | Le point |
| pc | Le pica (correspondant à 12 pt) |
Unités relatives :
| Unité | Description |
|---|---|
| em | Unité relative à la taille de police de l'élément sélectionné. Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la taille de la police de l'élément parent. |
| ex | Unité relative à la hauteur de la minuscule de l'élément sélectionné. Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la hauteur de la minuscule de l'élément parent. |
| px | Le pixel. Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage. |
| % | Le pourcentage est une unité relative à la taille de l'élément ou de son parent. |
05 - Les couleurs :
Il existe différentes façons de définir des couleurs au sein du CSS :
Appel d'une couleur par son nom
Le standard CSS reprend les 16 couleurs de base définies par le standard HTML 4.01 et y ajoute le orange, soit 17 couleurs de base.
| 01 | aqua | 06 | green | 11 | orange | 16 | white | ||||
| 02 | black | 07 | lime | 12 | purple | 17 | yellow | ||||
| 03 | blue | 08 | maroon | 13 | red | ||||||
| 04 | fuschia | 09 | navy | 14 | silver | ||||||
| 05 | gray | 10 | olive | 15 | teal |
Code RVB en notation hexadécimale
Il est possible de définir plus de 16 millions de couleurs en indiquant les valeurs RVB (en anglais « RGB »)
Glisser votre curseur sur une couleur pour en optenir son code hexadécimal
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Code RVB en notation décimale
Le standard CSS définit une notation RVB permettant de définir les composantes de rouge, de vert et de bleu en indiquant leur proportion relative en pourcentage ou bien en notation entière absolue (compris entre 0 et 255) :
2rgb (24,125,255)
Télécharger "La Boite à Couleur"
06 - Propriétés des feuilles de style :
Les différentes propriétés permettant la mise en forme au sein de CSS:
- Polices
- Texte et paragraphes
- Couleurs et arrière plan
- Marges :
- Bordures :
- Espaces intérieurs :
- Tableaux :
- Listes :
- Mise en page :
Propriétés de polices :
| Propriété | Valeur | Description |
|---|---|---|
| font-family | Police précise (Arial, Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) |
Définit un ou plusieurs nom de polices ou de familles de polices. Si plusieurs polices sont définies, la première trouvée sur le système de l'utilisateur sera utilisée. |
| font-style | normal, italic, oblique | Définit le style d'écriture |
| font-weight | lighter, normal, bold ou bolder. valeur numérique (100 à 900) |
Définit l'épaisseur de la police |
| font-size | xx-small, x-small, small, medium, large, x-large, xx-large taille en points (pt), cm, % |
Définit la taille de la police |
| font-variant | normal, small-caps | Définit une variante (petites majuscules) |
| font | font: Verdana, Arial, bold italic 8px; | Raccourci permettant de mettre toutes les propriétés |
Texte et paragraphes :
| Propriété | Valeur | Description |
|---|---|---|
| color | "#RRGGBB" | Définit la couleur du texte |
| line-height | line-height: 12pt; | Définit l'interligne |
| text-align | left, center, right ou justify | Définit l'alignement du texte |
| text-indent | text-indent: 5px; | Définit l'indentation (retrait du texte) |
| text-decoration | blink (clignotement), underline (souligné), line-through (barré), overline (surligné) ou none (aucune décoration) | Définit une décoration |
| text-shadow | text-shadow: 1px 2px 4px black; | Définit l'ombrage texte, respectivement décalage à droite, en bas, rayon de l'effet de flou et couleur. |
| text-transform | uppercase (majuscule), lowercase (minuscule) ou capitalize (première lettre en majuscule) | Définit la casse du texte |
| white-space | normal (passage à la ligne automatique), pre (idem saisie), nowrap (pas de passage à la ligne automatique) | Césure |
| word-spacing | word-spacing: 6px; | Définit l'espacement des mots |
| width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Définit la longueur d'un élément de texte ou d'une image |
| height | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Définit la hauteur d'un élément de texte ou d'une image |
Couleurs et arrière plan :
| Propriété | Valeur | Description |
|---|---|---|
| background-color | "#RRGGBB" | Définit la couleur d'arrière plan |
| background-image | url(http://url) | Définit l'image d'arrière-plan |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | Définit la façon de répéter l'arrière-plan |
| background-attachment | scroll, fixed | Spécifie si l'image reste fixe avec les déplacements de l'écran |
| background-position | top, middle, bottom, left, center ou right | Position de l'image par rapport au coin supérieur gauche |
| background | background: url(test.jpg) fixed repeat; | Raccourci pour les propriétés d'arrière-plan |
Marges :
| Propriété | Exemple | Description |
|---|---|---|
| margin-top | margin-top: 5px; | Valeur de la marge supérieure |
| margin-right | margin-right: 0.5em; | Valeur de la marge de droite |
| margin-bottom | margin-bottom: 2pt; | Valeur de la marge inférieure |
| margin-left | margin-left: 0; | Valeur de la marge de gauche |
| margin | margin: 5px 0.5em 2pt 0; | Raccourci pour les propriétés de marge |
Les bordures :
| Propriété | Valeur | Description |
|---|---|---|
| border[-top -left -bottom -right]-width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Epaisseur de la bordure [supérieure, de gauche, inférieure ou de droite] |
| border[-top -left -bottom -right]-color | border-left-color: #RRGGBB; | Couleur de la bordure [supérieure, de gauche, inférieure ou de droite] |
| border[-top -left -bottom -right]-style | solid (pleine), dashed (en tirets), dotted (en pointillés), double (double et remplie) ou ridge (en 3D) | Style de la bordure [supérieure, de gauche, inférieure ou de droite] |
| border-collapse | collapse separate |
Effet » 3D » ou non |
| border | border: 1px 0 0 2px dotted green; | Raccourci global les propriétés de bordure |
Espaces intérieurs :
| Propriété | Valeur | Description |
|---|---|---|
| padding-top | padding-top: 3px; | Espace intérieur entre l'élément et la bordure supérieure |
| padding-right | padding-right: 0.25em; | Espace intérieur entre l'élément et la bordure droite |
| padding-bottom | padding-bottom: 0; | Espace intérieur entre l'élément et la bordure inférieure |
| padding-left | padding-left: 2pt; | Espace intérieur entre l'élément et la bordure gauche |
| padding | padding: 3px 0.25em 0 2pt; | Raccourci vers l'ensemble des propriétés d'espace intérieur |
Tableaux :
| Propriété | Valeur | Description |
|---|---|---|
| border-collapse | separate ou collapse | Fusion des bordures des cellules (collapse) ou non (separate) |
| border-spacing | border-spacing: 4px; | Espacement des cellules |
| caption-side | top, bottom, left ou right | Positionnement de la légende du tableau |
| empty-cells | show ou collapse | Affichae (show) ou masquage (collapse) des cellules vides |
| table-layout | fixed (indépendamment du contenu des cellules) ou auto (selon le contenu des cellules) | Largeur fixe ou variable |
| speak-headers | alwats (systématiquement avant chaque cellule) ou once (une seule fois) | Propriété pour sourds et malentendants indiquant le comportement lors de la lecture des cellules d'en-tête d'un tableau |
Listes :
| Propriété | Valeur | Description |
|---|---|---|
| list-style-type | decimal, upper-roman, lower-latin, disc, circle, square ou none | Type de puces et de numérotation |
| list-style-image | list-style-image: url(image.png); | Permet de personnaliser les puces avec une image |
| list-style-position | inside ou outside | Spécifie le retrait des puces |
| list-style | Raccourci vers les propriétés de liste |
Mise en page :
| Propriété | Valeur | Description |
|---|---|---|
| @page | @page(size: portrait) | Définit la mise en page de l'impression |
| size | auto, landscape ou portrait | Format de l'impression |
| margin-top | margin-top: 3 cm; | Marge supérieure |
| margin-right | margin-right: 1.5 cm; | Marge de droite |
| margin-bottom | margin-right: 1 cm; | Marge inférieure |
| margin-left | margin-left: 2 cm; | Marge de gauche |
| marks | crop (traits de coupe), cross (repère de montage), none (pas de marque) | Traits de coupe et repères de montage |
| page-break-before | Always, avoid | Force le saut de page avant un élément |
| page-break-after | Always, avoid | Force le saut de page après un élément |
| orphans | orphans: 2; | Evite les lignes orphelines en fin de page. Définit le nombre de ligne minimal à partir un renvoi en page suivante est effectué |
| widows | widows: 1; | Evite les lignes veuves en début de page. Définit le nombre de ligne minimal à partir un renvoi en page précédente est effectué |
07 - Positionner des éléments :
Il est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises <SPAN> et <DIV>.C'est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse et montre encore quelques problèmes de compatibilité.
Positionnement relatif et absolu :
Le positionnement absolu {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).
La position relative se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.
Positionner du texte :
Positionnons le texte "Formation au CSS avec Webinnov" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre :
2<body>
3<span style="position: absolute; top: 80 px; left: 100 px;">
4 Formation au CSS avec Webinnov
5</span>
6</body>
7</html>
Essayez cette procédure :
02</head>
03<style>
04<!--.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}-->
05</style>
06</head>
07<body>
08<div class=test>
09Formation Webinnov
10</div>
11</body>
12</html>
Positionner une image :
Positionnons l'image "vignette.png" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre
2<body>
3<span style="position: absolute; top: 80 px; left: 100 px;width: 154px; height: 46px">
4 <IMG SRC="vignette.png" >
5</span>
6</body>
7</html>
Il est important de spécifier la taille de l'image avec les feuilles de style, pour des raisons de non-compatibilité des navigateurs.
Superposer des éléments :
02<body>
03<span style="position: absolute; top: 80 px; left: 100 px;width: 154px; height: 46px">
04 <IMG SRC="vignette.png" >
05</span>
06<span style="position: absolute; top: 37px; left: 33px;">
07Formation au CSS
08</span>
09</body>
10</html>
 |
 |
 |