Travaux pratiques

CSS 3
Maîtrisez la conception
de vos pages web

Fabrice Lemainque
Toutes les marques citées dans cet ouvrage sont des
marques déposées par leurs propriétaires respectifs

Mise en pages réalisée par Lumina Datamatics, Inc.

© Dunod, 2018
11 rue Paul Bert, 92240 Malakoff
www.dunod.com
ISBN 978-2-10-077281-0
 Table des matières
Avant-propos ............................................................................................................................................................................................. 1

Introduction
Préfixes dédiés .......................................................................................................................................................................................... 3
Terminologie : les valeurs CSS ........................................................................................................................................................... 4
Présentation des exercices ................................................................................................................................................................... 6

Mise en œuvre
TP
1 Mise en œuvre de CSS ......................................................................................................................................................................... 8
TP
2 Rédaction d’une feuille de styles externe .....................................................................................................................................10

Les sélecteurs
TP
3 Sélecteurs d’éléments .........................................................................................................................................................................  14
TP
4 Sélecteurs d’attributs ............................................................................................................................................................................ 17
TP
5 Sélecteurs de pseudo-classes dynamiques .................................................................................................................................  19
TP
6 Sélecteurs de pseudo-classes structurelles ..................................................................................................................................  21
TP
7 Sélecteurs de pseudo-éléments ......................................................................................................................................................  24
TP
8 Spécificité d’un sélecteur ...................................................................................................................................................................  27

Modèle de boîtes CSS

TP
9 Propriétés de marge ............................................................................................................................................................................ 30
TP
10 Propriétés de bordure .........................................................................................................................................................................  32
TP
11 Propriétés avancées de bordure ..................................................................................................................................................... 34
TP
12 Propriétés d’espacement ....................................................................................................................................................................  37
TP
13 Propriétés de contenu .........................................................................................................................................................................  38
TP
Propriétés de positionnement .......................................................................................................................................................... 40
© Dunod – Toute reproduction non autorisée est un délit

14

TP
15 Propriétés de couche ...........................................................................................................................................................................  42
TP
16 Propriétés d’effet visuel .......................................................................................................................................................................  43

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

TP
17 Propriétés de police .............................................................................................................................................................................  46
TP
18 Propriétés de couleur et de fond ....................................................................................................................................................  49
TP
19 Dégradés linéaires ................................................................................................................................................................................  53
TP
20 Dégradés radiaux .................................................................................................................................................................................  56
TP
21 Propriétés de texte ...............................................................................................................................................................................  59

@
III
TP
22 Multi-colonnage ....................................................................................................................................................................................  62
TP
23 Propriétés d’interface utilisateur ...................................................................................................................................................... 64

Listes et compteurs
TP
24 Propriétés de liste ..................................................................................................................................................................................68
TP
25 Propriétés de compteur et de numérotation ..............................................................................................................................71

CSS et périphérique d’affichage

TP
26 Spécification de feuille de styles dépendant du média ..........................................................................................................  74
TP
27 Requêtes médias ...................................................................................................................................................................................  76

Avancées CSS
TP
28 Modèle de boîte flexible (flexbox) .................................................................................................................................................  78
TP
29 Transformations 2D .............................................................................................................................................................................  82
TP
30 Transformations 2D multiples .......................................................................................................................................................... 84
TP
31 Transformations 3D ............................................................................................................................................................................. 86
TP
32 Transformations 3D multiples .......................................................................................................................................................... 88
TP
33 Transitions ................................................................................................................................................................................................ 90
TP
34 Animations ..............................................................................................................................................................................................  92
TP
35 Modèle de quadrillage (grid) ...........................................................................................................................................................  95
TP
36 Variables en cascade ......................................................................................................................................................................... 101

Annexes
Rappel sur les documents W3C ................................................................................................................................................... 105
État d’avancement actuel CSS ....................................................................................................................................................... 106
Tableaux résumés ..............................................................................................................................................................................  108

Index ....................................................................................................................................................................................................... 121

Vous trouverez sur la page de présentation de l’ouvrage du site Dunod (www.dunod.com)

trois TP complémentaires, sur les fonctions matrix() et matrix3d().

@
IV
 Avant-propos

L
e langage CSS (Cascading Style Sheet, feuille de styles en cascade) permet la définition et la manipulation des
styles appliqués à chaque élément d’un document rédigé dans un langage structurel de balisage (HTML,
XHTML, XML, etc.) par la rédaction de feuilles de styles. Cela contribue à l’objectif essentiel de séparation de la
structure et de la présentation et apporte de multiples avantages :
• possibilité de partager des feuilles de styles entre plusieurs documents et/ou sites ;
• indépendance entre présentation et document source structuré ;

AVANT-propos
• les navigateurs peuvent charger les feuilles de styles sélectivement, de façon à s’adapter au périphérique d’affi-
chage (conception adaptative ou responsive design).
Comme généralement en informatique, c’est un langage en perpétuelle évolution, mais qui présente toutefois
l’exceptionnelle caractéristique de toujours construire sur l’existant, en l’améliorant et en le complétant. En effet, CSS
ne possède pas (ou plus exactement ne possède plus) de versions au sens traditionnel du terme mais propose à la
place des niveaux attribués à des modules indépendants. Chaque niveau CSS complète le précédent en affinant ses
définitions et en ajoutant des fonctionnalités. Tout nouveau niveau est un sur-ensemble des niveaux précédents, si bien
que les fonctionnalités offertes par un niveau donné sont toujours un sous-ensemble de celles offertes par un niveau
supérieur : un navigateur prenant en charge un niveau CSS élevé prendra toujours en charge tous les niveaux
inférieurs.
Vous pourrez rencontrer des références à CSS 1, 2 ou 3, mais cela correspond désormais à la seule date d’approbation :
l’unique recommandation officielle (à ce jour) est CSS 2.1, mise à jour lorsque nécessaire par ajout de modules
développés indépendamment (comme par exemple Sélecteurs Niveau 3 ou Couleurs Niveau 3, intégrés à la
recommandation). Chaque module évolue ensuite à son rythme. En pratique et pour résumer :
• tout module préexistant dans CSS 2.1 verra ses améliorations ultérieures être de niveau 3 et supérieur ;
• tout module absent de CSS 2.1 commencera au niveau 1 lors de son intégration.
C’est ainsi que le module Multi-colonnage, initialement présenté comme CSS 3 puisque mis au point après CSS 2.1,
porte en fait le nom de module Multi-colonnage Niveau 1. Nous traiterons ici tant de la recommandation de base
CSS 2.1 (constituée de CSS 1 complété de CSS 2 et de quelques modules récents, souvent de niveau 3) que des
modules récents nouveaux considérés comme stables et atteignant les stades finaux (CR, candidat à la recommandation,
ou PR, proposé pour la recommandation).
De nombreux outils permettant de réaliser des pages web ou d’en optimiser la conception exploitent le langage CSS :
© Dunod – Toute reproduction non autorisée est un délit

par exemple Bootstrap ou WordPress, mais il existe de nombreux autres systèmes de gestion de contenu et/ou
bibliothèques concernés. Les utilisateurs de ces produits ne disposent pas forcément des connaissances leur permettant
de personnaliser facilement à leur guise les modèles gouvernant ces pages et d’ainsi les optimiser. Examiner la
spécification n’est pas toujours suffisant tout en restant souvent fastidieux.
Ce livre s’adresse à tout public, avec pour but de mieux le familiariser pas à pas avec ce langage pour qu’il puisse par
la suite en tirer le meilleur parti. Il détaille la recommandation en de nombreux travaux pratiques individuels s’appuyant
sur des pages web exemples soigneusement élaborées afin de permettre de tester et de maîtriser successivement
chaque aspect du langage CSS. Apprendre en pratiquant, tel est le principe directeur. Nous n’avons pas la prétention
d’être exhaustifs mais avons toutefois essayé de couvrir tous les aspects actuellement exploitables de ce langage. En
principe, vous devriez réaliser l’ensemble des exercices en une dizaine d’heures, chaque TP individuel demandant de

@
1
 Avant-propos

10 minutes (le plus fréquemment) à 45 minutes (pour les deux TP les plus complexes). N’hésitez toutefois pas à passer
plus de temps sur chaque TP, en testant d’autres valeurs afin de voir le résultat, et d’y revenir par la suite pour mener
vos propres exprériences. Seule la pratique vous assurera la maîtrise de ce langage.
Il sera supposé que vous possédiez une connaissance au moins de base du HTML et de ses principaux éléments : nous
nous intéressons ici uniquement à la présentation, pas à la structure, même si nous devrons évidemment nous appuyer
sur celle-ci. Pour réaliser les exercices, vous devrez disposer d’un éditeur de texte. Si le bloc-notes de base (notepad.
exe sous Windows) peut remplir cet office, je vous recommande toutefois l’éditeur gratuit Notepad++ disponible à
l’adresse https://notepad-plus-plus.org/fr/ pour de nombreux systèmes d’exploitation. Vous devrez également disposer
d’un navigateur Internet, de préférence dans sa dernière version, mais il n’est pas nécessaire d’avoir de connexion
Internet : tout se déroulera en local.
Certaines conventions classiques de la programmation sont employées dans ce livre, essentiellement lors de la
présentation de la syntaxe des propriétés ou fonctions :
AVANT-propos 

• des crochets ([]) signalent un paramètre facultatif. Par exemple :

animation: nom durée [type] [délai] [itération] [direction]
• un signe de pipeline (pipe, |) sert à séparer différentes valeurs possibles mais mutuellement exclusives. Par
exemple :
list-style-type: disc | circle | square
• un paramètre figurant en italique signifie qu’il devra être remplacé par une valeur lors de l’emploi de la propriété.
Soit le terme mentionné est explicite en lui-même (comme dans le cas des paramètres de la propriété animation
ci-dessus), soit il est explicité dans le texte qui suit. Le type de valeur doit être une valeur CSS adaptée ;
• les instructions figurant en gras doivent être saisies par vous-même. Si elles suivent ou sont encadrées de code non
en gras, cela signifie qu’il s’agit d’un ajout à une fraction de code existant.

Vous trouverez sur la page de présentation de l’ouvrage du site Dunod (www.dunod.

com) les fichiers source des exercices employés dans ce livre. Vous devrez les télécharger
et les installer sur votre ordinateur. Je vous recommande de le faire dans un dossier
dédié dans Documents, sous le nom TP_CSS. Deux fichiers correspondent à chaque TP : le fichier
TP_CSS_xx_début.html (où xx est le numéro du TP) est le fichier initial à partir duquel travailler, et le
fichier TP_CSS_xx_fini.html est le fichier à l’issue du TP, pour vous permettre de contrôler éventuellement votre
travail. Il y a quelques fichiers annexes, ainsi qu’un dossier renfermant des images employées par certains exercices :
ne modifiez pas le nom de ce dossier ni l’emplacement des images.

Une dernière précision : CSS est un langage qui applique des propriétés de présentation à des éléments sélectionnés.
Il peut donc être décomposé en deux parties : les sélecteurs et les propriétés. Il est indispensable de maîtriser au moins
raisonnablement les sélecteurs avant de passer à l’étude des propriétés CSS. Il est relativement simple de retrouver la
syntaxe de telle ou telle propriété, si vous vous souvenez de son existence, mais bien plus délicat de sélectionner le ou
les éléments appropriés et eux seulement. Les TP 3 à 8 doivent donc impérativement être effectués et raisonnablement
compris avant de pouvoir passer à la suite.

@
2
 Préfixes dédiés

L
a plus grande partie des derniers travaux CSS sont pris en charge par les navigateurs récents. La situation évolue
en permanence, au rythme de la diffusion de nouvelles versions tant des modules CSS que des navigateurs.

Pour assurer une prise en charge des propriétés récentes avant leur intégration définitive, les navigateurs ont
traditionnellement recours à des variantes dédiées accessibles à l’aide de préfixes qui leur sont propres, présentés dans
le tableau suivant.
Internet Explorer -ms-

Introduction
Firefox -moz-
Chrome/Safari -webkit-
Opera -o-

Ces préfixes permettent ainsi à des versions plus anciennes des navigateurs de pouvoir interpréter les propriétés CSS.
Attention toutefois, la prise en charge de telle ou telle propriété par un navigateur, même en employant son préfixe,
dépend de chaque propriété. Parfois, certaines valeurs uniquement ne sont pas prises en charge pour une propriété
par un navigateur, même avec préfixe.
Par exemple, pour un multi-colonnage avec Firefox, il faudrait encore écrire :
{c-moz-column-count: 3 ;}
Pour garantir une fonctionnalité maximale, il conviendrait d’écrire dans le code, par sécurité :
{-moz-column-count: 3 ;
-ms-column-count: 3 ;
-webkit-column-count: 3 ;
-o-column-count: 3 ;
column-count: 3 ;}
Manifestement, une surcharge importante. Pour éviter de devoir saisir du code inutile, vous pouvez recourir à un
script qui génère automatiquement ces préfixes pour les propriétés et fonctions concernées, en fonction du
navigateur appelant la page. Un des plus célèbres, même s’il en existe bien d’autres, est sans doute prefix-free
(http://leaverou.github.io/prefixfree/). C’est un petit fichier JavaScript (2 ko), développé par Lea Verou, dont le rôle
est d’ajouter automatiquement des préfixes propriétaires.
prefix-free est très simple d’emploi. Ajoutez simplement la ligne
<script type="text/javascript"
© Dunod – Toute reproduction non autorisée est un délit

src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js">
</script>
juste après la déclaration du CSS.
Vous pouvez également installer ce script à la racine de votre site et l’appeler depuis cet emplacement en insérant la
ligne suivante juste après votre feuille de styles (ou l’appel à celle-ci) :
<script type="text/javascript" src="prefixfree.min.js"> </script>
Reportez-vous si nécessaire au site officiel de prefix-free pour plus de détails.
Nous avons inclus ce script dans les fichiers proposés en téléchargement et l’employons systématiquement dans les fichiers
d’exercice afin de garantir la meilleure compatibilité possible avec une vaste palette de navigateurs, même un peu anciens.
En cas de doute sur la prise en charge d’une propriété par tel ou tel navigateur, je vous invite à vérifier sur l’excellent
site http://caniuse.com/.

@
3
 Terminologie : les valeurs CSS
I
l est important de comprendre comment sont exprimées en CSS les valeurs et les unités. Cela est défini par le
module Valeurs et unités Niveau 3 de la spécification CSS 2.1.

Entiers et nombres
Certaines propriétés demandent comme valeur un entier ou un nombre. Celui-ci doit toujours être spécifié selon une
notation décimale, avec zéro ou plus décimales, avec comme séparateur décimal un point. Par exemple :
Introduction

left: 10.5cm

Dimensions
Une dimension est un nombre immédiatement suivi d’un identifiant d’unité, facultatif si la valeur est 0. Il existe deux
types d’unités de distance, relatives (la dimension est proportionnelle à la valeur d’une autre propriété de dimension)
ou absolues.
Type d’unité Identifiant Signification
Unités relatives em Valeur de la propriété font-size de la police du parent
ex Valeur de la propriété x-height de la police du parent
Unités absolues in Pouce. 1in est égal à 2,54 cm.
cm Centimètre
mm Millimètre
pt Point. Un point CSS est égal à 1/72e de pouce.
pc Pica. 1pc est égal à 12 pt.
px Unité pixel. 1px est égal à 0,75 pt.

Par exemple :
font-size: 1.5em
Un pourcentage s’exprime par un nombre immédiatement suivi du signe %. Il est toujours relatif à une autre valeur.
Par exemple :
width: 50%

Couleurs
Une couleur CSS peut être définie de diverses façons, selon le module Couleur Niveau 3 :
• Trois valeurs RGB, exprimées à l’aide de la fonction rgb() sous forme décimale, hexadécimale ou comme pour-
centages.
• Quatre valeurs RGBA à l’aide de la fonction rgba(). Les valeurs hexadécimales ne sont pas autorisées en RGBA.
Le quatrième chiffre, compris entre 0 et 1, détermine l’opacité de la couleur. Les deux déclarations ci-dessous
définissent une opacité explicite de 1 (la valeur par défaut) :
color: rgba(255,0,0,1)
color: rgba(100%,0%,0%,1)

@
4
 Introduction • Terminologie : les valeurs CSS
• Trois valeurs HSL (hue-saturation-lightness, teinte-saturation-luminosité) à l’aide de la fonction hsl(). La teinte est
la couleur exprimée en degrés d’un cercle chromatique (0-360) et la saturation et la luminosité sont exprimées
en pourcentages. Soit par exemple color: hsl(0, 100%, 50%) pour du rouge ou color: hsl(120,
100%, 50%) pour du vert sombre.
• Trois valeurs HSLA à l’aide de la fonction hsla(). C’est la contrepartie de la notation RGBA :
color: hsla(120, 100%, 50%, 1)
• Des noms de couleur étendus, comme blue, red, olive, lightgrey, etc. La valeur transparent
est équivalente à la définition d’un noir transparent rgba(0,0,0,0).

URI (Uniform Resource Identifier)

Ces valeurs sont notées url() (une survivance de l’époque où une URI se nommait une URL). Entre les deux
parenthèses se trouve l’URI elle-même, facultativement encadrée d’apostrophes ou de guillemets, le tout facultativement

Introduction
encadré d’espaces vierges. Les trois exemples ci-dessous sont donc identiques :
url("http://www.monsite.fr/redpoint.png")
url( http://www.monsite.fr/redpoint.png )
url(http://www.monsite.fr/redpoint.png)
© Dunod – Toute reproduction non autorisée est un délit

@
5
 Présentation des exercices
Bloc-notes
À chaque début d’exer-
cice un bloc-notes vous
indique le numéro du TP.
Ce numéro est utile car il
sert de référence pour
d’autres exercices. TP
Sélecteurs de pseudo-classes
5 dynamiques
Introduction

C SS introduit le concept de pseudo-éléments et de pseudo-classes pour permettre une mise en forme fondée
sur des informations extérieures à l’arborescence du document. Les pseudo-classes classifient des éléments
selon certaines de leurs caractéristiques qui ne peuvent être déduites de l’arborescence du document, plutôt que
d’après leur nom, leurs attributs ou leur contenu. Les pseudo-classes peuvent être dynamiques, dans le sens où
une caractéristique peut être modifiée et l’élément perdre ou acquérir une pseudo-classe selon les interactions de
l’utilisateur.
Introduction

LEs sÉLEcTEurs
Prérequis : TP 3 à 4
L’introduction procure des Fichier exemple : TP_CSS_05_début.html
indications sur l’exercice à Durée nécessaire : 10 minutes
venir et contient un encadré
précisant les TP éventuelle-
Ouvrez dans votre éditeur de texte le fichier TP_CSS_05_début.html, puis enregistrez-le sous le nom
ment prérequis et les fichiers
d’exercice employés (à télé-
1 TP_CSS_05.html. Affichez ce fichier dans votre navigateur.

charger sur le site des édi- Certains liens (les éléments A en HTML) font référence
tions Dunod, www.dunod. 2 à un emplacement au sein d’une ressource. Ce type
d’URI se termine par un signe dièse (#) suivi d’un iden-
com). Le temps de réalisation tifiant d’ancre, nommé identificateur de fragment, et constitue
est une estimation du un lien vers un élément du document nommé élément cible
(target), comme dans le fichier exemple (dans le premier
nombre de minutes à accor- élément p) :
der par exercice. <a href="#cible">
Un élément cible peut être représenté par la pseudo-classe :
target. Saisissez :

#cible:target {background-color: pink}

Enregistrez le fichier, rafraîchissez votre navigateur. Cliquez sur le
lien : le tableau, cible de l’ancre, s’affiche avec un arrière-plan
rose.

capture
© Dunod – Toute reproduction non autorisée est un délit

Les pseudo-classes :link et :visited s’appliquent respectivement à des liens non visités et visités. Ces deux pseudo-
Les copies d’écran présen-
tées dans ce livre sont réali-
3 classes sont mutuellement exclusives. En HTML, ces pseudo-classes s’appliquent exclusivement aux éléments a dotés d’un
attribut href. Les deux déclarations suivantes sont équivalentes :

sées sur un ordinateur exé- a:link {color: red ;}

:link {color: red ;}
cutant Windows avec
Et pour un lien visité :
comme navigateur Fire-
fox 54. Si vous possédez un :visited {color: green ;}
autre système d’exploita-
tion ou un autre navigateur
(ou même une version dif-
férente de Firefox) ou si la
fenêtre de votre pro-
@
19

gramme est de taille diffé-

rente, vous pourriez remar-
quer certaines différences.

@
6
 Introduction • Présentation des exercices

puce
Les puces des pas à pas
vous aident à suivre
l’ordre de lecture de
l’exercice.

TP 5 • Sélecteurs de pseudo-classes dynamiques

Saisissez une des règles pour :link, puis la règle pour :visited. Enregistrez le fichier, rafraîchissez votre navigateur (désormais,
nous ne rappellerons plus ces étapes, mais vous devez les respecter après chaque modification du fichier html). Comme nous avons
déjà visité le lien, il s’affiche en vert.

Introduction
La pseudo-classe :hover s’applique lorsque l’utilisateur place son pointeur sur un élément sans l’activer. La pseudo-classe
4 :active s’applique lorsqu’un élément est activé par l’utilisateur, par exemple entre le moment où l’utilisateur appuie sur le
bouton de la souris et celui où il le relâche. La pseudo-classe :focus s’applique lorsque l’élément possède le focus. Un
élément peut posséder simultanément plusieurs de ces pseudo-classes. Saisissez :

a:hover {font-size: 2em ;} Saisissez

a:active {font-size: 3em ;
Les TP vous demanderont de
LEs sÉLEcTEurs

color: blue}
saisir de nouvelles règles CSS.
PrIsE EN MAIN

Lorsque vous placez le pointeur de la souris sur le lien, sa police double de taille. Si vous cliquez sur le lien et maintenez enfoncé le
bouton de la souris, il s’agrandit encore et devient bleu. Presque toujours, les fichiers
d’exercices pos­sèdent déjà une
partie de feuille de styles
remplie : dans l’élément
style, des règles CSS sont
encadrées par les
commentaires /* ne pas
Dans une page, l’utilisateur peut cocher une case ou une option. Certains éléments de menu sont cochés lorsque l’utilisateur toucher à ces règles
5 les sélectionne. En ce cas, la pseudo-classe :checked s’applique. Cette pseudo-classe est dynamique par essence mais peut
être fondée sur la présence d’attributs dans le document (comme les attributs HTML selected et checked). Saisissez :
*/ et /* saisir les
nou­ velles règles à
:checked {width: 100px ;}
partir d’ici */. Ignorez
ces règles : vous pourrez
toujours y revenir plus tard.
Elles servent à mettre en
forme de façon optimale
l’exercice qui vous est
Lorsque vous cochez une des cases des options, l’élément s’agrandit.
proposé. Vous apprendrez
Fermez le fichier TP_CSS_05.html dans l’éditeur et le navigateur. peu à peu ce qu’elles
signifient. Saisissez les
nouvelles règles après le
dernier commentaire.

@
20

zoom
Le plus souvent, les
captures d’écran sont
recadrées sur la zone
pertinente.

@
7
 TP
1
Mise en œuvre de CSS

V ous pouvez appliquer un ou plusieurs styles à votre page de plusieurs façons : dans le corps du document, dans
un élément, à l’aide de l’attribut style ou dans l’élément head, à l’aide d’un élément style ou d’un élément
link.

Prérequis : néant
Fichier exemple : TP_CSS_01_début.html
Durée nécessaire : 10 minutes
Mise en œuvre
prise en main

Ouvrez dans votre éditeur de texte le fichier TP_CSS_01_début.html, puis enregistrez-le sous le nom
1 TP_CSS_01.html. Affichez ce fichier dans votre navigateur (avec Notepad++, choisissez Execution, puis sélectionnez
votre navigateur dans la liste des propositions Launch in…).

La première méthode consiste à saisir des styles dans la À l’intérieur de l’élément head, avec un élément
2 balise d’ouverture d’un élément lui-même, à l’aide de
son attribut style. Cette méthode est hautement
3 style. Cette méthode est normalement réservée à la
mise au point provisoire d’une feuille de styles ou pour
déconseillée. Dans le fichier exemple, ajoutez dans le premier une page unique. C’est pour cette dernière raison que nous
élément p l’attribut et sa valeur figurant en gras ci-dessous : l’emploierons par facilité dans ce livre. Saisissez le code en gras
ci-dessous à l’intérieur de l’élément head, avant sa balise de
<body> fermeture :
<h1>Ce titre est en bleu</h1>
<p style="color:green"> <head>
ce paragraphe est en vert. (…)
</p> <style type="text/css">
</body> h1 {color: blue}
</style>
Enregistrez votre fichier, puis rafraîchissez votre navigateur. Le </head>
paragraphe s’affiche en vert.
Enregistrez votre fichier, puis rafraîchissez votre navigateur. Le
titre s’affiche en bleu.

@
8
 TP 1 • Mise en œuvre de CSS
À l’intérieur de l’élément head, avec un élément Ouvrez dans l’éditeur le fichier style01.css pour
4 link vers une feuille de styles externe. C’est la mé-
thode fortement recommandée. Ajoutez le code en gras
5 en examiner grossièrement le code (sans entrer dans le
détail). Le mécanisme de cascade permet au navigateur
ci-dessous à l’intérieur de l’élément head, avant l’élément de classer les règles selon leur spécificité pour déterminer celle
style : qui est applicable.
Fondamentalement, tout élément hérite du style de son parent
<head> (l’élément qui le contient), sauf si la feuille de styles précise le
(…) contraire. La théorie de l’héritage est donc très simple : vous par-
<link href="style01.css" tez de l’information la plus externe (la feuille de styles externe) et
rel="stylesheet"> progressez vers l’intérieur, comme suit :
<style>
(…) • propriétés de feuille de styles externe de l’élément courant ;
</head>
• propriétés de feuille de styles locale de l’élément courant ;
Enregistrez votre fichier, puis rafraîchissez votre navigateur. Vous • styles de ligne de l’élément courant.
voyez de nouvelles mises en forme s’appliquer au document.
C’est pourquoi dans notre cas, même si la feuille de styles ex-

Mise en œuvre
terne définit une couleur pour le titre et les paragraphes, les
styles définis en interne (dans le head pour le titre et dans l’attri-
but style pour le p) prennent le dessus.
Remarquez toutefois que si l’élément link avait été situé après
l’élément style, dans le head, la feuille de styles externe au-
rait pris le dessus sur les règles de l’élément style, car venant
après. Ce comportement semble toutefois parfois dépendre du
navigateur.
Fermez les fichiers dans l’éditeur et le navigateur.
© Dunod – Toute reproduction non autorisée est un délit

@
9
 TP Rédaction d’une feuille
2
de styles externe
U ne feuille de styles externe est un fichier texte ordinaire, créé dans un éditeur de texte quelconque et enregistré
avec une extension .css. Elle est composée de règles CSS et de commentaires. Une règle CSS se compose d’un
sélecteur suivi d’un bloc contenant une ou plusieurs déclarations.

Prérequis : néant
Fichier exemple : TP_CSS_02_début.html
Mise en œuvre

Durée nécessaire : 5 minutes

prise en main

Ouvrez dans votre éditeur de texte le fichier Veillez à toujours commenter votre code CSS : un commentaire
1 TP_CSS_02_début.html, puis enregistrez-le
sous le nom TP_CSS_02.html. Dans ce fichier,
initial précisant le but de la feuille de styles est indispensable pour
vous y retrouver par la suite.
ajoutez dans l’élément head la ligne en gras ci-dessous :
Saisissez en dessous votre première règle CSS :
<head>
(…)
<link href="style02.css"
4
rel="stylesheet"> h1 {font-style: italic}
</head> Une règle CSS se compose d’un sélecteur suivi d’un bloc de
Enregistrez le fichier puis exécutez-le dans votre navigateur. déclaration(s) :

• Un sélecteur se compose de tout ce qui précède la première

accolade ouvrante ({). Ici c’est h1, faisant référence à
l’élément HTML h1 de titre de premier niveau.
• Un bloc de déclaration débute par une accolade ouvrante ({)
et se termine par une accolade fermante (}). Des espaces à
l’intérieur des accolades sont facultatifs.
• Une déclaration est vide ou se compose du nom d’une
propriété (ici font-style) suivi d’un signe deux-points
(:) et d’une valeur (ici italic). Des espaces autour du
signe deux-points sont facultatifs.
Ouvrez dans votre éditeur de texte un nouveau fichier,
2 puis enregistrez-le sous le nom style02.css.
Enregistrez le fichier, puis rafraîchissez le navigateur : le titre ap-
paraît en italique.

Dans le fichier style02.css, saisissez une première

3 ligne :

/* Feuille de styles style02.css du TP

CSS 02 */
C’est un commentaire : il débute par les caractères /* et finit par
*/. Il peut comporter plusieurs lignes et se situer n’importe où
dans la feuille de styles. Son contenu est sans effet sur le rendu.
Il est impossible d’imbriquer des commentaires.

@
10
 TP 2 • Rédaction d’une feuille de styles externe
Saisissez maintenant à la suite les règles ci-dessous. Ne cherchez pas à quoi correspondent les sélecteurs ou les déclarations
5 employés, nous y reviendrons largement : regardez simplement la structure.

h1 {font-weight: bold}
h1 {font-size: 2em}
Plusieurs déclarations peuvent être rassemblées en un bloc, sous
forme de liste séparée par des points-virgules (;). Les trois règles
précédentes peuvent être rassemblées en procédant comme
montré ci-dessous : ajoutez les points-virgules bleus et remplacez
ce qui est rouge barré par des espaces.
h1 {font-style: italic ;}
h1 {font-weight: bold ;}
hi {font-size: 2em ;}

Mise en œuvre
N’oubliez surtout pas le point-virgule à la fin de chaque déclaration. Il est d’ailleurs conseillé de le mettre même lorsqu’il n’y a qu’une
déclaration, cela évitant toute erreur potentielle en cas d’ajout de déclaration. Et remarquez comme les indentations clarifient le code.
Enregistrez le fichier, puis rafraîchissez le navigateur.

Saisissez à la suite les règles ci-dessous : Pour attribuer une même règle à plusieurs éléments,
6 7 séparez les sélecteurs par une virgule. Saisissez la règle
suivante :

div {background-color: grey ; div, p {margin: 10px ;}

color: white ;}
p {background-color:
rgba(255,255,255,.6) ;
color: blue ;}
Enregistrez le fichier, puis rafraîchissez le navigateur.

Même si elle reste rudimentaire, vous avez construit ici une pre-
mière feuille de styles. C’est ainsi qu’il faudrait rédiger votre CSS,
que ce soit avec une feuille externe ou dans un élément style
à l’intérieur de l’élément head. Dans ce livre, nous placerons
toujours les déclarations CSS à l’intérieur de l’élément head,
dans un élément style, comme exposé à l’étape 3 du TP pré-
cédent, afin d’éviter une inutile multiplication de fichiers.
© Dunod – Toute reproduction non autorisée est un délit

Fermez le fichier TP_CSS_02.html dans l’éditeur et le navigateur, ainsi que le fichier CSS dans l’éditeur.

@
11
 Les sélecteurs
Fondamentalement, CSS se décompose en deux parties : les sélecteurs, pour sélectionner le ou les éléments
concernés, et les propriétés appliquées à ou aux éléments sélectionnés. Il est indispensable de maîtriser au moins
raisonnablement les sélecteurs avant de passer à l’étude des propriétés CSS. Nous ne le rappellerons pas dans les
prérequis tellement cela est fondamental.
Un sélecteur CSS détermine quels éléments sont identifiés dans le document : autrement dit, à quoi vont s’appliquer

LES SÉLECTEURS
le ou les styles définis dans le bloc de déclaration qui le suit. Ce peut être un simple nom d’élément ou une chaîne
complexe de sélecteurs séparés par des opérateurs de combinaison. Le module Sélecteurs Niveau 3 a été intégré
à la spécification CSS 2.1.
© Dunod – Toute reproduction non autorisée est un délit

@
13
 TP
3
Sélecteurs d’éléments

L a première catégorie de sélecteurs sélectionne des éléments directement d’après leur nom ou leur situation directe
dans le document.

Prérequis : néant
Fichier exemple : TP_CSS_03_début.html
Durée nécessaire : 10 minutes
LES SÉLECTEURS
prise en main

Ouvrez dans votre éditeur de texte le fichier TP_CSS_03_début.html, puis enregistrez-le sous le nom
1 TP_CSS_03.html. Affichez ce fichier dans votre navigateur.

Le sélecteur universel * correspond à tous les types Il est parfois souhaitable de sélectionner des éléments
2 d’éléments de l’arborescence du document, donc à tous
les éléments. Un sélecteur de type, plus restrictif, identi-
3 qui sont des descendants d’un autre élément. Vous
créez un sélecteur de descendant en combinant deux
fie toute instance d’un unique type d’élément dans le document. sélecteurs séparés par un espace vierge. Ajoutez une nouvelle
Saisissez dans l’élément style de l’élément head : règle dans l’élément style :

p {color: blue ;} div p {color: red ;}

Enregistrez le fichier, rafraîchissez votre navigateur. Tous les élé- Enregistrez le fichier, rafraîchissez votre navigateur. Tout élément
ments p du document sont affichés en bleu. p descendant d’un élément div est affiché en rouge.

@
14
 TP 3 • Sélecteurs d’éléments
Il est possible de créer des sélecteurs de descendants
4 plus complexes. Saisissez :

div * p {color: green ;}

Un sélecteur complexe se lit généralement mieux en allant de la
droite vers la gauche : vous sélectionnez ici les éléments p des-
cendants de n’importe quel élément (le sélecteur universel *)
lui-même descendant d’un élément div. Enregistrez le fichier,
rafraîchissez votre navigateur.

LES SÉLECTEURS
Vous pouvez combiner des sélecteurs de descendants
6 et d’enfants. Ajoutez la règle :

div ol>li p {color: purple}

Vous identifiez ici un élément p descendant d’un élément
li (ligne de liste), lui-même un enfant direct d’un élément ol
(liste numérotée), lui-même descendant d’un élément div.
Remarquez que les espaces vierges facultatifs autour du combi-
nateur > sont ici absents, ce qui nuit un peu à la lisibilité. Mieux
vaut toujours les ajouter. Enregistrez le fichier, rafraîchissez votre
Un sélecteur d’enfant identifie un élément qui est l’en-
5 fant direct d’un autre élément. Le combinateur employé
est le signe supérieur (>). Cette règle va s’appliquer à
navigateur.

tous les éléments p enfants directs de l’élément body (mais

donc pas à tous les p, comme la première règle que nous avions
écrite) :

body > p {font-style: italic}

Enregistrez le fichier, rafraîchissez votre navigateur.
© Dunod – Toute reproduction non autorisée est un délit

@
15
 TP 3 • Sélecteurs d’éléments
Un sélecteur de parent adjacent identifie un élément Vous pouvez sélectionner un élément frère d’un autre
7 frère d’un autre élément et situé immédiatement après
ce dernier. Il est créé à l’aide du combinateur +.
8 élément, situé n’importe où après lui à l’aide du sélec-
teur de frère, créé à l’aide du combinateur ~ .

li + li {color: olive} div ~ ul {margin-left: 10px}

Enregistrez le fichier, rafraîchissez votre navigateur. Tout élément Enregistrez le fichier, rafraîchissez votre navigateur. Toute liste à
de liste sauf le premier possédera une police olive (les éléments puces ul située après (mais pas forcément immédiatement) un
suivants ont toujours un élément li comme frère précédant). élément div possède une marge gauche de 10 pixels (il n’y en
a qu’une dans notre fichier exemple).
LES SÉLECTEURS
prise en main

Fermez le fichier TP_CSS_03.html dans l’éditeur et le navigateur.

@
16
 TP
4
Sélecteurs d’attributs

L a seconde catégorie de sélecteurs sélectionne des éléments d’après certains de leurs attributs, dont essentiellement
la classe (attribut class) ou l’identifiant (attribut id).

Prérequis : TP 3
Fichier exemple : TP_CSS_04_début.html
Durée nécessaire : 10 minutes

LES SÉLECTEURS
Ouvrez dans votre éditeur de texte le fichier TP_CSS_04_début.html, puis enregistrez-le sous le nom
1 TP_CSS_04.html. Affichez ce fichier dans votre navigateur.

Un sélecteur d’attribut peut être spécifié de plusieurs

2 façons, les deux principales étant les suivantes :

• [att] : identifie tous les éléments dont l’attribut att est

défini, quelle que soit sa valeur ;
• [att=val] : identifie tous les éléments dont l’attribut
att est défini avec exactement la valeur val.
L’emploi le plus fréquent de ce type de sélecteur est avec
l’attribut class. Saisissez dans l’élément style le code
suivant :

*[class=premier] {color: blue ;}

Enregistrez le fichier, rafraîchissez votre navigateur. Tout élément
dont l’attribut class est exactement fixé à premier est affi-
ché en bleu (il n’y en a qu’un ici).
© Dunod – Toute reproduction non autorisée est un délit

En HTML, div.valeur et div[class~=valeur] signifient la même chose. Les règles suivantes sont équivalentes.
3 Cette syntaxe avec le point se nomme sélecteur de classe :

*[class=premier] {color: blue ;}

*.premier {color: blue ;}
Lorsque le sélecteur universel * précède immédiatement un point, vous pouvez l’omettre : il est implicite. La règle suivante est donc
aussi équivalente. Remplacez la règle précédente par celle-ci.

.premier {color: blue ;}

L’équivalence n’est en réalité pas totale, car le sélecteur de classe est moins sélectif : tous les éléments dont la valeur de l’attribut
class contient le mot premier seront sélectionnés. Donc ici également l’élément div de classe premier cadre et par
héritage tous ses enfants.

@
17
 TP 4 • Sélecteurs d’attributs
Vous pouvez définir un sous-ensemble de valeurs séparées par un point. Saisissez :

div.premier.cadre {border: 1px solid black ;}

Enregistrez le fichier, rafraîchissez votre navigateur. Cette règle attribue une bordure noire continue à tout élément div dont l’attribut
class possède une liste de mots séparés par des espaces comprenant premier et cadre.
LES SÉLECTEURS
prise en main

CSS a accordé tant de puissance à l’attribut class que les auteurs conçoivent souvent leur propre langage de document
4 d’après des éléments dépourvus de toute présentation associée (comme des div et span), en affectant les informations de
style à l’aide de l’attribut class. C’est une (mauvaise) habitude à éviter : les éléments structuraux d’un langage possèdent
des significations universelles, contrairement aux classes définies par l’utilisateur.

Un attribut de type identifiant (ID) permet d’identifier de façon unique un élément. En HTML cet attribut se nomme id.
5 L’attribut id permet d’affecter un identifiant à une instance unique d’un élément dans l’arborescence de document. Un sélec-
teur d’id CSS contient un signe dièse (#) immédiatement suivi de la valeur de l’id, qui doit être un identifiant. Par exemple,
saisissez :

li#super {font-weight: bold}

Enregistrez le fichier, rafraîchissez votre navigateur. Cette règle affiche en gras l’unique élément li dont l’attribut id possède la valeur
super.

Un sélecteur d’ID est plus spécifique qu’un sélecteur d’attribut. Par exemple, en HTML, le sélecteur #p123 est plus spécifique que le
sélecteur [id=p123] en termes de cascade.

Fermez le fichier TP_CSS_04.html dans l’éditeur et le navigateur.

@
18
 TP
Sélecteurs de pseudo-classes
5 dynamiques
C SS introduit le concept de pseudo-éléments et de pseudo-classes pour permettre une mise en forme fondée
sur des informations extérieures à l’arborescence du document. Les pseudo-classes classifient des éléments
selon certaines de leurs caractéristiques qui ne peuvent être déduites de l’arborescence du document, plutôt que
d’après leur nom, leurs attributs ou leur contenu. Les pseudo-classes peuvent être dynamiques, dans le sens où
une caractéristique peut être modifiée et l’élément perdre ou acquérir une pseudo-classe selon les interactions de
l’utilisateur.

LES SÉLECTEURS
Prérequis : TP 3 à 4
Fichier exemple : TP_CSS_05_début.html
Durée nécessaire : 10 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_05_début.html, puis enregistrez-le sous le nom
1 TP_CSS_05.html. Affichez ce fichier dans votre navigateur.

Certains liens (les éléments A en HTML) font référence

2 à un emplacement au sein d’une ressource. Ce type
d’URI se termine par un signe dièse (#) suivi d’un iden-
tifiant d’ancre, nommé identificateur de fragment, et constitue
un lien vers un élément du document nommé élément cible
(target), comme dans le fichier exemple (dans le premier
élément p) :

<a href="#cible">
Un élément cible peut être représenté par la pseudo-classe :
target. Saisissez :

#cible:target {background-color: pink}

Enregistrez le fichier, rafraîchissez votre navigateur. Cliquez sur le
lien : le tableau, cible de l’ancre, s’affiche avec un arrière-plan
rose.
© Dunod – Toute reproduction non autorisée est un délit

Les pseudo-classes :link et :visited s’appliquent respectivement à des liens non visités et visités. Ces deux pseudo-
3 classes sont mutuellement exclusives. En HTML, ces pseudo-classes s’appliquent exclusivement aux éléments a dotés d’un
attribut href. Les deux déclarations suivantes sont équivalentes :

a:link {color: red ;}

:link {color: red ;}
Et pour un lien visité :

:visited {color: green ;}

@
19
 TP 5 • Sélecteurs de pseudo-classes dynamiques
Saisissez une des règles pour :link, puis la règle pour :visited. Enregistrez le fichier, rafraîchissez votre navigateur (désormais,
nous ne rappellerons plus ces étapes, mais vous devez les respecter après chaque modification du fichier html). Comme nous avons
déjà visité le lien, il s’affiche en vert.

La pseudo-classe :hover s’applique lorsque l’utilisateur place son pointeur sur un élément sans l’activer. La pseudo-classe
4 :active s’applique lorsqu’un élément est activé par l’utilisateur, par exemple entre le moment où l’utilisateur appuie sur le
bouton de la souris et celui où il le relâche. La pseudo-classe :focus s’applique lorsque l’élément possède le focus. Un
élément peut posséder simultanément plusieurs de ces pseudo-classes. Saisissez :

a:hover {font-size: 2em ;}

a:active {font-size: 3em ;
LES SÉLECTEURS

color: blue}
prise en main

Lorsque vous placez le pointeur de la souris sur le lien, sa police double de taille. Si vous cliquez sur le lien et maintenez enfoncé le
bouton de la souris, il s’agrandit encore et devient bleu.

Dans une page, l’utilisateur peut cocher une case ou une option. Certains éléments de menu sont cochés lorsque l’utilisateur
5 les sélectionne. En ce cas, la pseudo-classe :checked s’applique. Cette pseudo-classe est dynamique par essence mais peut
être fondée sur la présence d’attributs dans le document (comme les attributs HTML selected et checked). Saisissez :

:checked {width: 100px ;}

Lorsque vous cochez une des cases des options, l’élément s’agrandit.

Fermez le fichier TP_CSS_05.html dans l’éditeur et le navigateur.

@
20
 TP
Sélecteurs de pseudo-classes
6 structurelles
L e concept de pseudo-classes structurelles correspond à des classes présentes dans l’arborescence du document
mais qui ne peuvent être représentées par d’autres sélecteurs simples ou combinateurs. Par exemple, la pseudo-
classe :root correspond à l’élément racine du document. En HTML, c’est toujours l’élément html.

Prérequis : néant
Fichier exemple : TP_CSS_06_début.html

LES SÉLECTEURS
Durée nécessaire : 20 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_06_début.html, puis enregistrez-le sous le nom
1 TP_CSS_06.html. Affichez ce fichier dans votre navigateur.

Le sélecteur :nth-child(x) identifie un élément La valeur an+b peut être remplacée par odd ou even.
2 qui est le xe enfant d’un parent. Sa syntaxe exacte est
:nth-child(an+b), où a et b sont des entiers
3 odd est équivalent à 2n+1 et even à 2n. Il est ainsi
possible de sélectionner chaque ligne d’un tableau, ou
positifs, négatifs ou nuls (mais pas simultanément). Pour des va- d’alterner les couleurs de paragraphes. Saisissez, avec ou sans le
leurs de a et b supérieures à zéro, cela répartit les enfants de commentaire :
l’élément en groupes de a éléments (le dernier groupe compre-
nant le reste) et sélectionne le b élément de chaque groupe. Le tr:nth-child(odd) {
premier enfant d’un élément possède comme index 1. Par background-color:
exemple, saisissez : rgba(210,210,255,.8);}
/* chaque ligne impaire */
tr:nth-child(4n+1) {color: navy ;} tr:nth-child(even) {
tr:nth-child(4n+2) {color: green ; background-color:
font-style: italic ;} rgba(200,235,230,.8) ;}
tr:nth-child(4n+3) {color: red ; /* chaque ligne paire */
font-weight: bold ;}
tr:nth-child(4n+4) {color: purple ; Les valeurs de a et b sont interprétées comme suit :
font-family: monospace ;}
• si a et b sont tous deux égaux à zéro, la pseudo-classe ne
Ici, nous avons créé des groupes de 4 éléments (a = 4) et avons représente aucun élément du document. La valeur a peut
attribué un style à chaque élément de chaque groupe. Remar- être négative, mais seules les valeurs positives de an+b (n
quez qu’il a été ajouté des modifications de la police pour mieux étant toujours positif) peuvent représenter un élément du
mettre en évidence les différences. document ;
© Dunod – Toute reproduction non autorisée est un délit

• si a est égal à zéro, la partie an peut être omise, sauf si la

partie b est elle-même absente. En l’absence de a, le signe
+ devant b peut aussi être omis. La syntaxe devient alors
:nth-child(b). Ainsi, :nth-child(0n+5) et
:nth-child(5) représentent tous deux uniquement le
5e enfant de l’élément parent ;
• si b est égal à zéro, chaque ae élément est sélectionné et la
partie +b (ou -b) peut être omise (sauf si la partie a est déjà
omise). Ainsi, tr:nth-child(2n+0) et tr:nth-
child(2n) représentent tous deux chaque ligne paire
d’un tableau HTML.

Cela paraît plus compliqué que cela n’est en réalité, avec

un peu d’expérience.

@
21
 TP 6 • Sélecteurs de pseudo-classes structurelles

Cette règle agrandit et met en gras le dernier enfant p de tout

élément div.
LES SÉLECTEURS

La pseudo-classe :nth-of-type() représente un

prise en main

7 élément possédant des descendants avec le même nom

développé d’élément situés avant dans l’arborescence de
document. Sa syntaxe est également analogue à celle de la pseu-
do-classe :nth-child() et elle accepte comme celle-ci des
arguments even et odd.

Saisissez :
La pseudo-classe :first-child identifie un
4 élément qui est le premier enfant d’un autre élément.
Elle est strictement identique à :nth-child(1). th:nth-of-type(2n) {font-size: 1.3em ;}
Saisissez :
Chaque en-tête pair (donc ici uniquement le deuxième) voit sa
h1 > span:first-child { police agrandie. Cette pseudo-classe permet par exemple de faire
font-style:italic ; alterner la position d’images flottantes :
font-size: 0,75em ;}
img:nth-of-type(2n+1) {float: right ;}
img:nth-of-type(2n) {float: left ;}

Cette règle s’applique à tout élément span premier enfant

d’un élément h1, le plaçant en italique et diminuant sa taille de
25 %.

La pseudo-classe :nth-last-child(an+b) iden-

5 tifie un élément qui possède des descendants situés plus
loin dans l’arborescence du document. Sa syntaxe est
identique à celle de la pseudo-classe :nth-child(). Comme
elle, elle accepte les arguments even et odd.
Ainsi, tr:nth-last-child(-n+2) identifie les deux der-
nières lignes d’un tableau HTML, tandis que p:nth-last-
child(odd) identifie tous les éléments p impairs de leur
élément parent, à partir du dernier.

La pseudo-classe :last-child identifie un élément

6 qui est le dernier enfant d’un autre élément. Elle est stric-
tement identique à :nth-last-child(1).

div > p:last-child {font-weight: bold ;

font-size: 1,25em ;}

@
22
 TP 6 • Sélecteurs de pseudo-classes structurelles
Il existe de nombreuses autres pseudo-classes structu-
8 relles :
La pseudo-classe :first-of-type représente un
élément qui est le premier enfant de ce type dans la liste des
enfants de son élément parent. Identique à :nth-of-
type(1). Par exemple, table tr:first-of-type
identifie la première ligne tr d’un tableau HTML :

.ventes tr:first-of-type {
background-color:
rgba(100,100,100,1) ;
color: white ;}

Autre pseudo-classe précieuse, :empty représente un

10

LES SÉLECTEURS
élément dépourvu de tout enfant et de tout contenu.
Les commentaires, les instructions de traitement et
autres nœuds sont sans effet. Saisissez :

p:empty {display: none}

La pseudo-classe :nth-last-of-type() est similaire à la

précédente, si ce n’est qu’elle représente un élément possédant
an+b-1 descendants avec le même nom après dans l’arbores-
cence de document. Cela permet ici de supprimer totalement de l’affichage des élé-
ments p vides (<p></p>) qui occupaient auparavant une
La pseudo-classe :last-of-type est identique à place inutile. Cela peut être particulièrement utile avec du conte-
9 :nth-last-of-type(1), identifiant un élément
qui est le dernier de son type dans la liste des enfants de
nu généré dynamiquement et pouvant engendrer des éléments
vides.
l’élément parent. Ainsi, table > tr:last-of-type
représente la dernière ligne tr d’un tableau : Enfin, la pseudo-classe de négation :not(X) prend

.ventes tr:last-of-type {
11 comme argument un sélecteur simple (sauf la pseudo-
classe de notation elle-même). Elle représente un élé-
background-color: ment qui n’est pas représenté par son argument. Il est interdit
rgba(50,50,50,1) ; d’imbriquer des négations ou d’employer des pseudo-éléments
color: white ; (qui ne sont pas des sélecteurs simples) comme arguments. Par
font-weight: bold ;} exemple, button:not([disabled]) représente tous les
éléments button d’un document HTML qui ne sont pas dé-
sactivés. Saisissez :

section > :not(div) {color: green}

© Dunod – Toute reproduction non autorisée est un délit

Les enfants directs des éléments section sont des éléments

La pseudo-classe :only-child représente un élément en- p et non div : ils s’affichent donc en vert.
fant unique de son parent. Identique à :first-child:last-
child ou :nth-child(1):nth-last-child(1), Fermez le fichier TP_CSS_06.html dans l’éditeur et le navi-
mais avec une spécificité inférieure. gateur.
La pseudo-classe :only-of-type représente un élément
dont le type est enfant unique de son parent. Identique à
:first-of-type:last-of-type ou à :nth-of-
type(1):nth-last-of-type(1), mais avec une spécifi-
cité inférieure. Saisissez :

div > p:only-of-type {color: blue ;}

@
23
 TP
Sélecteurs
7 de pseudo-éléments
U n pseudo-élément crée une abstraction d’arborescence de document allant au-delà de ce qui est spécifié par le
langage du document. Les pseudo-éléments CSS permettent d’affecter un style à un contenu inexistant dans le
document source. Un pseudo-élément était autrefois écrit avec un signe deux-points (:) suivi du nom du pseudo-
élément. Il doit désormais s’écrire avec deux signes deux-points (::) suivis du nom du pseudo-élément, afin de mieux
distinguer les pseudo-éléments des pseudo-classes. Si l’ancienne syntaxe reste toutefois acceptée pour les pseudo-
éléments CSS 1 et 2, mieux vaut adopter la syntaxe standard pour tous les pseudo-éléments.
LES SÉLECTEURS

Un sélecteur ne peut posséder qu’un seul pseudo-élément, obligatoirement situé après le dernier sélecteur simple
prise en main

d’un sélecteur.

Prérequis : TP 3 à 6
Fichier exemple : TP_CSS_07_début.html
Durée nécessaire : 20 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_07_début.html, puis enregistrez-le sous le nom
1 TP_CSS_07.html. Affichez ce fichier dans votre navigateur.

Le pseudo-élément ::first-line applique un style au contenu de la première ligne mise en forme d’un paragraphe.
2 Vous pouvez lui appliquer toutes les propriétés de police, de couleur, de fond, d’espacement de mots et de lettres, de déco-
ration et de transformation de texte et de hauteur de ligne. Saisissez :

p.un::first-line {font-size: 1.5em ;}

Cette règle agrandit d’une demi-fois la taille de la police de la première ligne du paragraphe de classe un, bien que le sélecteur
p::first-line n’identifie aucun élément HTML réel.
La longueur de la première ligne mise en forme dépend de nombreux facteurs, dont la largeur de la page, la taille de la police, etc.
Modifiez la largeur de la fenêtre du navigateur pour modifier en conséquence la largeur de la première ligne.

@
24
 TP 7 • Sélecteurs de pseudo-éléments
Le pseudo-élément ::first-letter sélectionne la première lettre de la première ligne d’un bloc, non précédée d’un
3 autre contenu. Cet élément peut être employé pour créer des lettrines, un classique effet typographique. Les signes de ponc-
tuation, dont les guillemets et apostrophes, qui précèdent ou suivent la première lettre sont inclus. Un chiffre est considéré
comme première lettre (le 1 de 12, par exemple). Des lettres combinées (comme le œ de œil en français) sont considérées comme
première lettre. Saisissez :

p.deux::first-letter {font-weight: bold ;}

La première lettre doit obligatoirement être présente dans la première ligne de texte mise en forme. Vous pouvez employer ce
pseudo-élément avec tout élément bloc renfermant du texte, ou un descendant de même flux renfermant du texte. Vous pouvez lui

LES SÉLECTEURS
appliquer les propriétés de police, de transformation et de décoration de texte, de marge, d’espacement, de bordure, de couleur, de
fond, d’espacement de lettres et de mots (si adéquat), de hauteur de ligne, et d’alignement vertical (uniquement si float est fixé à
none).

Si l’élément ::first-letter est inclus dans un élément ::first-line, il hérite, tout en les outrepassant le cas
4 échéant, des propriétés définies sur ::first-ligne.

p::first-letter {
font-style: italic ;
font-size: 1.5em ;
color: red ;}
© Dunod – Toute reproduction non autorisée est un délit

@
25
 TP 7 • Sélecteurs de pseudo-éléments
Les pseudo-éléments ::before et ::after servent à insérer du contenu généré avant ou après le contenu d’un
5 élément. Le contenu inséré est spécifié à l’aide de la propriété content, employée exclusivement avec ces deux pseudo-
éléments. Sa syntaxe complète est la suivante :

content: normal | none | [ chaîne | uri | compteur | attr(identifiant) |

open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
mais les valeurs les plus employées (outre la valeur compteur sur laquelle nous reviendrons plus tard) sont celles montrées dans
les exemples suivants. Saisissez :

p.remarque::before {content: "REMARQUE : "}

LES SÉLECTEURS
prise en main

Cette règle insère la chaîne « REMARQUE : » avant le contenu de tout élément P dont l’attribut class a pour valeur remarque.
Il est possible d’insérer des sauts de ligne dans une chaîne générée à l’aide de la séquence d’échappement \A. Un contenu généré
ne modifie pas l’arborescence du document. Comme vous pouvez le constater, lorsque les pseudo-éléments ::first-letter et/
ou ::first-line sont appliqués à du contenu généré avec ::before et ::after, ils s’appliquent à la première lettre ou ligne
de l’élément qui comprend le contenu généré.

Essayons un autre type de contenu, une image. Saisissez :

6
p.remarque2::before {content: url(img/attention.jpg)}

Cette règle insère l’image nommée attention.jpg et située dans le dossier img situé à la racine du site avant tout élément
P dont l’attribut class a pour valeur remarque2.

Fermez le fichier TP_CSS_07.html dans l’éditeur et le navigateur.

@
26
 TP
8
Spécificité d’un sélecteur

T ous les sélecteurs n’ont pas la même spécificité. En principe, toute règle annule une règle précédente (située plus
haut dans la feuille de styles), sauf si la premièrte est plus spécifique, autrement dit plus précise.

Prérequis : TP 3 à 7
Fichier exemple : TP_CSS_08_début.html
Durée nécessaire : 10 minutes

LES SÉLECTEURS
Ouvrez dans votre éditeur de texte le fichier TP_CSS_08_début.html, puis enregistrez-le sous le nom
1 TP_CSS_08.html. Affichez ce fichier dans votre navigateur.

La spécificité d’un sélecteur est calculée à l’aide de trois nombres a, b et c, comme suit :
2
• a = nombre de sélecteurs d’ID dans le sélecteur ;
• b = nombre de sélecteurs de classe, d’attribut et de pseudo-classe dans le sélecteur ;
• c = nombre de sélecteurs de type et de pseudo-élément dans le sélecteur.
Le sélecteur universel est ignoré. De multiples occurrences du même sélecteur sont toutes comptées. Un sélecteur présent dans une
pseudo-classe de négation est compté, mais pas la pseudo-classe de négation elle-même.
Les trois nombres a, b et c sont concaténés (et non additionnés) pour donner la spécificité. Saisissez une par une les règles suivantes,
en regardant à chaque étape l’aspect obtenu :

* {font-style: italic ;}
Tous les éléments voient leur texte s’afficher en italique. Cette règle ne possède aucun sélecteur, puisque le sélecteur universel est
ignoré. Sa spécificité est donc de zéro.

li {font-style: normal ;}
Cette règle possède un sélecteur de type. On obtient a = 0, b = 0, c = 1, donc une spécificité de 001 ou 1 : cette règle l’emporte sur
la précédente et les éléments li (lignes de liste) ne sont plus affichées en italique.

ul li {color: blue ;}
© Dunod – Toute reproduction non autorisée est un délit

Cette règle possède deux sélecteurs de type. On obtient a = 0, b = 0, c = 2, donc une spécificité de 002 ou 2 : cette règle l’emporte
sur les précédentes et les lignes de listes à puces (éléments li enfants d’un élément ul) sont affichées en bleu.

@
27
 TP 8 • Spécificité d’un sélecteur
Poursuivez en saisissant de nouvelles règles :
3
ul li + li {color: green ;}
Il y a ici trois sélecteurs de type, donc une spécificité de 3. Les lignes qui suivent une autre ligne dans une liste à puces (autrement dit,
toutes sauf la première) sont affichées en vert.

ul *[REL="un"] {color: red ;}

Un sélecteur de type et un sélecteur d’attribut, donc une spécificité de 11. Tout enfant d’une liste à puces dont l’attribut REL a pour
valeur un devient rouge : la troisième ligne.

ul li + li.red {background-color: rgba(255,150,150,.9) ;}

Trois sélecteurs de type et un sélecteur de classe : une spécificité de 13. Le fond des deux lignes de liste à puces de classe red devient
LES SÉLECTEURS

rouge pâle.
prise en main

Poursuivez en saisissant trois dernières règles, en regardant toujours à chaque fois l’effet obtenu :
4
li.red.cadre {border: 4px solid green ;}
Un sélecteur de type mais deux sélecteurs de classe, d’où une spécificité de 21. La ligne de classe red cadre affiche un cadre vert.

#imp {font-weight: bold ;}

Un sélecteur d’ID : la spécificité est de 100.

#imp:not(div) {background-color: rgb(220,220,200) ;}

Un sélecteur d’ID, un sélecteur de pseudo-classe et un sélecteur
de type, d’où une spécificité de 111 qui primera sur la règle
précédente. Le fond de la ligne à attribut id égal à imp devient
gris, puisque ce n’est pas un élément div.
Les règles ont été saisies ici dans l’ordre de spécificité croissante,
si bien que l’ordre d’apparition va dans le même sens, mais si
vous modifiez cet ordre vous constaterez que l’effet reste le
même.
Un style défini avec l’attribut html style possède toujours
une spécificité supérieure.
Fermez le fichier TP_CSS_08.html dans l’éditeur et le
navigateur.

@
28
 Modèle de boîtes CSS

MODÈLE DE BOÎTES CSS

Tout élément CSS possède des propriétés dites de « boîtes CSS » déterminant quand et où l’élément sera affiché.
Deux catégories principales de propriétés doivent être distinguées à ce stade : celles intrinsèques à l’élément, qui
définissent ses caractéristiques internes, et celles relatives à la page ou au flux du code HTML. Ces dernières
définissent la position de l’élément à l’écran.
Tout élément CSS peut être vu comme une imbrication successive de quatre boîtes : de l’intérieur vers l’extérieur,
l’aire de contenu, l’aire d’espacement, l’aire de bordure et enfin l’aire de marge, comme le montre le schéma
ci-dessous.

à l’exception (normalement) du contenu, ces zones sont souvent de taille nulle (même si cela dépend également
du navigateur). De ce fait, il est facile de penser abusivement que la taille visuelle d’un élément est celle de sa boîte
© Dunod – Toute reproduction non autorisée est un délit

de contenu. Cela est faux. Le bord externe gauche représente le bord d’un élément, y compris l’espacement, la
bordure et la marge. Le bord interne gauche représente le bord du seul élément, à l’exclusion de l’espacement, la
bordure et la marge. Et il en va de même pour les trois autres côtés.
Cela est compliqué du fait que la propriété width (largeur) d’un élément définit la largeur du contenu, soit la
distance entre le bord interne gauche et le bord interne droit. De même, sa hauteur (propriété height) est égale
à la hauteur du contenu, soit la distance entre le bord interne haut et le bord interne bas. Mais les largeurs affichées
dépendront du paramètrage des propriétés des trois autres aires.

@
29
 TP
9
Propriétés de marge

L ’aire de marge est la boîte la plus externe d’un bloc CSS. Elle occupe le maximum de l’espace disponible (ou
MODÈLE DE BOÎTES CSS

spécifié). Les marges sont toujours transparentes et leurs dimensions sont gérées par la propriété margin, qui à
l’aide de ses propriétés associées définit la taille de l’espace transparent entre le bord de l’écran (ou d’un élément parent)
et l’élément actif.

Prérequis : néant
Fichier exemple : TP_CSS_09_début.html
prise en main

Durée nécessaire : 10 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_09_début.html, puis enregistrez-le sous le nom
1 TP_CSS_09.html. Affichez ce fichier dans votre navigateur.

Les propriétés de marge se nomment assez logiquement margin-côté, où côté possède les valeurs left,
2 right, top ou bottom. La syntaxe de ces propriétés est la suivante :

margin-côté: largeur | pourcentage | auto | inherit

largeur spécifie une largeur fixe, pourcentage une valeur calculée d’après la largeur de l’élément conteneur, auto une
valeur calculée selon un algorithme complexe dépendant de nombreux facteurs. La valeur par défaut est 0. Des valeurs négatives sont
autorisées, mais le résultat peut varier selon les navigateurs. Saisissez :

div.a {margin-top: 20px ;}

div.a {margin-bottom: 20px ;}
div.a {margin-right: 50px ;}
div.a {margin-left: 50px ;}

@
30
 TP 9 • Propriétés de marge
Les propriétés de marge possèdent une forme raccourcie, la propriété margin. Celle-ci peut accepter de une à quatre
3 valeurs, dont la signification est la suivante :

margin: touscôtés
margin: hautbas droitgauche
margin: haut droitgauche bas
margin: haut droit gauche bas
Remarquez que seuls des espaces séparent les valeurs individuelles. Pour obtenir une marge de 20 pixels en haut et en bas et une
marge de 50 pixels à droite et à gauche pour des éléments div de classe a, vous pourriez employer indifféremment :

MODÈLE DE BOÎTES CSS

div.a {margin: 20px 50px}
div.a {margin: 20px 50px 20px}
div.a {margin: 20px 50px 50px 20px}
Remplacez la règle précédente par :

div.a {margin: 20px 50px}

L’aspect obtenu est strictement identique.

Un emploi souvent méconnu des marges est pour centrer un élément non textuel dans son conteneur parent. Pour le texte,
4 il existe la propriété text-align, comme nous le verrons plus loin, mais celle-ci est inopérante pour les contenus non
textuels. L’astuce consiste à employer la valeur auto de la propriété margin : le navigateur répartit alors également les
espaces. Pour ce faire, on se sert de la forme à deux paramètres. Attention, pour que cela fonctionne il est indispensable d’attribuer
une largeur explicite à l’élément, à l’aide de sa propriété width (étudiée sous peu). Saisissez :

.ch {width: 200px ;

margin: 10px auto ;}

L’élément se centre horizontalement. Un centrage vertical est bien plus délicat à obtenir, la propriété vertical-align ne s’appli-
quant qu’aux tableaux. Mais cela dépasse la portée de ce livre. Nous verrons par la suite, avec le modèle de boîte flexible (flexbox),
comment obtenir différement et plus facilement ces deux types de centrage.
Fermez le fichier TP_CSS_09.html dans le navigateur et l’éditeur.
© Dunod – Toute reproduction non autorisée est un délit

@
31
 TP
10
Propriétés de bordure

L ’aire de bordures se situe à l’intérieur de l’aire de marges. Gérée par la propriété border et ses propriétés
MODÈLE DE BOÎTES CSS

apparentées, elle représente les bordures affectées à l’élément actif.

Prérequis : TP 9
Fichier exemple : TP_CSS_10_début.html
Durée nécessaire : 15 minutes
prise en main

Ouvrez dans votre éditeur de texte le fichier TP_CSS_10_début.html, puis enregistrez-le sous le nom
1 TP_CSS_10.html. Affichez-le dans votre navigateur.

Les bordures sont définies à l’aide des propriétés border-côté et de leurs propriétés apparentées.
2
Ainsi, border-width définit la largeur de la bordure. Les largeurs peuvent être définies avec les valeurs thin (mince), thick
(épaisse), medium (moyenne) ou exprimées en points. Vous pouvez définir individuellement la largeur de la bordure de chaque côté
à l’aide de border-côté-width. L’ordre abrégé de la propriété border-width est identique à celui de margin, soit :

{border-width: haut droite bas gauche}
Saisissez :

.un {border-width: 1px 2px 4px 6px ;}

Manifestement, on ne voit pas grand-chose. Vous avez bien défini une bordure, avec une largeur parfaitement spécifiée, mais,
3 sans autre paramètre, celle-ci est transparente et ne joue donc que sur la place occupée par l’élément. Il faut définir d’autres
propriétés pour rendre visible cette bordure :
• border-style définit le style de bordure. Cette propriété peut recevoir les valeurs none (aucune), dotted (pointillés),
dashed (tirets), solid (pleine), double (grasse), groove (cadre gravé), ridge (cadre en relief), inset (en 3D et en
creux) et outset (en 3D et en relief) ;
• border-color détermine la couleur de la bordure et possède simplement comme valeur une couleur CSS.

Insérez le code en gras ci-dessous dans la règle précédente :

.un {border-width: 1px 2px 4px 6px ;

border-style: solid ;
border-color: blue ;}

@
32
 TP 10 • Propriétés de bordure
Cette fois, vous voyez la bordure, avec ses quatre largeurs différentes. Le plus souvent toutefois, on applique à un élément
4 une bordure identique sur les quatre côtés. Pour cela, on emploie la propriété abrégée border. L’ordre à respecter est le
suivant :
{border: border-width border-style border-color ;}
Saisissez :

.deux {border: 10px dashed red ;}

MODÈLE DE BOÎTES CSS

Vous pouvez également employer les notations raccourcies pour ne spécifier de valeur que pour la bordure du haut (ou celle
5 de droite, du bas ou de gauche) à l’aide de la propriété border-top (ou right, bottom ou left) selon cet ordre :

{border-top: border-width border-style color ;}

Saisissez :

.trois {border-top: 6px groove green ;

border-bottom: 6px ridge yellow ;}

Il existe une autre propriété CSS 2, outline. Un encadré n’occupe pas d’espace (il se place à la limite de la marge, à l’exté-
6 rieur de la zone de bordure) et peut ne pas être rectangulaire. La propriété outline possède une syntaxe similaire mais
non identique à celle de border :

{outline: outline-color outline-width outline-style ;}

Saisissez :

.cadre {border: 15px inset grey ;

outline: blue 5px dotted ;}
© Dunod – Toute reproduction non autorisée est un délit

Fermez le fichier TP_CSS_10.html dans l’éditeur et le navigateur.

@
33
 TP
Propriétés avancées
11 de bordure
L e module Arrière-plans et bordures Niveau 3 définit de nouvelles propriétés de bordures, permettant d’obtenir des
MODÈLE DE BOÎTES CSS

bordures arrondies, des ombres portées et des bordures créées à partir d’images.

Prérequis : TP 10
Fichier exemple : TP_CSS_11_début.html
Durée nécessaire : 10 minutes
prise en main

Ouvrez dans votre éditeur de texte le fichier TP_CSS_11_début.html, puis enregistrez-le sous le nom
1 TP_CSS_11.html. Affichez ce fichier dans votre navigateur.

La propriété border-radius permet d’obtenir des bordures arrondies. Nativement prise en charge par tous les naviga-
2 teurs récents, elle nécessite que la propriété border soit elle-même définie. Vous pouvez employer de une à quatre
valeurs :
border-radius: hautgauche hautdroit basdroit basgauche ;
border-radius: hautgauche hautdroitbasgauche basdroit ;
border-radius: hautgauchebasdroit hautdroitbasgauche ;
border-radius: tousangles ;
Saisissez :

.br {border: 6px solid blue ;

border-radius: 50px ;}

Lorsque vous employez les bordures arrondies, il devient indispensable d’appliquer un espacement (padding) à un élément
contenant du texte, faute de quoi celui-ci serait partiellement recouvert.
Appliquer des valeurs différentes permet d’obtenir des effets particuliers. Saisissez :
3 .br2 {border: 8px solid green ;
border-radius: 0 25px 50px ;}

@
34
 TP 11 • Propriétés avancées de bordure
La propriété box-shadow ajoute une ou plusieurs ombres portées à la boîte.
4
box-shadow: ombre-h ombre-v [flou] [portée] [couleur] [inset] ;
Saisissez :
.bs1 {box-shadow: 10px 10px 25px 10px red ;}
Remarquez que l’ombre « sort » du modèle de boîte classique et peut donc empièter sur

MODÈLE DE BOÎTES CSS

des éléments adjacents, en allant au-delà des limites de la boîte de marges de son élé-
ment. Et cela peut s’aggraver si vous modifiez la taille de la fenêtre. Vous devez en tenir
compte lors de la conception.

Vous pouvez définir à l’aide de cette propriété plusieurs ombres portées, en les séparant à l’aide d’une virgule. Par défaut,
5 l’ombre est extérieure : le paramètre final inset crée une ombre intérieure (à ne pas confondre avec un arrière-plan). Par
exemple :

.bs2 {
box-shadow: 10px 10px 50px 20px pink inset, 10px 10px 5px ;}

La propriété border-image définit une image comme bordure d’un élément. C’est en réalité une propriété raccourcie
6 dont les propriétés individuelles ne sont pas ou peu reconnues par les navigateurs actuels. Il faut donc employer cette pro-
priété raccourcie sous la forme :

border-image: source largeur répétition ;

Cette propriété ne définit pas la taille de la bordure, ou plus exactement ce n’est pas encore reconnu : vous devez donc obligatoirement
spécifier l’existence d’une bordure et sa dimension à l’aide de la propriété border. Toutefois, la couleur est sans importance : l’image
remplacera toute couleur de bordure que vous auriez pu mentionner, même si elle possède elle-même une transparence (image
.png ou .gif). Saisissez :
© Dunod – Toute reproduction non autorisée est un délit

.bi1 {border: 30px solid transparent ;

border-image: url(img/borderimg.png) 30 round ;}
Nous avons employé ici comme bordure l’image affichée dans la div centrale. Le
paramètre largeur, ici 30, « découpe » cette image en neuf portions, en traçant
quatre traits de découpage fictifs à 30 pixels du haut, du bas, de la droite et de la
gauche. Sans unité, il correspond à des pixels, mais vous pourriez également spécifier
des pourcentages en ajoutant un signe %.

@
35
 TP 11 • Propriétés avancées de bordure
Le paramètre répétition fixé ici à round impose qu’un nombre entier d’éléments latéraux soient toujours entière-
7 ment affichés : leur taille est légèrement ajustée pour parvenir à un compte rond (round). En choisissant à la place
repeat, les éléments conservent leur taille initiale, sans déformation, si bien qu’il se peut que certains soient tronqués :
.bi2 {border: 30px solid transparent ;
border-image: url(img/borderimg.png) 30 repeat ;}
MODÈLE DE BOÎTES CSS
prise en main

Vous pourriez enfin omettre ce dernier paramètre, ce qui équivaut à retenir la valeur de répétition par défaut, stretch :
8 les côtés sont alors constitués d’un unique élément étiré. Saisissez :

.bi3 {border: 30px solid transparent ;

border-image: url(img/borderimg.png) 30 ;}

Je vous encourage à modifier le paramètre largeur (légèrement au début !) : vous verrez qu’il est possible d’obtenir une multitude
d’effets très différents. Cela au point qu’il est souvent difficile de prédire ce qui peut être obtenu à partir d’une image donnée…
Lorsque vous aurez achevé vos essais, fermez le fichier TP_CSS_11.html dans l’éditeur et le navigateur.

@
36
 TP
12
Propriétés d’espacement

L ’espace suivant dans le modèle de boîte CSS est l’aire d’espacement : la surface entre le contenu et la limite

MODÈLE DE BOÎTES CSS

intérieure de la bordure. Elle est gérée par la propriété padding. Vous pouvez appliquer un ou plusieurs styles à
votre page de plusieurs façons : dans le corps du document, dans un élément, à l’aide de l’attribut style, ou dans
l’élément head, à l’aide d’un élément style ou d’un élément link.

Prérequis : TP 9 à 11
Fichier exemple : TP_CSS_12_début.html
Durée nécessaire : 10 minutes

Ouvrez le fichier TP_CSS_12_début.html. Examinez bien le résultat obtenu : vous devriez obser-
1 Enregistrez-le sous le nom TP_CSS_12.html.
Affichez ce fichier dans votre navigateur.
3 ver plusieurs choses curieuses, que vous n’attendiez pas
forcément. Par exemple, des espaces sont apparus entre
le texte normal et les mots de code affichés en police Courier.
De même, les différents paragraphes et éléments se sont
La propriété padding établit un espace vierge autour déplacés.
2 du contenu de l’élément, à l’intérieur de la bordure. Elle
utilise la même syntaxe que la propriété margin, y
La raison en tient à ce que nous avons employé le sélecteur uni-
versel * : l’espacement s’applique à tous les éléments quels qu’ils
compris la syntaxe raccourcie. Elle est presque indispensable si soient, y compris body et surtout ici l’élément code qui nous
vous définissez une bordure, pour éviter que le contenu soit servait pour le code. Nous ne voulons d’espacement que pour
collé à celle-ci. Saisissez : l’élément div de classe cadre et les éléments p qu’il contient.
Il faut donc remplacer la règle précédente par :
* {padding: 5px 10px ;}
div.cadre, div.cadre > p
{padding: 5px 10px ;}
© Dunod – Toute reproduction non autorisée est un délit

Le résultat est plus satisfaisant.

Fermez le fichier TP_CSS_12.html dans le navigateur et l’éditeur.

@
37
 TP
13
Propriétés de contenu

L ’aire de contenu est la boîte la plus interne du modèle CSS. Comme son nom l’indique, elle renferme le contenu de
MODÈLE DE BOÎTES CSS

l’élément actif.

Prérequis : TP 9 à 12
Fichier exemple : TP_CSS_13_début.html
Durée nécessaire : 15 minutes
prise en main

Ouvrez dans votre éditeur de texte le fichier Nous avions saisi les valeurs en pixels, donnant une taille
1 TP_CSS_13_début.html, puis enregistrez-le
sous le nom TP_CSS_13.html. Affichez ce fichier
3 absolue. Saisissez ces nouvelles règles, pour donner aux
div suivantes des valeurs en pourcentage de la taille de
dans votre navigateur. leur conteneur :

Les propriétés de l’aire de contenu d’un élément sont div.c {width: 80% ;}
2 height et width. Ils sont analogues aux attributs
HTML correspondants et déterminent la hauteur et la
div.d {height: 45% ;}

largeur du contenu. La propriété height définit la hauteur du

contenu de boîtes bloc, bloc ligne et remplacés, la propriété
width définit leur largeur. La syntaxe est la suivante :
height/width: taille | pourcentage |
auto | inherit
taille spécifie la hauteur ou la largeur du contenu à l’aide
d’une valeur numérique positive ou nulle, pourcentage
spécifie un pourcentage calculé d’après le bloc conteneur, auto
signifie que la hauteur dépendra de la valeur d’autres propriétés.
Si vous ne précisez pas de valeurs pour ces propriétés, l’élément
s’ajustera généralement à la taille du contenu (mais dans la limite
de la taille de son propre conteneur, et ainsi de suite). Souven-
ez-vous que pour un centrage horizontal automatique il est indis-
pensable de fixer explicitement la largeur de l’élément à centrer.
Saisissez les deux règles suivantes, puis affichez le résultat dans
votre navigateur en plein écran.
div.a {width: 250px ;} Redimensionnez maintenant la fenêtre du navigateur en la rédui-
div.b {height: 50px ;} sant. Vous voyez que le comportement diffère fortement : la
largeur de la première div dans la div du haut « sort » rapide-
Comme la taille des éléments div a été fixée par les règles à ne ment de celle-ci, alors que la taille des div enfants de celle du
pas modifier, l’apparence est curieuse. C’est fait exprès, nous bas s’ajuste proportionnellement, au moins dans un premier
allons y remédier sous peu. temps. Lorsque le contenu excède la taille définie, il se produit un
dépassement (ici très laid) géré par la propriété overflow.

@
38
 TP 13 • Propriétés de contenu
La propriété overflow, applicable aux conteneurs
4 bloc, peut posséder les valeurs visible (valeur par
défaut, le contenu n’est pas tronqué et peut donc être
affiché en dehors de la boîte bloc), hidden (contenu tronqué
sans dispositif de défilement), scroll (contenu tronqué avec
dispositif de défilement affiché, que le contenu soit tronqué ou
non) et auto (comportement dépendant du navigateur, mais
souvent avec mécanisme de défilement en cas de dépassement).
Saisissez les règles suivantes, puis examinez le comportement en
plein écran et avec une fenêtre réduite.

MODÈLE DE BOÎTES CSS

.a {overflow: visible ;}
.C1 {overflow: hidden ;}
.C2 {overflow: scroll ;}
.d {overflow: auto ;}
CSS ajoute désormais à cette propriété les propriétés appa-
rentées overflow-x et overflow-y, gérant respective-
ment uniquement les dépassements horizontaux ou verticaux.

Quatre propriétés permettent de limiter la dimension du contenu, tant pour le maximum que pour le minimum : min-
5 width, max-width, min-height et max-height. Ces propriétés reçoivent comme valeur une valeur positive ou
nulle (et donc pas négative) ou un pourcentage relatif à la dimension concernée du bloc conteneur. Si la dimension du
conteneur est négative, la valeur devient zéro. Saisissez :

.C3 {min-width: 250px ;

max-width: 500px ;}
© Dunod – Toute reproduction non autorisée est un délit

Lorsque vous modifiez la largeur de la fenêtre, la div de classe C3 (celle du bas) possède toujours une largeur comprise entre les
deux valeurs spécifiées.
Fermez le fichier TP_CSS_13.html dans l’éditeur et le navigateur.

@
39
 TP
Propriétés de
14 positionnement
E n CSS, une boîte peut désormais être présentée selon quatre schémas de positionnement  : le flux normal, un
MODÈLE DE BOÎTES CSS

positionnement absolu dans un bloc conteneur, flottant ou selon le modèle flexible qui fera l’objet d’une étude
détaillée par la suite. Le type de boîte CSS est initialement défini par la propriété display et conditionne largement
son comportement dans le modèle de mise en forme visuel. Elle s’applique à tous les éléments. Viennent ensuite les
propriétés position et float ainsi que, le cas échéant, les propriétés de positionnement top, bottom, left et
right.
prise en main

Prérequis : TP 9 à 13
Fichier exemple : TP_CSS_14_début.html
Durée nécessaire : 15 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_14_début.html, puis enregistrez-le sous le nom TP_
1 CSS_14.html. Affichez ce fichier dans votre navigateur.

La propriété display définit le type de boîte généré.

2 Elle accepte de nombreuses valeurs, dont les plus
fréquentes block et inline qui génèrent comme
leurs noms l’indiquent des boîtes respectivement de type bloc et
ligne. Vous n’emploierez ces valeurs que pour modifier le com-
portement par défaut d’éléments HTML, par exemple pour pla-
cer des éléments de liste en ligne plutôt que comme blocs em-
pilés. Saisissez :

li {display: inline ;}
Remarquez que cela fait disparaître les puces.

La valeur flex correspond au modèle de boîte flexible : nous l’étudierons en détail plus loin. La valeur none fait que
3 l’élément n’apparaît pas dans la structure de mise en forme, de même que tous ses descendants, et cela même si leur propre
propriété display possède une valeur autre que none. C’est extrêmement pratique pour ne faire apparaître un élément
au sein de la page que si certaines conditions sont remplies. Tant que la condition n’est pas remplie, l’élément n’apparaît pas et
n’occupe aucune place dans la page. Saisissez :

p.et > span {display: none ;}

p.et:hover > span {display: inline ;}

@
40
 TP 14 • Propriétés de positionnement
Hors modèle flexible, les propriétés position et .gche {float: left ;}
4 float conditionnent l’algorithme de positionnement
employé pour calculer la position d’une boîte. La pro-
.dte {float: right ;}
Si vous affectez à des éléments div rassemblés au sein d’un
priété position détermine le type de positionnement de la
boîte. Les valeurs possibles sont static (la valeur par défaut, élément p des valeurs différentes de la propriété float, les
correspondant au flux normal), relative (la position de la éléments se déplacent lorsque la fenêtre est redimensionnée.
boîte est calculée dans le flux normal puis décalée relativement à Pour mieux isoler un élément flottant du contenu flottant autour,
cette position), absolute (position et éventuellement taille mieux vaut définir ses marges. Ajoutez ce qui suit :
spécifiées par les propriétés top, right, bottom et left)
et fixed (position calculée selon le modèle absolu, mais la .gche {float: left ;
margin: 10px ;}

MODÈLE DE BOÎTES CSS

boîte est en outre située de façon fixe par rapport à une référence).
.dte {float: right ;
Lorsque sa propriété position possède une valeur autre que
margin: 10px ;}
static, un élément est dit positionné. Sa position est définie
par les quatre propriétés top, right, bottom et left, qui
spécifient respectivement le décalage par rapport aux bords du
bloc conteneur (positionnement absolu) ou aux bords de la boîte
elle-même (positionnement relatif). Elles possèdent comme
valeur par défaut auto. Leur syntaxe est la suivante :
propriété: longueur | pourcentage |
auto | inherit
La propriété clear, applicable à des éléments bloc non
longueur définit un décalage absolu du côté de référence,
pourcentage un pourcentage de la dimension concernée
6 flottants et dont la valeur par défaut est none, définit les
côtés d’une boîte d’élément qui ne peuvent être adja-
du bloc conteneur. Les valeurs négatives sont autorisées. auto cents à une boîte flottante précédente. Les autres valeurs possibles
possède un effet plus complexe. Par exemple, voici une méthode sont left (le bord supérieur de la boîte est placé sous le bord
classique pour créer un menu ou bandeau restant en haut de la inférieur de toute boîte flottante à gauche antérieure), right
fenêtre même lorsque vous vous déplacez dans la page : (analogue à left pour des boîtes flottantes à droite) et both
(bord supérieur sous une quelconque boîte flottante). Saisissez :
p.fixe {position: fixed ;
top: 0px ;} .cl {clear: both ;}

Remarquez que, comme ici les deux boîtes flottantes sont au

Une boîte est dite flottante lorsque sa propriété float même niveau, donner à la propriété clear comme valeur
5 est définie avec une valeur autre que none, sa valeur
par défaut. Elle n’appartient plus au flux, des boîtes bloc
left, right ou both a strictement le même effet.

non positionnées créées avant ou après celle-ci s’écoulent verti- Fermez le fichier TP_CSS_14.html dans l’éditeur et le
calement comme si elle n’existait pas, en lui laissant toutefois la navigateur.
place nécessaire. Elle peut posséder les valeurs left (boîte bloc
flottante à gauche) ou right (boîte flottante à droite). Saisis-
sez :
© Dunod – Toute reproduction non autorisée est un délit

@
41
 TP
15
Propriétés de couche

C SS définit trois dimensions pour chaque boîte : outre les positions horizontale et verticale, il existe la profondeur
MODÈLE DE BOÎTES CSS

ou axe Z, particulièrement importante lorsque des boîtes se recouvrent visuellement.

Prérequis : TP 9 à 14
Fichier exemple : TP_CSS_15_début.html
Durée nécessaire : 10 minutes
prise en main

Ouvrez dans votre éditeur de texte le fichier TP_CSS_15_début.html, puis enregistrez-le sous le nom
1 TP_CSS_15.html. Affichez ce fichier dans votre navigateur.

L’ordre de dessin d’une arborescence de document est décrit en termes de contextes d’empilement. Ces contextes peuvent
2 être imbriqués. Tout contexte d’empilement est lié au parent : les boîtes situées dans d’autres contextes ne peuvent ­s’intercaler
entre ses propres boîtes.
L’élément racine constitue le contexte d’empilement racine. Toute boîte appartient à un et un seul contexte d’empilement et possède
un niveau d’empilement : sa position sur l’axe Z par rapport aux autres boîtes du même contexte. Plus le niveau est élevé et plus la
boîte se situe au premier plan. Une boîte peut posséder un niveau négatif. Si deux boîtes du même contexte possèdent le même
niveau, celle située le plus bas dans l’arborescence du document figurera au premier plan.

Pour une boîte positionnée, la propriété z-index spécifie le niveau d’empilement dans le contexte d’empilement actif et si
3 la boîte crée un nouveau contexte d’empilement. Les valeurs possibles sont entier (la boîte génère un nouveau contexte
d’empilement dont le niveau est l’entier spécifié) et auto, la valeur par défaut (le niveau d’empilement est zéro ; la boîte ne
crée de nouveau contexte que s’il s’agit de l’élément racine). Saisissez :

.chef {z-index: 10 ;}

Le troisième élément div se place au premier plan. Remarquez que, par défaut, un fond est transparent et laisse visibles les boîtes
situées en dessous. Vous pouvez modifier ce comportement en employant une des propriétés de fond, comme effectué ici (nous en
apprendrons bientôt plus sur les propriétés de fond).

Un emploi classique de cette propriété est pour faire

4 apparaître à volonté un élément initialement placé en
dessous d’un autre élément. Saisissez :

.deux:hover div:first-of-type { La div « masquée » apparaît lorsque vous placez le pointeur de

z-index: 1 ;} souris au-dessus de l’élément section qui la contient. Fermez
le fichier TP_CSS_15.html dans l’éditeur et le navigateur.

@
42
 TP
16
Propriétés d’effet visuel

P lusieurs effets visuels peuvent être obtenus en jouant sur certaines propriétés de boîtes.

MODÈLE DE BOÎTES CSS

Prérequis : TP 9 à 15
Fichier exemple : TP_CSS_16_début.html
Durée nécessaire : 10 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_16_début.html, puis enregistrez-le sous le nom
1 TP_CSS_16.html. Affichez ce fichier dans votre navigateur.

La propriété clip définit la portion de la boîte de bordure d’un élément qui sera visible (par défaut, toute). Elle ne s’applique
2 qu’aux éléments positionnés de façon absolue. Elle accepte les valeurs auto (la valeur par défaut ; l’élément n’est pas
recadré) et forme. Actuellement, la seule forme valide est rect(haut droite bas gauche) où les paramètres
haut, bas, droite et gauche spécifient les décalages respectifs par rapport aux bords externes de la boîte.
Ces décalages peuvent posséder une valeur de type longueur ou le mot clé auto (un côté donné de la région recadrée sera
identique au côté de la boîte de bordure générée pour l’élément). Si les quatre valeurs sont fixées à auto, la zone de recadrage sera
identique à la boîte de bordure de l’élément.
Une région de recadrage élimine toute partie de l’élément (contenu, enfant, fond, bordures, décoration de texte et tout éventuel
mécanisme de défilement visible) extérieure à celle-ci. Un contenu recadré ne provoque jamais de dépassement. Saisissez :
.un {clip: rect(0px 300px 200px 100px) ;}

Vous voyez comment cette propriété « découpe » un rectangle allant du haut jusqu’à 200 px vers le bas et de 100 px à gauche jusqu’à
300 px à droite. L’élément situé juste à côté sert de témoin.
La propriété visibility spécifie si la boîte générée par un élément est affichée. Les boîtes invisibles affectent la présenta-
3
© Dunod – Toute reproduction non autorisée est un délit

tion, contrairement à une propriété display fixée à none. Les valeurs possibles sont visible (valeur par défaut, la
boîte est visible), hidden (la boîte générée est invisible mais affecte la présentation ; les descendants seront visibles si leur
propriété visibility est fixée à visible) et collapse (effet actuellement similaire à hidden). Cette propriété, souvent
employée en combinaison avec des scripts, permet de créer des effets dynamiques. Saisissez :
p:hover {visibility: hidden ;}
Lorsque vous placez votre souris sur un élément p, celui-ci disparaît sans
toutefois modifier la disposition de la page.
Fermez le fichier TP_CSS_16.html dans l’éditeur et le navigateur.

@
43
 Propriétés de police,

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

de couleur et de fond
Les propriétés les plus simples concernent la présentation globale d’un élément et de son contenu texte : police et
autres attributs du texte (dont la couleur) et arrière-plan. Les feuilles de styles CSS résolvent fort adroitement les
problèmes posés en HTML par l’élément font aujourd’hui abandonné. La possibilité de réaliser désormais des
dégradés élimine la nécessité de recourir à des images d’arrière-plan dans de nombreuses situations.
© Dunod – Toute reproduction non autorisée est un délit

@
45
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

TP
17
Propriétés de police

C SS permet d’agir très finement sur de nombreux aspects des polices de votre document.

Prérequis : néant
Fichier exemple : TP_CSS_17_début.html
Durée nécessaire : 10 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_17_début.html, puis enregistrez-le sous le nom
1 TP_CSS_17.html. Affichez ce fichier dans votre navigateur.

La propriété font-family définit le type de police utilisé dans une page.

2
font-family: [famille-nom | famille-générique [,]]* | inherit
Il faut placer entre guillemets ou apostrophes un nom de police contenant un espace. Saisissez les règles suivantes :

div.ar {font-family: Arial, sans-serif}

div.lft {font-family: "Times-New-Roman", serif}
div.mdl {font-family: "Segoe Script", cursive}
div.dte {font-family: "Courier New", monospace}

@
46
 TP 17 • Propriétés de police

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

La propriété font-style ne sert actuellement qu’à choisir entre normal (la valeur par défaut) et italic, tandis que
3 la propriété font-variant offre le choix entre normal (la valeur par défaut) et small-caps (petites capitales).
Saisissez :

.it {font-style: italic ;}

.ptcap {font-variant: small-caps ;}

La propriété font-weight définit la graisse de la police à l’aide soit de mots clés, soit de chiffres exprimés en centaines,
4 de 100 à 900. En pratique, la plupart des polices ne possèdent que deux graisses : normal et gras (bold). La propriété
font-size définit la taille de la police, à l’aide des propriétés de dimension. Enfin, la propriété line-height définit la
hauteur de ligne, à l’aide des propriétés de dimension CSS classiques. Saisissez :

.imp {font-weight: 700 ; /* bold */

font-size: 1.5em ;}
div.mdl {line-height: 0.8em}

La propriété font est une propriété raccourcie permettant de définir en une seule les différentes caractéristiques d’une
5 police.
© Dunod – Toute reproduction non autorisée est un délit

font: [ font-style || font-variant || font-weight ]? font-size

[ / line-height ]? font-family
Seuls les paramètres font-weight et font-family sont obligatoires : les autres seront fixés à normal s’ils sont absents.
Saisissez :

.ar p:last-of-type {
font: italic small-caps bold 1.2em/0.8em
"Times-New-Roman", serif ;}

@
47
 TP 17 • Propriétés de police
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

CSS permet aux concepteurs de stocker des polices personnalisées sur leur serveur web : elles seront automatiquement télé-
6 chargées par l’utilisateur lorsque nécessaire à l’aide de la règle @font-face.
Les polices de type .ttf (True Type Fonts) et .otf (OpenType Fonts) sont acceptées par tous les navigateurs récents. Pour
d’autres formats, comme WOFF, WOFF2, SVG et EOT, cela dépend du navigateur. Saisissez :

@font-face {
font-family: scriptina ;
src: url('SCRIPTIN.ttf')
}

La police scriptina est une création de Apostrophic Laboratories ([email protected]), libre de droits même pour une utilisation
commerciale. Lorsque vous employez une police non standard, vérifiez bien que vous avez le droit de le faire.
Vous pouvez ensuite employer la police à votre guise. Saisissez :

.tx {font-family: scriptina ;}

Fermez le fichier TP_CSS_17.html dans l’éditeur et le navigateur.

@
48
 Propriétés de couleur

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

TP
18 et de fond
C es propriétés décrivent la couleur du texte (ou couleur de premier plan) et la couleur de fond d’un élément. Le fond
peut recevoir une couleur et/ou une image, celle-ci pouvant recevoir plusieurs paramètres.

Prérequis : néant
Fichier exemple : TP_CSS_18_début.html
Durée nécessaire : 10 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_18_début.html, puis enregistrez-le sous le nom
1 TP_CSS_18.html. Affichez ce fichier dans votre navigateur.

La propriété color définit la couleur du texte d’un élément, par une valeur de couleur ou le mot clé transparent.
2 Saisissez :

.r {color: pink ;}
.trans {color: transparent ;}

Un paragraphe apparaît en rose, celui situé en dessous disparaît : écrire avec une encre transparente n’a jamais donné un résultat très
lisible…
La propriété background-color définit la couleur de fond d’un élément. Sa valeur est une couleur CSS, comme pour
3 color. Ajoutez ce qui suit en gras à la première règle précédente :
© Dunod – Toute reproduction non autorisée est un délit

.r {color: pink ;
background-color: RGB(50,50,50) ;}

@
49
 TP 18 • Propriétés de couleur et de fond
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

La propriété opacity détermine l’opacité du fond de l’élément par rapport à ce qui est en dessous. Elle n’a de sens que si
4 le fond de l’élément comporte une couleur ou une image. La valeur est un nombre compris entre 0 et 1. Cette propriété est
inutile si vous employez une couleur RGBA ou HSLA, pour laquelle l’opacité est déjà définie. Ajoutez ce qui suit en gras à la
règle précédente :

.r {color: pink ;
background-color: RGB(50,50,50) ;
opacity:.5 ;}

Vous pourriez obtenir exactement la même chose en saisissant simplement une valeur RGBA :

.r {color: pink ;
background-color: RGBA(50,50,50, .5) ;}
La propriété background-image permet de définir une image comme fond d’élément. Saisissez :
5 .cadre {background-image: url(img/fleur.jpg) ;}

Remarquez que nous avons placé les images dans un sous-répertoire img situé à la racine du code : c’est une bonne habitude à
prendre, pour éviter le mélange des types de fichiers.
Vous pouvez employer plusieurs images de fond pour un même élément, en les séparant par une virgule.
6 Modifiez comme suit la règle précédente :

.cadre {background-image: url(img/papillon.gif), url(img/fleur.jpg) ;}

Attention, les images sont affichées en partant de la fin : le papillon sera ici au-dessus de la fleur.

@
50
 TP 18 • Propriétés de couleur et de fond

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

La propriété background-repeat détermine si et éventuellement comment l’image doit se répéter. Par défaut, une
7 image de fond est répétée dans les deux directions afin de couvrir tout l’élément.

background-repeat: repeat | repeat-x | repeat-y | no-repeat

Saisissez :

div.dte {background: url(img/papillon.gif) ;

background-repeat: repeat-y ;}
Remarquez au passage que la spirale de gauche est obtenue par la répétition sur l’axe
vertical d’une petite image d’une unique spire…

La propriété background-attachment détermine si l’image est fixe par rapport au canevas (fixed) ou si elle défile
8 en même temps que le contenu (scroll, valeur par défaut).

background-attachment: scroll | fixed

Pour le moment, lorsque vous faites défiler la fenêtre vers le bas, la spirale de gauche (une image d’arrière-plan de l’élément body)
se déplace en même temps. Saisissez :

body {background-attachment: fixed ;}

Désormais, l’image de la spirale ne se déplace plus si vous faites défiler la fenêtre.

La propriété background-position précise la position initiale de l’image. Avec deux paramètres, le premier repré-
9 sente la valeur horizontale, le second la valeur verticale. Un paramètre absent vaut par défaut center. Voici les mots clés
utilisables :

Mot clé Pourcentage Pourcentage

horizontal vertical
top 0 % -
center 50 % 50 %
bottom 100 % -
left - 0 %
right - 100 %
Saisissez :

.ar {background-image: url(img/paptrans.jpg) ;

background-repeat: no-repeat ;
© Dunod – Toute reproduction non autorisée est un délit

background-position: center ;}

L’image est centrée horizontalement et verticalement. Testez d’autres mots clés et/ou d’autres valeurs pour la propriété
background-position.

@
51
 TP 18 • Propriétés de couleur et de fond
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

Il est également possible de donner des valeurs de longueur, éventuellement négatives. Et même d’obtenir quelques effets
10 intéressants… Saisissez ce qui suit :

.mil {
background-image: url(img/icones.jpg) ;
background-repeat: no-repeat ;
background-position: -200px 75px ;}
.mil:hover {background-position: -98px 75px ;}
.mil:active {background-position: 5px 75px ;}

Je suppose que vous vous souvenez de la pseudo-classe : hover, lorsque le pointeur est au-dessus d’un élément, et de la pseudo-
classe :active, lorsqu’on clique sur un élément… Testez à loisir…

La propriété background-size permet de spécifier précisément la taille de l’image de fond, ce qui autorise l’emploi
11 d’une même image dans différents contextes. Sa syntaxe est la suivante :

background-size: longueur|pourcentage|cover|contain ;
Par défaut, une image est affichée selon sa taille réelle (100 %) : ne sera visible que ce qui peut « tenir » dans l’élément conteneur, ou
elle n’occupera qu’une partie de celui-ci s’il est plus grand. Avec contain, l’image est redimensionnée de façon à apparaître tout
entière : c’est la dimension minimale de l’élément conteneur qui conditionne la taille, et l’image peut donc ne pas occuper tout celui-ci.
Avec cover en revanche, l’image est redimensionnée de façon à occuper tout l’élément conteneur, par conséquent selon sa plus
grande dimension : ellle pourra donc se révéler tronquée. Saisissez :

.ar {background-size: contain ;}

Testez ensuite la valeur cover, puis divers pourcentages, jusqu’à avoir bien compris le fonctionnement de cette propriété.

La propriété background-origin permet de définir précisément l’emplacement de début d’une image de fond au-
12 delà de la zone de contenu. Par défaut, c’est la zone de contenu (content-box), mais vous pouvez choisir la zone d’espa-
cement (padding-box) ou la zone de bordure (border-box). La propriété background-clip est analogue,
mais s’applique à une couleur de fond et non à une image. Saisissez :

.un {background-clip: content-box ;}

.deux {background-clip: padding-box ;}
.trois {background-clip: border-box ;}

Remarquez que, avec une bordure continue, le fond est recouvert : border-box et padding-box ont alors le même effet.
Fermez le fichier TP_CSS_18.html dans l’éditeur et le navigateur.

@
52
 PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND
TP
19
Dégradés linéaires

L e module Valeurs images et contenu remplacé Niveau 3 ajoute deux nouvelles valeurs à la propriété background-
image. Ces valeurs sont en réalité des méthodes, qui permettent d’obtenir des dégradés respectivement linéaires
(linear-gradient()) et circulaires (radial-gradient()). Nous étudierons dans un premier temps la méthode
linear-gradient().

Prérequis : TP 11 et 18
Fichier exemple : TP_CSS_19_début.html
Durée nécessaire : 15 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_19_début.html, puis enregistrez-le sous le nom
1 TP_CSS_19.html. Affichez ce fichier dans votre navigateur.

La syntaxe de la méthode linear-gradient() est la suivante :

2
background-image: linear-gradient(direction, couleur1 étendue1,
[couleur2 étendue2], couleurn étenduen)

direction est la ligne d’orientation du dégradé. Vous pouvez la spécifier à l’aide d’un angle ou de mots clés : to bottom
(valeur par défaut, équivalente à 180deg), to top (équivalent à 0deg), to right (90deg) ou to left (270deg).
Saisissez :

.b1 {background-image: linear-gradient(cyan, blue) ;}

© Dunod – Toute reproduction non autorisée est un délit

Les mots clés correspondant à des angles bien déterminés, vous pourriez préférer employer un angle : la pente par rapport
3 à l’horizontale de la droite qui joindrait le point de départ et le point d’arrivée. Saisissez :

.b2 {background-image: linear-gradient(110deg, cyan, blue) ;}

@
53
 TP 19 • Dégradés linéaires
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

Les paramètres couleur et étendue spécifient respectivement la couleur et la position de début de cette couleur sur
4 l’axe de dégradé. Attention à ne pas séparer ces deux paramètres par autre chose qu’un espace. La couleur est exprimée
comme toute couleur CSS, par exemple en RGBA pour disposer d’une transparence, étendue est un pourcentage. Par
défaut, la première étendue vaut 0 % et la dernière 100 %. Saisissez :

.b3 {background-image: linear-gradient(-45deg, cyan, blue 90%) ;}

Vous devez spécifier au moins deux couleurs/étendues (celle de début et celle de fin), mais vous pouvez spécifier autant de
5 couleurs intermédiaires que vous le souhaitez. Saisissez :

.b4 {background-image: linear-gradient(green, cyan 40%, blue) ;}

Puisqu’il s’agit d’une valeur de la propriété background-image et qu’il est possible d’affecter plusieurs images à un
6 arrière-plan (reportez-vous au TP 18), il est de même possible de définir plusieurs dégradés pour un même élément, en les
séparant par une virgule. Saisissez :

.b5 {
background-image:
linear-gradient(rgba(255,230,230,.5), rgba(255,130,130,.5)),
linear-gradient(90deg, rgba(130,200,130,1), rgba(75,255,75,1)) ;}

Attention : comme avec les images, l’ordre d’apparition des dégradés est l’inverse de l’ordre d’écriture. De ce fait, il est impératif que
le ou les dégradés venant au-dessus (et donc écrits en premier) emploient des couleurs avec transparence, faute de quoi le dernier
dégradé recouvrira totalement les dégradés situés en dessous.

@
54
 TP 19 • Dégradés linéaires

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

En employant également la couleur transparent, on peut obtenir des effets de trame assez intéressants. Saisissez :
7
.b6 {
background-image:
linear-gradient(90deg, rgba(200,0,0,.12) 25px, transparent 25px),
linear-gradient(rgba(200,0,0,.12) 25px, transparent 25px) ;}

Dernière propriété en matière de dégradés linéaires, plutôt que d’en mentionner plusieurs vous pouvez en répéter un à l’aide
8 de la propriété repeating-linear-gradient(). Saisissez :

.b7 {background-image: repeating-linear-gradient(110deg, yellow 10%, blue 20%) ;}

Remarquez que, comme le dégradé est défini en pourcentages, la largeur des bandes s’ajuste si vous modifiez la taille de la fenêtre,
contrairement à l’exemple précédent où les bandes étaient définies en pixels.
En combinant un tel dégradé avec un second dégradé, vous pouvez obtenir des effets saisissants. Saisissez :
9
.b8 {
background-image:
linear-gradient(rgba(255,255,255,1), rgba(100,100,100,0.3)),
repeating-linear-gradient(110deg, yellow 10%, red 20%) ;}
© Dunod – Toute reproduction non autorisée est un délit

Enfin, puisqu’il est possible d’employer une image comme bordure (voir TP 11), et qu’un dégradé est une image, vous pouvez
10 créer des bordures en dégradé. Saisissez :

.b9 {border: 20px solid transparent ;

border-image: linear-gradient(-45deg, cyan, blue) 1 stretch ;}

Fermez le fichier TP_CSS_19.html dans l’éditeur et le navigateur.

@
55
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

TP
20 Dégradés radiaux

L a méthode radial-gradient() permet d’obtenir des dégradés circulaires ou radiaux. Cette méthode est
reconnue par tous les navigateurs récents, à l’exception d’Opera. L’emploi des préfixes dédiés (toujours sauf Opera)
permet une certaine rétro-compatibilité avec des versions plus anciennes.

Prérequis : TP 11, 18 et 19
Fichier exemple : TP_CSS_20_début.html
Durée nécessaire : 20 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_20_début.html, puis enregistrez-le sous le nom
1 TP_CSS_20.html. Affichez ce fichier dans votre navigateur.

La syntaxe de la méthode radial-gradient() est la suivante :

2
radial-gradient (
[ [forme||taille]|[[at position] [at position],]
couleur étendue[,couleur étendue])
forme accepte actuellement les valeurs circle ou ellipse (valeur par défaut). Si votre élément est carré, circle et
ellipse auront le même effet, puisque la largeur est identique à la hauteur. Saisissez :
.b1 {background-image: radial-gradient(cyan, blue) ;}

taille détermine le point de fin du dégradé. Vous pouvez employer les valeurs closest-side, closest-
3 corner, farthest-side et farthest-corner (la valeur par défaut). Si la forme est un cercle, vous pouvez
indiquer comme valeur le rayon du cercle (forcément avec une unité autre qu’un pourcentage). S’il s’agit d’une ellipse (la
valeur par défaut), vous pouvez spécifier deux valeurs (unités ou pourcentages) pour indiquer la forme de l’ellipse. Saisissez :

.b2 {background-image: radial-gradient(circle 70px, cyan, blue) ;}

@
56
 TP 20 • Dégradés radiaux

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

Dans le paramètre at position, position détermine le centre d’origine de la forme. Là aussi, ce peut être un mot
4 clé ou une paire de valeurs. Par défaut, center. Saisissez :

.b3 {background-image: radial-gradient(at 100% 25%, cyan, blue) ;}

couleur et étendue possèdent les mêmes significations que pour la méthode précédente. Vous pouvez spécifier un
5 nombre quelconque de couleurs situées sur l’axe de la forme.

.b4 {
background-image:
radial-gradient(farthest-side at bottom left, red, yellow 50px,
cyan, blue, black) ;}

L’exemple de code suivant crée un dégradé un peu plus complexe :

6
.b5 {
background-image:
radial-gradient(120px 150px at 80% 75%, red 1%, yellow 3%,
cyan 6%, blue 10%, black) ;}

Il est important de comprendre que cette méthode crée en réalité toujours plusieurs ellipses concentriques (une par couleur), mais
que seule sera visible la partie définie par l’élément conteneur.
Comme avec les dégradés linéaires, il est possible de définir plusieurs dégradés pour un même élément, en les séparant par
7 une virgule. Saisissez :
© Dunod – Toute reproduction non autorisée est un délit

.b6 {
background-image:
radial-gradient(circle at 90% 25%, white 1%,rgba(255,255,255,.3) 1.1%,
transparent),
radial-gradient(farthest-side at bottom left, red, yellow 50px,
cyan, blue, black);}

@
57
 TP 20 • Dégradés radiaux
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

Une fois encore, l’ordre d’apparition des dégradés est l’inverse de leur écriture. Il est impératif que le ou les dégradés venant au-dessus
emploient des couleurs avec transparence, faute de quoi le dernier dégradé recouvrira totalement les dégradés situés en dessous.

En jouant avec les transparences, on peut obtenir des effets intéressants. Saisissez :
8
.b7 {
background-image:
radial-gradient(circle, rgba(252,19,200,0.3) 0px,
rgba(252,19,200,0.3) 40%,rgba(255,255,255,0) 40%),
radial-gradient(circle, rgba(252,176,64,0.3) 0px,
rgba(252,176,64,0.3) 70%,rgba(255,255,255,0) 70%),
radial-gradient(circle, rgba(5,240, 25,0.3) 0px,
rgba(5,240, 25,0.3) 60%,rgba(255,255,255,0) 60%) ;
background-position: 65px 70px, -20px -30px, 10px 10px ;
background-repeat: no-repeat ;}

Remarquez que la position individuelle de chaque dégradé est fixée à l’aide de la propriété background-position et que la
propriété background-repeat est fixée à no-repeat pour n’afficher qu’un exemplaire de chaque dégradé.

Enfin, comme pour les dégradés radiaux, plutôt que d’en mentionner plusieurs, vous pouvez en répéter un à l’aide de la
9 propriété repeating-radial-gradient(). Saisissez :

.b8 {
background-image:
repeating-radial-gradient(at bottom right, yellow 10%, blue 20%) ;}

Fermez le fichier TP_CSS_20.html dans l’éditeur et le navigateur.

@
58
 PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND
TP
21
Propriétés de texte

L es propriétés de texte s’appliquent à tout texte contenu dans un élément. Le plus souvent, ces propriétés sont
héritables : elles s’appliquent également aux descendants de l’élément.

Prérequis : néant
Fichier exemple : TP_CSS_21_début.html
Durée nécessaire : 10 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_21_début.html, puis enregistrez-le sous le nom
1 TP_CSS_21.html. Affichez ce fichier dans votre navigateur.

La propriété word-spacing définit l’espacement entre mots. La propriété letter-spacing définit l’espacement
2 entre lettres. La valeur par défaut de ces deux propriétés est normal. La propriété text-decoration permet d’ajou-
ter différents effets à du texte. Elle se décompose en trois sous-propriétés correspondant au type de décoration, à son style et
à sa couleur :
text-decoration-line text-decoration-style text-decoration-color
Par défaut, le type est none, mais vous pouvez souligner (underline), surligner (overline) ou barrer (line-through).
Saisissez :
.imp {
word-spacing: 1.2em ;
letter-spacing: .8em ;
text-decoration: underline solid red ;}

La propriété vertical-align définit la position verticale du texte par rapport à la ligne courante. Son effet est souvent
3 peu perceptible, sauf pour les indices (sub), les exposants (top) et des pourcentages élevés.
© Dunod – Toute reproduction non autorisée est un délit

vertical-align: baseline | sub | super | top | text-top | middle | bottom |

text-bottom | pourcentage
Un pourcentage correspond à un décalage positif ou négatif par rapport à la hauteur de ligne. Saisissez :

p.lft span {color: blue ;

vertical-align: sub ;}
p.mdl span {color: blue ;
vertical-align: 75% ;}
p.dte span {color: blue ;
vertical-align: super ;}

@
59
 TP 21 • Propriétés de texte
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

Remarquez que nous avons placé ici les éléments span concernés en bleu de façon à bien les faire ressortir.

La propriété text-transform permet de mettre tout un texte avec une majuscule au début de chaque mot, tout en
4 majuscules ou tout en minuscules, Saisissez :

.imp {text-transform: capitalize ;}

.maj {text-transform: uppercase ;}
.min {text-transform: lowercase ;}

La propriété text-indent définit une indentation positive ou négative pour la première ligne de texte, tandis que la
5 propriété text-align gère la justification du texte. Par défaut, left. Saisissez :

div.mdl p {text-indent: 25px}

p.lft {text-align: right ;}
p.mdl {text-align: center ;}
p.dte {text-align: justify ;}

@
60
 TP 21 • Propriétés de texte

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

La récente propriété text-shadow ajoute une ombre portée à du texte. Sa syntaxe est la suivante :
6
text-shadow: horizontal vertical flou couleur ;
Saisissez :

h1 {text-shadow: 5px 5px 3px #FF0000 ;}

Enfin, la propriété word-wrap permet d’imposer, en cas de dépassement latéral de la capacité d’un conteneur, la césure
7 d’un mot à n’importe quel emplacement. Saisissez :

p.fin {word-wrap: break-word;}

Fermez le fichier TP_CSS_21.html dans l’éditeur et le navigateur.

© Dunod – Toute reproduction non autorisée est un délit

@
61
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

TP
22 Multi-colonnage

I l était antérieurement possible de créer un multi-colonnage sur des pages web, mais au prix d’efforts certains et pour
des résultats parfois aléatoires. Le récent module Multi-colonnage Niveau 1 simplifie énormément le processus en
garantissant un résultat optimal.

Prérequis : néant
Fichier exemple : TP_CSS_22_début.html
Durée nécessaire : 15 minutes

Ouvrez dans votre éditeur de texte le fichier L’écartement est ici égal à la largeur de l’élément diminuée de
1 TP_CSS_22_début.html, puis enregistrez-le
sous le nom TP_CSS_22.html. Affichez ce fichier
300 px et divisée par 2.
Définir des colonnes entraîne des conséquences : dans
dans votre navigateur.
Vous définissez le nombre de colonnes de texte d’un 4 le troisième élément figure une image dont la largeur a
été fixée à 100 % de son conteneur (width:100;).
2 élément à l’aide de la propriété column-count.
Cette propriété possède comme valeur un nombre posi-
Saisissez :
tif ou le mot clé auto, auquel cas le nombre de colonnes est
spécifié par d’autres propriétés (comme column-width). .col3 {column-count: 3 ;
L’écartement entre les colonnes est défini à l’aide de la propriété column-width: 150px ;}
column-gap, avec comme valeur une longueur ou le mot clé
normal (valeur par défaut, correspondant généralement à
1em). Saisissez :
.col {column-count: 3 ;
column-gap: 40px ;}

La largeur de l’image est 100 % de la largeur de la colonne et

non de celle de l’élément conteneur complet.

Un phénomène similaire peut être observé dans l’élé-

La largeur des colonnes est ici égale à la largeur de l’élément

5 ment suivant : l’image y est définie comme flottante à
droite (float:right;). Saisissez :
moins 80 px (deux fois l’écart de 40 pixels, puisqu’il y a trois
colonnes) et divisée par 3. .col4 {column-count: 2 ;
column-width: 240px ;}
Plutôt que de définir un nombre de colonnes et un écar-
3 tement, vous pourriez spécifier un nombre de colonnes
et une largeur de colonne à l’aide de la propriété
column-width, qui admet comme valeur auto ou une
longueur. Saisissez :
.col2 {column-count: 3 ;
column-width: 150px ;}

L’image reste flottante à droite, mais au sein de sa colonne.

@
62
 TP 22 • Multi-colonnage

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

La propriété column-span permet toutefois à un
6 élément de s’étendre sur plusieurs colonnes. Elle ac-
cepte deux valeurs : none (la valeur par défaut), où
l’élément reste cantonné à une colonne, et all, qui lui permet
de s’étendre sur toutes les colonnes. Saisissez d’abord :

col5 {column-count: 3 ;
column-width: 150px ;}
Vous voyez le titre de second niveau limité dans une colonne.
Ajoutez :
h2.sp {column-span: all ;}
Le titre peut désormais s’étendre sur toutes les colonnes. Cette
propriété ne fonctionne actuellement toujours pas avec Fire-
fox 54 (même avec le préfixe) mais ne pose pas de problème
aux autres navigateurs récents. Elle est toutefois ignorée en cas
de dépassement horizontal ou vertical du conteneur parent.

Vous pouvez définir l’aspect d’un filet entre les colonnes

7 à l’aide de la propriété abrégée column-rule, dont
la syntaxe est la suivante :

column-rule:
column-rule-width column-rule-style
column-rule-color
Les arguments sont les valeurs admissibles pour les trois proprié-
tés apparentées column-rule-width, column-
rule-style et column-rule-color. Saisissez :

.ru {column-rule: 3px outset #ff00ff ;}

Enfin, il existe une forme abrégée, la propriété columns, dont la syntaxe est :
8
columns: column-count column-width;
Saisissez :
.col5 {columns:4 110px ;}
© Dunod – Toute reproduction non autorisée est un délit

Fermez le fichier TP_CSS_22.html dans l’éditeur et le ­navigateur.

@
63
 Propriétés d’interface
PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

TP
23
utilisateur
L e module Interface utilisateur Niveau 3 ajoute plusieurs propriétés concernant l’interface utilisateur. Toutes ne sont
toutefois pas mises en œuvre à l’heure actuelle : seules les propriétés exploitables sont présentées ici.

Prérequis : néant
Fichier exemple : TP_CSS_23_début.html
Durée nécessaire : 10 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_23_début.html, puis enregistrez-le sous le nom
1 TP_CSS_23.html. Affichez ce fichier dans votre navigateur.

La propriété resize spécifie si un élément dont la

2 propriété overflow est impérativement fixée à
auto peut être redimensionné par l’utilisateur. Avec la
valeur none (par défaut), l’utilisateur ne peut modifier l’élément.
both permet de modifier hauteur et largeur, horizontal
uniquement la largeur et vertical uniquement la hauteur.
Saisissez :

.r1 {resize: none ;}

.r2 {resize: vertical ;}
.r3 {resize: horizontal ;}
.r4 {resize: both ;}
Pour modifier la taille d’un élément redimensionnable, vous de-
vez vous placer sur son coin inférieur droit. On distingue (à
peine) un petit triangle de points. Cliquez puis glissez-déposez la
poignée.

La propriété box-sizing permet de spécifier l’emplacement où doivent se situer certains éléments. Avec la valeur
3 content-box (le comportement par défaut), les width et height (et min /max) spécifiées s’appliquent aux lar-
geur et hauteur de la boîte de contenu. L’espacement et les bordures sont tracés à l’extérieur. En revanche, avec la valeur
border-box, width et height (et min/max) déterminent la boîte de bordure de l’élément. Espacement et bordures sont
donc tracés à l’intérieur. La largeur et la hauteur du contenu sont calculées en soustrayant les largeurs d’espacement et de bordure des
propriétés width et height spécifiées. Enfin, inherit spécifie que la valeur de box-sizing doit être héritée de l’élément
parent. Saisissez :

.b1 {box-sizing: content-box ;}

.b2 {box-sizing: border-box ;}

@
64
 TP 23 • Propriétés d’interface utilisateur

PROPRIÉTÉS DE POLICE, DE COULEUR ET DE FOND

La propriété outline-offset est complémentaire
4 de la propriété outline, déjà abordée. Elle spécifie
l’éloignement de l’encadré par rapport à la zone de bor-
dure. Saisisssez :

.eb {outline: 2px solid red ;

outline-offset: 3px ;}
.eb1 {outline: 4px dotted blue ;
outline-offset: 20px ;}

La propriété text-overflow permet d’insérer une

5 ellipse (…) lorsque du texte dépasse le bord d’un élé-
ment. Cela impose que la propriété overflow soit
fixée à hidden et que la propriété white-space soit fixée
à no-wrap pour interdire tout retour à la ligne : une combinai-
son et un choix peu fréquents. Saisissez :

.o3 {overflow: hidden ;}

.o4 {overflow: hidden ;
text-overf 
low: ellipsis ;}

La propriété cursor permet de définir un curseur personnalisé, lorsque le pointeur est à l’intérieur de la boîte de l’élément
6 qui définit un curseur. Sa syntaxe est la suivante :

cursor: [url(url1)[, url(url2), url(urln) [x y]],] typeCurseur

Tous les formats d’images reconnus par CSS sont acceptables (cur, ico, png, gif, jpg, etc.), les images dépassant une certaine taille étant
toutefois ignorées : 128 pixels maximum pour Firefox mais seulement 32 pixels pour d’autres navigateurs. Placer plusieurs URI est
utile au cas où un format ne serait pas reconnu par le navigateur. Il peut être utile ou nécessaire de définir en outre pour certaines
images/curseurs deux coordonnées indiquant le « point chaud » du curseur, exprimé en pixels horizontaux et verticaux à partir du
coin supérieur gauche (le point chaud par défaut). La valeur typeCurseur détermine le type de curseur et peut prendre de très
nombreuses valeurs pouvant être réparties en catégories (voir annexe). Saisissez ces quelques exemples :

.c2 {cursor: pointer ;}

.c3 {cursor: help ;}
.c4 {cursor: progress ;}
© Dunod – Toute reproduction non autorisée est un délit

Fermez le fichier TP_CSS_23.html dans l’éditeur et le navigateur.

@
65
 Listes et compteurs
CSS propose des propriétés particulières permettant d’outrepasser la disposition par défaut proposée par les
navigateurs pour des listes ainsi que des propriétés de numérotation automatique (compteurs).

Listes et compteurs
© Dunod – Toute reproduction non autorisée est un délit

@
67
 TP
24 Propriétés de liste

C SS offre une mise en forme fondamentale des listes. Un élément défini automatiquement ou manuellement par
display: list-item génère une boîte bloc principale pour le contenu de l’élément et, selon les valeurs des
Listes et compteurs

propriétés list-style-type et/ou list-style-image, une éventuelle boîte de marqueur pour signaler que
l’élément est un élément de liste.

Prérequis : néant
Fichier exemple : TP_CSS_24_début.html
Durée nécessaire : 15 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_24_début.html, puis enregistrez-le sous le nom TP_
1 CSS_24.html. Affichez ce fichier dans votre navigateur.

La propriété list-style-image s’applique aux éléments dd, dt, li, ol, ul ou tout autre élément doté de la pro-
2 priété de style display:list-item . Elle spécifie l’image employée comme marqueur de liste. Elle accepte comme
valeur une URI, none ou inherit. Saisissez :

.P1 {list-style-image: url(img/coche.gif) ;}

La propriété list-style-type spécifie pour les mêmes éléments l’apparence du marqueur si la propriété list-
3 style-image est absente ou fixée à none ou si l’image définie par l’URI ne peut être affichée. Les valeurs possibles se
répartissent en trois catégories :
• Glyphes (symboles) : normalement employés pour les listes à puces (ul). Saisissez :

.P2 {list-style-type :disc ;} /* valeur par défaut */

.P3 {list-style-type :square ;}
.P4 {list-style-type :circle ;}

@
68
 TP 24 • Propriétés de liste
• Numérotations : normalement employées pour les listes numérotées (ol). Saisissez :

.N1 {list-style-type: decimal ;} /* valeur par défaut */

.N2 {list-style-type: decimal-leading-zero ;}
.N3 {list-style-type: lower-roman ;}
.N4 {list-style-type: upper-roman ;}

Listes et compteurs
Il ne s’agit que d’exemples, car vous pourriez également employer les valeurs hebrew, armenian, georgian, cjk-­
ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, correspondant à des systèmes de
numérotation moins fréquents pour nous.

• Alphabétiques : normalement employés pour les listes numérotées (ol). Saisissez :

.A1 {list-style-type: lower-latin ;}

.A2 {list-style-type: upper-latin ;}
.A3 {list-style-type: lower-greek ;}

Vous pouvez toutefois employer n’importe quelle valeur pour n’importe quel élément. Si vous appliquez une propriété
4 list-style-type de type numérotation à une liste à puces ul, celle-ci devient à l’affichage une liste numérotée.
Saisissez :

ul.D1 {list-style-type: decimal ;}

Cette « bizarrerie » trouve une explication toute simple : par défaut, un élément ul possède comme propriété implicite list-
style-type:decimal, exactement comme un élément ol possède une propriété implicite list-style-type:disc.
Si vous modifiez cette propriété, vous modifiez en conséquence l’affichage et faites potentiellement changer la liste de catégorie.
© Dunod – Toute reproduction non autorisée est un délit

Si vous spécifiez cette propriété à un élément liste (comme ul ou ol), elle s’appliquera par héritage à tous les éléments de
5 cette liste. Vous pouvez toutefois appliquer à un élément particulier cette propriété avec une valeur différente. Saisissez :

.a {list-style-type: lower-latin ;}
.b {list-style-type: upper-latin ;}
.c {list-style-type: lower-greek ;}

@
69
 TP 24 • Propriétés de liste
La propriété list-style-position spécifie la position de la boîte du marqueur par rapport à la boîte bloc principale.
6 Deux valeurs sont possibles, outside (valeur par défaut) et inside. Concrètement, cela se traduit par une indentation
supplémentaire. Saisissez :

.d {list-style-position: inside ;}
Listes et compteurs

Il existe une notation raccourcie pour les éléments de liste, list-style rassemblant ces différentes propriétés. Elle reste peu
­employée, puisque les deux dernières propriétés le sont elles-mêmes très peu.
list-style: list-style-type | list-style-position | list-style-image
Fermez le fichier TP_CSS_24.html dans l’éditeur et le navigateur.

@
70
 TP Propriétés de compteur
25
et de numérotation
L a numérotation automatique CSS est contrôlée par deux propriétés, counter-increment et counter-reset.
Ces compteurs sont employés par les fonctions counter() et counters() de la propriété content. Le module

Listes et compteurs
Styles de compteur Niveau 3, encore en travaux, permettra prochainement de définir des styles de compteur
personnalisés.

Prérequis : TP 23
Fichier exemple : TP_CSS_25_début.html
Durée nécessaire : 15 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_25_début.html, puis enregistrez-le sous le nom TP_
1 CSS_25.html. Affichez ce fichier dans votre navigateur.

La propriété counter-reset sert à créer et initialiser un compteur. Elle accepte comme argument un ou plusieurs noms
2 de compteurs (identifiants) et stipule la valeur initiale de chaque occurrence de l’élément (0 par défaut). Saisissez :

body {counter-reset: chapitre ;}

Inutile de rafraîchir la fenêtre du navigateur, rien ne sera visible à ce stade : vous n’avez fait que créer et initialiser un compteur nommé
chapitre. Il est interdit d’employer comme noms de compteurs none, inherit ou initial. None signifie que le comp-
teur n’est pas initialisé/incrémenté, inherit est un mot clé qui possède sa propre signification et initial est réservé à un
emploi futur.

La propriété counter-increment, applicable à tous les éléments, accepte un ou plusieurs noms de compteurs (iden-
3 tifiants), chacun facultativement suivi d’un entier indiquant le niveau d’incrémentation (1 par défaut). Des entiers négatifs ou
nuls sont acceptés.
Saisissez ce qui suit :

h1::before {content: "Chapitre " counter(chapitre) " - " ;

counter-increment: chapitre ;}
Vous voyez apparaître devant chaque titre h1 la chaîne « Chapitre n », où n
© Dunod – Toute reproduction non autorisée est un délit

est le numéro du chapitre concerné. Cela a été obtenu grâce au pseudo-­

élément ::before qui insère une chaîne de caractères et les valeurs du
compteur chapitre.

@
71
 TP 25 • Propriétés de compteur et de numérotation
Continuez en saisissant ce qui suit :
4
h1 {counter-reset: souschap ;}
Vous créez ici un nouveau compteur, souschap, initialisé à sa valeur par défaut, 0. Continuez :

h2::before {content: counter(chapitre) "." counter(souschap) " " ;

counter-increment: souschap ;}
Listes et compteurs

Vous voyez maintenant apparaître avant chaque titre de second niveau une chaîne composée du numéro du chapitre (la valeur ac-
tuelle du compteur chapitre), un point, puis la valeur du compteur souschap, incrémenté à chaque titre de second niveau.
Vous avez réalisé une numérotation automatique à partir d’éléments HTML tels que body, h1 et h2.
La fonction counters() génère une chaîne composée de plusieurs compteurs imbriqués portant le même nom, séparés
5 par une chaîne spécifiée. Saisissez :

ul {counter-reset: item ;}
li:before {content: counters(item, ".") ;
counter-increment: item ;}

La fonction counter() permet de modifier la mise en forme d’un compteur. Par défaut, il s’agit de nombres décimaux,
6 mais vous pouvez employer tous les styles autorisés pour la propriété list-style-type. Vous lui fournissez comme
arguments le nom du compteur puis le type de marqueur, séparé par une virgule. Modifiez comme suit la règle h2 :
h2:before {content: counter(chapitre) "." counter(souschap, lower-latin) " " ;
counter-increment: souschap ;}

Fermez le fichier TP_CSS_25.html dans l’éditeur et le navigateur.

@
72
 CSS et périphérique

CSS et périphérique d’affichage

d’affichage
CSS permet d’exploiter au mieux les caractéristiques du périphérique sur lequel le document doit être restitué :
écran graphique, écran de télévision, smartphone, tablette, navigateur à synthèse vocale, appareil tactile braille, etc.
C’est un composant désormais incontournable de ce que l’on nomme « conception adaptative » ” (responsive design).
© Dunod – Toute reproduction non autorisée est un délit

Très tôt, les feuilles de styles pouvaient s’appliquer à un périphérique ou à un groupe de périphérique spécifique.
Une feuille de styles prévue pour un écran peut en effet être éventuellement utilisable pour l’impression mais sera
de peu d’utilité pour un navigateur à synthèse vocale ou un smartphone à écran de faible taille.

Grâce aux requêtes médias (media queries), les feuilles de styles peuvent désormais s’adapter finement en fonction
des caractéristiques du support, qu’il s’agisse d’ailleurs de ses caractéristiques de base ou de celles présentes lors de
l’affichage de la page.

@
73
 Spécification de feuille de
CSS et périphérique d’affichage

TP
26
styles dépendant du média
G râce au module Requêtes médias Niveau 3, vous pouvez spécifier l’emploi d’une feuille de styles particulière en
fonction du périphérique de sortie ou média. Cela peut être effectué soit selon un type global de périphérique, soit
selon certaines caractèristiques de celui-ci et être employé soit à l’aide de feuilles de styles distinctes, soit à l’intérieur
d’une même feuille de styles.

Prérequis : néant
Fichier exemple : néant
Durée nécessaire : 5 minutes

Pour définir une feuille de styles propre à un média (un périphérique) particulier, il faut dans tous les cas employer l’attribut
1 media, un descripteur de média unique dont la valeur par défaut est screen (un écran d’ordinateur, le cas le plus fré-
quent). Les valeurs possibles de cet attribut et leur signification sont les suivantes :
• all : tous périphériques ;
• print : matériaux opaques paginés et documents vus en mode Aperçu avant impression ;
• projection : vidéoprojecteurs ;
• screen : écrans d’ordinateurs non paginés.

Il existait d’autres valeurs, désormais abandonnées (tty, tv, handheld, braille, embossed, speech anciennement
aural).

Cet attribut peut être employé pour lier une feuille de styles particulière à un type de périphérique. Cela s’effectue alors dans
2 l’élément link. Par exemple :

<link rel="stylesheet" media="screen" href="ecran.css" />

<link rel="stylesheet" media="print" href="print.css" />
La feuille de styles employée sera différente selon que le périphérique est un écran ou une imprimante. Cette méthode est à employer
lorsque les styles concernés sont nombreux. La valeur de media peut être unique ou une liste de descripteurs, séparés par des
virgules.

Cette distinction selon le type de périphérique restait toutefois grossière et souvent un peu trop globale, ce qui a donné nais-
3 sance aux requêtes médias : la valeur de l’attribut media devient une expression logique combinant un ou plusieurs des-
cripteur de média et surtout des caractéristiques médias. Par exemple :

<link rel="stylesheet" media="print and (color=0)" href="print.css" />

Il est spécifié ici qu’une feuille de styles particulière (print.css) s’applique aux périphériques d’un certain type (print, impri-
mante) avec une caractéristique particulière (color=0, soit une imprimante noir et blanc).
Vous pouvez combiner plusieurs requêtes en une liste séparée par des virgules. Une virgule équivaut à un OU logique, tandis que le
mot clé and correspond à un ET logique, not est un NON logique et only permet de masquer une feuille de styles pour des
navigateurs anciens :

media="screen and (color), projection and (color)"

media="not screen and (color)"
media="only screen and (color)"

@
74
 TP 26 • Spécification de feuille de styles dépendant du média

CSS et périphérique d’affichage

Les caractéristiques médias ressemblent aux propriétés CSS : elles possèdent un nom et acceptent certaines valeurs. Il
4 existe toutefois des différences importantes : la plupart des caractéristiques acceptent les préfixes facultatifs min- et max-
correspondant à « supérieur ou égal à » et à « inférieur ou égal à » et n’acceptent qu’une valeur simple (un mot clé, un nombre
ou un nombre avec une unité).
La spécification actuelle définit des caractéristiques utilisables avec des périphériques visuels et tactiles. D’autres caractéristiques
peuvent être définies pour des périphériques audio. Voici les principales caractéristiques médias :

width Largeur de la zone d’affichage du périphérique

height Hauteur d’affichage du périphérique
device-width Largeur d’affichage du périphérique
device-height Hauteur d’affichage du périphérique
orientation portrait lorsque la caractéristique height possède une valeur
supérieure ou égale à la caractéristique width, landscape dans le cas
contraire
aspect-ratio Rapport entre les caractéristiques width et height
device-aspect-
Rapport entre les caractéristiques device-width et device-height
ratio
color Nombre de bits par couleur du périphérique. 0 si le périphérique est
monochrome
color-index Nombre d’entrées dans la table de correspondance des couleurs du
périphérique. 0 si celui-ci n’emploie pas de table de correspondance
monochrome Nombre de bits par pixel d’un tampon de vue monochrome. 0 si le
périphérique n’est pas monochrome
resolution Résolution du périphérique de sortie
scan Processus de balayage d’un périphérique de type télévision. Ne s’appliquant
qu’à ces types de périphérique, elle accepte les valeurs progressive ou
interlace
grid Détermine si le périphérique est de type grid (quadrillage, comme un terminal
tty ou un affichage de téléphone à une seule police, auquel cas la valeur est 1)
ou de type bitmap (mode point, valeur 0)

La seconde méthode est le recours à une requête média exprimée par la règle @media à l’intérieur d’une feuille de styles,
5 mentionnant un média particulier et/ou une caractéristique média :

@media all and (min-width: 500px) {…}

@media screen and (orientation: portrait) {…}
© Dunod – Toute reproduction non autorisée est un délit

C’est cette dernière méthode que nous allons détailler dans le TP suivant.

@
75
CSS et périphérique d’affichage

TP
27 Requêtes médias

U ne requête média (media query) se compose de zéro ou plus descripteurs de périphérique (média) et de zéro ou
plus expressions qui en vérifient certaines caractéristiques particulières. C’est une expression logique qui est vraie
ou fausse. Elle est vraie si le type de périphérique correspond à celui spécifié dans la requête et si toutes les expressions
de la requête sont vraies. C’est grâce aux requêtes médias qu’il est possible de bâtir désormais des sites de qualité
capables de s’afficher sur n’importe quel périphérique, depuis l’ordinateur de bureau au smartphone, en passant par les
tablettes et phablettes.

Prérequis : TP 26
Fichier exemple : TP_CSS_27_début.html
Durée nécessaire : 10 minutes

Ouvrez dans votre éditeur de texte le fichier TP_CSS_27_début.html, puis enregistrez-le sous le nom
1 TP_CSS_27.html. Affichez ce fichier dans votre navigateur.

Modifez la taille de la fenêtre du navigateur. Vous constatez que le site s’adapte plus ou moins à la fenêtre, pour conserver un rendu attrayant.
C’est grâce au modèle de boîte flexible (flexbox) que nous étudierons dans le TP suivant. On peut toutefois aller bien plus loin.

Nous venons de voir dans le TP précédent qu’une re- On peut aller encore plus loin, en modifant plus radica-
2 quête média se créait dans une feuille de styles à l’aide
de la règle @media. Il est possible d’appliquer une re-
3 lement l’aspect de la page présentée. Saisissez :

quête média sur une caractéristique commune à tous les médias, @media (max-width:500px)
soit en employant le mot clé all suivi de and, soit en ne pré- {body {font-size: 9pt ;}
cisant aucun type de média. Saisissez : div.all {flex-direction: row ;}
div.menu {width: 60px ;
@media (max-width: 800px) flex-direction: column ;
{body {font-size: 12pt ;} justify-content: flex-start ;}
} }

Dès que la taille de la fenêtre est en dessous de 800 pixels, la taille

de base de la police employée dans le document passe de 16 à Lorsque la taille de la fenêtre passe en dessous de 500 pixels, le
12 pt. On regarde généralement de plus près un périphérique à menu se transforme de barre horizontale en barre de menu ver-
écran de taille inférieure, si bien que l’apparence reste analogue. ticale latérale, tandis que la police diminue à nouveau.

Le site peut être considéré comme au moins en partie adaptatif. Une baisse des caractéristiques (comme ici la taille de la police, mais
ce pourrait être aussi la suppression d’images, par exemple) porte le nom de « dégradation progressive ». L’exemple présenté ici est
des plus primitifs, se bornant à présenter le principe de fonctionnement des requêtes médias.
Fermez le fichier TP_CSS_27.html dans l’éditeur et le navigateur.

@
76
 Avancées CSS
Les dernières innovations CSS sont souvent qualifiées, par abus de langage, de CSS 3. Ce terme ne sert désormais
qu’à établir une différence chronologique avec les versions monolithiques précédentes de la spécification.
En effet, comme expliqué dans l’avant-propos, le langage CSS s’appuie sur la spécification CSS 2.1 et progresse
désormais module par module, dont chacun est développé de façon indépendante : il n’y aura pas de CSS 4 (même
informellement), mais certains modules pourront individuellement atteindre ou dépasser ce niveau.
Dans les TP suivants sont présentées des propriétés issues de modules stables mais encore en cours de test,

AVANCÉES CSS
susceptibles d’atteindre prochainement le stade de recommandation W3C et donc d’être intégrés à la spécification
de base.
Leur prise en charge dans les navigateurs récents est excellente, et l’emploi systématique dans les fichiers d’exercices
du script prefixfree.min.js (présent dans le téléchargement des fichiers d’exercice) devrait permettre un bon
fonctionnement des exercices sur la quasi-totalité des navigateurs, à l’exception possible d’anciennes versions
d’Internet Explorer.
© Dunod – Toute reproduction non autorisée est un délit

@
77
 TP
Modèle de boîte flexible
28 (flexbox)
L e module Flexbox Niveau 1 introduit un tout nouveau modèle de boîte. Ce mode de mise en page révolutionnaire
peut totalement redéfinir les mises en page en CSS. Attention toutefois, ce module n’est pas encore intégré à la
spécification. Comme il a beaucoup et rapidement évolué au fil du temps, bien que très largement pris en charge il peut
encore l’être de façon différente selon les navigateurs et leurs versions.

Prérequis : TP 9 à 16
Fichier exemple : TP_CSS_28_début.html
prise en main

Durée nécessaire : 40 minutes

AVANCÉES CSS

Ouvrez dans votre éditeur de texte le fichier TP_CSS_28_début.html, puis enregistrez-le sous le nom
1 TP_CSS_28.html. Affichez ce fichier dans votre navigateur. Il présente une apparence très classique : des éléments
p répartis dans des éléments div successifs. Pour voir l’effet des différentes propriétés, il sera préférable de modifier la taille
de la fenêtre, dans un sens puis dans l’autre.
Au sein du schéma flexbox, on ne raisonne plus en block ou inline, ni même en float ou autres types de boîtes CSS
habituelles, mais selon un modèle dont les quatre possibilités principales sont :

• distribution horizontale ou verticale des éléments, avec passage à la ligne autorisé ou non ;
• alignements et centrages horizontaux et verticaux, justifiés, répartis ;
• organisation des éléments indépendante de l’ordre du flux ;
• gestion des espaces disponibles (fluidité).
Le modèle se fonde sur un conteneur (flex-container) constituant le contexte général d’affichage et renfermant un ou plusieurs enfants
directs ou flex-items. Le conteneur est un élément HTML quelconque doté de la déclaration display:flex; ou
display:inline-flex;. Ses enfants sont alors automatiquement des éléments de type flex-item. Un élément flex-item n’est
plus considéré comme bloc ou inline : les valeurs de display autres que none et même certaines propriétés telles
que float sont sans effet sur lui.

La distribution est le sens d’affichage horizontal ou ­vertical des éléments flex-items. Elle est définie par la propriété
2 flex-direction dont les valeurs peuvent être row (distribution horizontale, valeur par défaut), row-reverse
(distribution horizontale inversée), column (distribution verticale) ou column-reverse (distribution verticale inver-
sée). Cette propriété appliquée au conteneur détermine l’axe principal du modèle de boîte flexible. Saisissez :
div.ligne {display:flex ;
flex-direction: row ;}
div.col {display: flex ;
flex-direction: column ;}

@
78
 TP 28 • Modèle de boîte flexible (flexbox)

AVANCÉES CSS
Les éléments p contenus dans des div de classe ligne ne sont plus disposés les uns en dessous des autres mais sur une même ligne.

La propriété flex-wrap définit si le contenu sera distribué

3 sur une seule ligne (ou colonne selon l’axe principal) ou sur plu-
sieurs lignes : autrement dit, si les flex-items peuvent ou non
passer à la ligne. Les valeurs possibles sont nowrap (valeur par défaut,
pas de passage à la ligne), wrap (passage à la ligne dans le sens de lec-
ture) ou wrap-reverse (passage à la ligne dans le sens inverse de
l’ordre de lecture).
La propriété raccourcie flex-flow regroupe flex-direction
et flex-wrap. Sa syntaxe est la suivante :
flex-flow: valeurFlexDirection
valeurFlexWrap
Modifiez comme suit les deux règles précédentes et ajoutez la troisième
règle :
div.ligne {display: flex ;
flex-flow:row wrap ;}
div.col {display: flex ;
flex-flow: column wrap ;}
div.wr {flex-flow: row wrap-reverse ;}
En diminuant la taille de la fenêtre, vous constatez que, dans le deuxième
élément div en ligne, le passage à la ligne s’effectue vers le haut, con-
trairement aux autres div de type ligne.
© Dunod – Toute reproduction non autorisée est un délit

Traditionnellement, aligner des éléments était relativement compliqué. Toutes les propriétés d’alignement n’étant pas applica-
4 bles à tous les éléments, réaliser un centrage était souvent délicat, une modification de la taille de l’affichage pouvant avoir des
conséquences désastreuses. Le modèle de boîte flexible permet désormais de gérer très finement les alignements et centrag-
es, à l’aide de deux propriétés applicables au flex-container.
Les alignements dans l’axe de lecture principal (déterminé par flex-direction) sont définis à l’aide de la propriété justify-
content, dont les valeurs possibles sont flex-start (éléments positionnés au début du sens de lecture,
valeur par défaut), flex-end (éléments positionnés à la fin), center (éléments centrés), space-between (répartition justi-
fiée dans l’espace) et space-around (variante de répartition justifiée). Ajoutez une nouvelle règle :
div.jc {justify-content: space-around ;}

@
79
 TP 28 • Modèle de boîte flexible (flexbox)
Les alignements sont gérés sur l’axe secondaire à l’aide de la propriété align-items, pouvant accepter les valeurs
5 stretch (valeur par défaut, étiré dans l’espace disponible), flex-start (au début) flex-end (à la fin), center
(au centre) et baseline (généralement identique à flex-start).
Attention, la valeur stretch ne fonctionne que si les flex-items n’ont pas de dimension fixe dans cette direction. Ajoutez cette
nouvelle règle :
div.st {align-items: stretch ;}

Il est possible d’appliquer un alignement particulier à un flex-item individuel, en lui appliquant la propriété align-self.
6 Cette propriété accepte les mêmes valeurs que align-items. Saisissez :

p#quatre {align-self: flex-start ;}

prise en main
AVANCÉES CSS

L’une des fonctionnalités les plus avant-gardistes du modèle de boîte flexible est la possibilité d’agir sur le flux HTML en
7 modifiant individuellement l’ordre des éléments, grâce à la propriété order. Cette propriété s’applique aux flex-items. Sa
valeur par défaut est 0, les éléments étant affichés par order croissant. Si deux éléments possèdent un order identique,
ils sont affichés dans l’ordre du document. Les valeurs négatives sont autorisées. Saisissez :
p.c {order: -1 ;}

La notion de flexibilité est sans surprise la raison d’être du modèle de boîte flexible. Elle s’exprime par la propriété flex,
8 applicable aux flex-items. Cette propriété est un raccourci des trois propriétés flex-grow, flex-shrink et flex-
basis :
flex: flex-growth flex-shrink flex-basis
• flex-grow est le facteur d’augmentation de l’élément, par rapport aux autres, dans l’espace restant. S’il est omis, il vaut 1 ;
• flex-shrink est le facteur de rétrécissement d’un élément si besoin, par rapport aux autres. S’il est omis, il vaut 1 ;
• flex-basis est la taille initiale de l’élément avant redistribution de l’espace restant. S’il est omis, c’est auto.

Attention toutefois : curieusement, par défaut, la propriété flex sans argument représente flex: 0 1 auto. Un flex-item n’occupe
par défaut que la taille minimale de son contenu. Il sera non flexible que si à la fois flex-grow et flex-shrink sont fixés à 0.
Il est conseillé d’employer de préférence la propriété flex plutôt que ses composantes individuelles, car cela évite de voir des para-
mètres particuliers perdurer. À cette fin, il est défini des valeurs classiques pour cette propriété :

• flex: initial : équivalent à flex: 0 1 auto, c’est la valeur par défaut. La taille de l’élément dépendra de ses
propriétés width/height ou, si fixé à auto, de son contenu. L’élément ne s’agrandit pas si de l’espace est disponible mais
diminue jusqu’à sa taille minimale si l’espace est insuffisant ;
• flex: auto : équivalent à flex: 1 1 auto. La taille de l’élément dépendra de ses propriétés width/height mais
il est parfaitement flexible, absorbant tout espace disponible sur l’axe principal. Si tous les éléments sont fixés à flex: auto,
flex: initial ou flex: none, tout espace disponible après l’ajustement des éléments sera redistribué de façon égale
entre les éléments fixés à flex: auto. Saisissez :

p.g {flex: auto ;}

@
80
 TP 28 • Modèle de boîte flexible (flexbox)
• flex: none : équivalent à flex: 0 0 auto. La taille des éléments dépendra de leurs propriétés width/height
et l’élément est totalement non flexible. Analogue à initial, si ce n’est que les éléments ne peuvent pas rétrécir, même dans
des situations de dépassements (overflow).
• flex: <nombre positif> : équivalent à flex: <nombre positif> 1 0. L’élément est flexible avec une taille de base fixée à 0,
si bien que l’élément bénéficie de la portion définie de l’espace disponible dans le flex-container. Si tous les éléments du conteneur
sont fixés à cette valeur, leur taille sera proportionnelle au facteur flex spécifié. Saisissez :
p.h {flex: 2 ;}
p.i {flex: 3 .5 auto ;}

Regardez notre fichier exemple. L’élément div affiché en haut de la page (les quatre lettres A B C D) est un flex-container nommé
menu qui renferme quatre éléments flex-items eux-mêmes de type div. Voici la partie pertinente du code CSS qui les définit :
div.menu{…
display: flex ;
flex-wrap: nowrap ;

AVANCÉES CSS
width: 120px ;}
div.menu div{…
flex: 1 ;
overflow: hidden ;}
Chaque élément flex-item possède une propriété flex fixée à 1. Les quatre éléments se partagent équitablement les 120 pixels
disponibles. Comme leur propriété overflow a été fixée à hidden, ils ne débordent pas : seule la lettre de gauche est affichée.
Saisissez ce qui suit. C’est une modification lorsque la souris survole un élément :
div.menu:hover {width: 325px ;}
div.menu div:hover{flex: 10 ;}

La largeur de la barre de menu passe à 325 pixels et le flex de l’élément de menu survolé passe à 10 : cet élément occupera donc
10/13e de l’espace disponible (10 + 3 × 1), soit ici maintenant 250 pixels, alors qu’en revanche les autres éléments n’occuperont plus
que 1/13e de cet espace, soit 25 pixels. De ce fait, tout le texte de l’élément survolé s’affiche.
La propriété margin appliquée à un flex-item permet de nouvelles choses, puisque le modèle de boîte flexible n’est pas
9 dépendant d’un sens de lecture particulier. Autrement dit, alors qu’il était très délicat de centrer un élément verticalement,
vous pouvez désormais placer un élément au milieu de son conteneur en donnant la valeur auto à ses propriétés
margin-top et margin-bottom (un équivalent de align-self:flex-end si les éléments sont en ligne). Encore
mieux, vous pouvez centrer à la fois horizontalement et verticalement par un simple margin: auto. Saisissez :
img {margin: auto ;}
© Dunod – Toute reproduction non autorisée est un délit

Une utilisation astucieuse des marges permet ainsi de placer facilement certains éléments à gauche et d’autres à droite dans
10 un menu, une disposition fréquemment rencontrée. Saisissez :

p.rgt {margin-left: auto ;}

Le modèle de boîte flexible demeure une spécification vaste et complexe, dont de nombreux recoins restent à explorer. Il
répond indéniablement à de nombreuses attentes des concepteurs web depuis de longues années. C’est probablement la méthode
de positionnement la plus pratique et polyvalente de CSS, même si elle risque à terme d’être concurrencée ou même supplantée par
le module Grid, étudié plus loin. Il convient toutefois de rester prudent car la prise en charge de ce modèle par les différents naviga-
teurs n’est pas encore homogène : fonder une présentation totalement sur flexbox pourrait être dangereux.
Il demeure que ce modèle est probablement la meilleure réponse possible pour la création de sites réellement adaptatifs, capables de
s’afficher dans les meilleures conditions quel que soit le support d’affichage.
Fermez le fichier TP_CSS_28.html dans l’éditeur et le navigateur.
@
81
 TP
29
Transformations 2D

L a propriété transform du module Transformations Niveau 1 propose plusieurs méthodes qui permettent d’obtenir
différents effets bidimensionnels sur un élément : le déplacer, modifier sa taille, le faire pivoter, le retourner ou le
déformer. Elle est prise en charge par les navigateurs récents à l’aide de leurs préfixes dédiés.

Prérequis : néant
Fichier exemple : TP_CSS_29_début.html
Durée nécessaire : 10 minutes
prise en main
AVANCÉES CSS

Ouvrez dans votre éditeur de texte le fichier TP_CSS_29_début.html, puis enregistrez-le sous le nom
1 TP_CSS_29.html. Affichez ce fichier dans votre navigateur.

La première méthode de la propriété transform est translate(), qui déplace un élément de la position actuelle à
2 une nouvelle position, selon les paramètres fournis pour la position gauche (horizontal) et haut (vertical).
Saisissez :
.tr {transform: translate(50px,-100px) ;}

La méthode rotate() fait pivoter l’élément dans le sens des aiguilles d’une montre selon le nombre de degrés spécifié.
3 Les valeurs négatives sont autorisées : l’élément pivote alors dans le sens contraire aux aiguilles d’une montre. Saisissez :

.ro {transform: rotate(30deg) ;}

@
82
 TP 29 • Transformations 2D
La méthode scale() modifie la taille de l’élément selon les paramètres fournis pour la largeur et la hauteur. Saisissez :
4
.re {transform: scale(0.5,1.2) ;}

Comme vous pouvez le constater, cette modification de taille peut avoir de sérieuses conséquences sur la lisibilité du contenu.

La méthode skew() étire l’élément par rapport au plan, selon les paramètres fournis pour les axes horizontal et vertical.

AVANCÉES CSS
5 Saisissez :

.sk {transform: skew(20deg,30deg) ;}

Comme pour la méthode scale, cette transformation peut avoir de sérieuses conséquences sur la lisibilité du contenu.
Ces trois méthodes possèdent chacune deux variantes à argument unique : translateX() et translateY() définissent
respectivement une translation uniquement sur l’axe X (horizontal) ou sur l’axe Y (vertical), scaleX(x) et scaleY(y) ne modi-
fient respectivement que la largeur ou la hauteur, et skewX() et skewY() définissent respectivement un étirement uniquement
sur l’axe X ou sur l’axe Y.

La propriété transform-origin fixe le point de départ de transformation de l’élément transformé à l’aide de deux
6 coordonnées, horizontale et verticale, exprimées en unités, en pourcentage ou par mot clé. Par défaut, le point de départ est
au milieu (50 % 50 %).
transform-origin: axe-x axe-y ;
Ajoutez le code suivant en gras à la règle pour l’élément de classe sk :
© Dunod – Toute reproduction non autorisée est un délit

.sk {transform: skew(20deg,30deg) ;

transform-origin: 150px 190px ;}

Fermez le fichier TP_CSS_29.html dans l’éditeur et le navigateur.

@
83
 TP
30
Transformations 2D multiples

C haque appel à la propriété transform et à ses méthodes annule tout appel précédent. Il existe toutefois plusieurs
façons de combiner des transformations.

Prérequis : TP 29
Fichier exemple : TP_CSS_30_début.html
Durée nécessaire : 10 minutes
prise en main
AVANCÉES CSS

Ouvrez dans votre éditeur de texte le fichier TP_CSS_30_début.html, puis enregistrez-le sous le nom
1 TP_CSS_30.html. Affichez ce fichier dans votre navigateur.

Chaque appel à la propriété transform et à ses Pour appliquer plusieurs transformations à un même
2 méthodes annule tout appel précédent. Pour en avoir la
preuve, saisissez :
3 élément, vous devez rassembler ces transformations au
sein d’une unique propriété transform, en les
séparant par un simple espace. Saisissez :
.tr1 {transform: rotate(20deg) ;
transform: scale(.5, 1) ;} .tr2 {
transform: rotate(20deg)
scale(.5, 1) ;}

Normalement, l’élément devrait légèrement tourner puis voir sa

largeur réduite. En pratique, seule la réduction de taille est visible
ici : le dernier transform a annulé le précédent. Cette fois, les deux transformations sont bien appliquées. Vous
pouvez combiner un nombre quelconque de transformations.

Lors de la combinaison de transformations, l’ordre possède une importance certaine : si vous appliquez ces deux transforma-
4 tions dans un ordre différent, l’aspect ne sera pas le même. Saisissez :

.tr3 {
transform: scale(.5, 1)
rotate(20deg) ;}

@
84
 TP 30 • Transformations 2D multiples
Il existe une autre façon d’appliquer plusieurs transformations. La fonction matrix() est la méthode abrégée qui combine
5 toutes les méthodes 2D précédentes en une seule. C’est toutefois un concept plutôt délicat à appréhender pour un non-
mathématicien. Employant six paramètres, elle s’appuie en réalité sur une matrice 3 × 3 (trois lignes et trois colonnes et est
appliquée aux coordonnées cartésiennes des points d’origine de l’élément concerné, exprimées selon une matrice 3 × 1 (trois lignes
et une colonne). Chaque transformation élémentaire correspond à une matrice mathématiquement connue.
Par exemple, saisissez :
.ro1 {transform: matrix(0.866,0.5,-0.5,0.866,0,0) ;}
.ro2 {transform: rotate(30deg) ;}

AVANCÉES CSS
Ces deux règles imposent une rotation de 30 degrés à l’élément p concerné. Il n’y a ici guère d’intérêt à employer matrix(), dont
la syntaxe est nettement plus complexe.

Imaginez toutefois que vous vouliez transformer un élément div contenant une image. Vous voulez diminuer la taille de
6 10 %, effectuer une rotation de 15° sur le plan (axe Z), déformer l’élément de 10° horizontalement et de 25° verticalement
puis effectuer une translation de 25 pixels vers la droite et de 10 pixels vers le haut.
Vous pourriez tout simplement saisir (faites-le !) :
.tr4 {
transform: scale(.9,.9) rotate(15deg) skew(10deg, 15deg)
translate(25px,10px) ;}

Cela impose au navigateur de convertir chaque instruction en matrice, puis d’effectuer quatre multiplications de matrices. Si
7 vous employez régulièrement cette transformation, la conséquence pourrait être un ralentissement du site. En employant la
fonction matrix(), le rendu sera bien plus plus rapide, puisqu’il n’y aura qu’une multiplication à effectuer. Saisissez :

.tr5 {transform: matrix(.806, .467, -.08, .910, 19.35, 20.775) ;}

© Dunod – Toute reproduction non autorisée est un délit

Le résultat est strictement identique, mais bien plus rapide. Le détail du fonctionnement de la fonction matrix() est complexe et
nécessite de comprendre le fonctionnement mathématique des opérations sur les matrices, ce qui dépasse l’objectif de ce TP.
Fermez le fichier TP_CSS_30.html dans l’éditeur et le navigateur.

@
85
 TP
31
Transformations 3D

L e module Transformations Niveau 1 propose via la propriété transform plusieurs méthodes qui permettent
d’obtenir des effets tridimensionnels sur un élément.

Prérequis : TP 29 et 30
Fichier exemple : TP_CSS_31_début.html
Durée nécessaire : 20 minutes
prise en main
AVANCÉES CSS

Ouvrez dans votre éditeur de texte le fichier TP_CSS_31_début.html, puis enregistrez-le sous le nom TP_CSS_31.
1 html. Affichez ce fichier dans votre navigateur.

Toutes les méthodes 2D examinées précédemment, Remarquez que si vous faites ainsi pivoter un élément
2 sauf skew, possèdent leur variante 3D, ainsi qu’une
nouvelle variante à argument unique permettant d’ef-
4 plat à 90°, celui-ci sera invisible… Saisissez :

fectuer la transformation selon la profondeur : .ro2 {transform: rotateX(90deg) ;}

• translate3d(x,y,z) : translation 3D ;
• translateZ(z) : translation 3D sur l’axe Z (profondeur) ;
• scale3d(x,y,z) : modification d’échelle 3D ;
• scaleZ(z) : modification d’échelle 3D en profondeur.
La méthode rotate est toutefois particulière en ce que toutes
ses variantes sauf une sont tridimensionnelles : Comme en transformation 2D, la propriété
• rotate3d(x,y,z) : rotation 3D ; 5 ­transform-origin permet de fixer le point de
transformation de l’élément, tandis que la méthode
• rotateX(angle) : rotation sur l’axe horizontal ; matrix3d() est une méthode abrégée permettant de combi-
• rotateY(angle) : rotation sur l’axe vertical ; ner des transformations 3D en une seule méthode à l’aide d’une
matrice de 16 valeurs (4 × 4). Comme pour la méthode bidimen-
• rotateZ(angle) : rotation sur l’axe de profondeur (donc sionnelle correspondante, cela fait appel à des notions mathéma-
sur le plan, comme une rotation 2D : un simple rotate()). tiques complexes : nous ne la citons ici que pour mémoire.

Pour faire pivoter un élément de 120 degrés autour de Ce module introduit d’autres propriétés liées aux trans-
3 l’axe horizontal à l’aide de rotateX(), saisissez : 6 formations 3D. Ainsi, la propriété backface-
visibility définit si un élément doit être visible
lorsqu’il n’est pas face à l’écran. Avec la valeur par défaut
.ro1 {transform: rotateX(120deg) ;} visible, le fond est visible ; avec hidden, il ne l’est pas.
Saisissez :
.bf {transform: rotateX(180deg) ;}
.h {backface-visibility: hidden ;}

@
86
 TP 31 • Transformations 3D
Il est fréquent de réaliser un assemblage 3D d’éléments. La propriété perspective définit l’éloignement
7 Cela s’effectue le plus souvent à l’intérieur d’un élément
conteneur, lequel peut ensuite être manipulé selon les
9 d’un élément 3D le long de l’axe Z (avant toute transfor-
mation). Bien que définie sur un élément parent, elle
besoins. La propriété transform-style spécifie le rendu n’agit que sur les éléments enfants en leur affectant le même
des éléments imbriqués dans l’espace tridimensionnel. Avec la point de fuite. none, la valeur par défaut, correspond à une ab-
valeur flat (par défaut), les éléments enfants ne conservent sence de perspective. Si un nombre non nul est spécifié, cela
pas la position 3D de leur parent. Pour conserver celle-ci, em- définit l’éloignement en pixels par rapport à la vue. De manière
ployez la valeur preserve-3d. Cette propriété doit être em- générale, plus vous spécifiez un fort éloignement et moins l’effet
ployée en combinaison avec la propriété transform. 3D sera perceptible. Saisissez :
Dans le fichier exercice, les trois premières div du milieu sont .trois {perspective: 150px ;}
identiques. Elles contiennent elles-mêmes trois div (de classe
respective d1, d2 et d3) assemblées en un triangle. La première
est face à l’écran, les deux autres ont été tournées et déplacées
de façon à former une pointe vers l’arrière (vous pouvez exami­
ner le code CSS qui permet d’y parvenir, mais sans le modifier !).
Les angles sont de 120°. Saisissez ce qui suit :
.un {transform: rotateY(120deg) ;}

AVANCÉES CSS
.deux {transform-style: preserve-3d ;
transform: rotateY(120deg) ;}

Vous pourriez être surpris du résultat. Augmentez la valeur de la

perspective : vous vous rapprochez de l’aspect précédent, où
aucun point de fuite n’était défini.

La propriété perspective-origin est complé-

Vous effectuez une rotation de 120° du conteneur. Dans

10 mentaire à la propriété perspective et permet de
compléter la définition du point de fuite sur l’axe de pro-
8 le premier cas, la position 3D de la div conteneur n’est
pas repercutée sur les enfants : le résultat est peu inté-
fondeur Z effectuée par la propriété perspective par des
coordonnées horizontales et verticales. Comme elle, elle ne s’ap-
ressant. En revanche, l’emploi de la valeur preserve-3d per- plique qu’aux éléments enfants. L’axe X accepte les valeurs
met dans le second cas de voir une autre face de notre triangle. left, center, right, longueur et pourcentage.
Modifiez la règle pour l’élément de classe deux en appliquant L’axe Y accepte les valeurs top, center, bottom,
une rotation de –120° pour en être persuadé : ­longueur et pourcentage. Leurs valeurs par défaut sont
50 %. Ajoutez le code en gras à la règle précédente :
.deux {transform-style: preserve-3d ;
transform: rotateY(-120deg) ;} .trois {perspective: 150px ;
perspective-origin:
40px 20px ;}
© Dunod – Toute reproduction non autorisée est un délit

Là encore, vous constatez que l’effet est sensible.N’hésitez pas à faire varier les paramètres pour bien comprendre le mécanisme.
Fermez le fichier TP_CSS_31.html dans l’éditeur et le navigateur.

@
87
 TP
32
Transformations 3D multiples

C haque appel à la propriété transform et à ses méthodes annule tout appel précédent. Comme pour en 2D, il
existe plusieurs façons de combiner des transformations 3D.

Prérequis : TP 29 à 31
Fichier exemple : TP_CSS_32_début.html
Durée nécessaire : 15 minutes
prise en main
AVANCÉES CSS

Ouvrez dans votre éditeur de texte le fichier TP_CSS_32_début.html, puis enregistrez-le sous le nom TP_CSS_32.
1 html. Affichez ce fichier dans votre navigateur.

Comme cela a déjà été évoqué, chaque appel à la pro- Comme pour les transformations 2D, l’ordre possède
2 priété transform et à ses méthodes annule tout
appel précédent. Pour appliquer plusieurs transforma-
3 une importance certaine : si vous appliquez ces deux
dans un ordre différent, l’aspect ne sera pas le même.
tions 3D à un même élément, vous devez comme en Saisissez :
2D ­rassembler ces transformations au sein d’une unique pro-
priété ­transform, en les séparant par un simple espace. Par .tr2 {
exemple, saisissez : transform: rotateX(25deg)
rotateY(30deg) ;}
.tr1 {
transform: rotateY(30deg)
rotateX(25deg) ;}

Comme en 2D, vous pouvez appliquer plusieurs transformations à l’aide de la fonction matrix3d(), qui combine toutes
4 les méthodes 3D précédentes en une seule. C’est, comme son homologue matrix(), un concept plutôt délicat à appré-
hender pour un non-mathématicien. Employant seize paramètres, elle s’appuie sur une matrice 4 × 4 (quatre lignes et quatre
colonnes) et est appliquée aux coordonnées cartésiennes des points d’origine de l’élément concerné, exprimées selon une matrice
4 × 1 (quatre lignes et une colonne). Chaque transformation élémentaire correspond à une matrice mathématiquement connue.

@
88
 TP 32 • Transformations 3D multiples
Par exemple, saisissez :
.ro1 {transform: matrix3d(.985, .174, 0, 0,
-.174, .985, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1) ;}
.ro2 {transform: rotateZ(10deg) ;}

Ces deux règles imposent une rotation sur le plan de 10 degrés aux éléments concernés. Il n’y a ici guère d’intérêt à employer

AVANCÉES CSS
matrix3d(), dont la syntaxe est nettement plus complexe. Certaines situations sont toutefois tout autres…

Imaginez que vous vouliez transformer un élément div. Vous voulez effectuer une rotation de 15° sur le plan (axe Z) et de
5 30° horizontalement (axe X), diminuer la taille de 10 % et effectuer une translation de 10 pixels vers la droite.
Vous pourriez tout simplement saisir à la suite les transformations élémentaires (faites-le !) :
.tr3 {transform: rotateZ(15deg) rotateX(30deg) scale(.9) translate(-10px,0) ;
z-index :5 ;}
La propriété z-index déjà rencontrée sert à mettre au premier plan l’élément transformé, initialement caché sous l’élément qui le
précédait : vous voyez ainsi l’élément initial, en rose, puis l’élément transformé, en bleu. Le navigateur va devoir convertir chaque
instruction en matrice, puis effectuer cinq multiplications de matrices. Si vous employez régulièrement cette transformation, la consé-
quence pourrait être un ralentissement du site. En employant la fonction matrix3d(), le rendu sera bien plus plus rapide, puisqu’il
n’y aura qu’une multiplication à effectuer. Saisissez :
.tr4 {transform: matrix3d(0.869333, 0.232937, 0, 0,
-0.201729, 0.752865, 0.45, 0,
0.12941, -0.482963, 0.866025, 0,
-8.69333, -2.32937, 0, 1)
z-index: 5 ;}
© Dunod – Toute reproduction non autorisée est un délit

Le résultat est strictement identique, mais bien plus rapide. Le détail du fonctionnement de la fonction matrix3d() est complexe
et nécessite de comprendre le fonctionnement mathématique des opérations sur les matrices. Il existe toutefois des outils permettant
la conversion de toute combinaison en fonction matrix3d, comme celui développé par Eric Meyer et Aaron Gustafson (http://
meyerweb.com/eric/tools/matrix/).
Fermez le fichier TP_CSS_32.html dans l’éditeur et le navigateur.

@
89
 TP
33
Transitions

L e module Transitions Niveau 1 permet d’ajouter un effet de transition lors du passage d’un style à un autre à l’aide
de la propriété transition. Il est évident que des captures d’écran, par définition statiques, ne pourront refléter
correctement ce qui est exposé : seuls vos essais y parviendront.

Prérequis : TP 29 à 32
Fichier exemple : TP_CSS_33_début.html
Durée nécessaire : 10 minutes
prise en main
AVANCÉES CSS

Ouvrez dans votre éditeur de texte le fichier TP_CSS_33_début.html, puis enregistrez-le sous le nom
1 TP_CSS_33.html. Affichez ce fichier dans votre navigateur.

Il a été employé sur cette page un effet de zoom très

2 classique, grâce à la pseudo-classe :hover :

.im1:hover {transform: scale(1.5) ;}

Lorsque vous passez le pointeur de la souris sur la première ima­
ge, celle-ci s’agrandit immédiatement, pour retrouver sa taille
initiale dès que le pointeur se trouve hors de l’image. Essayez.

Il serait agréable que l’agrandissement s’opère de façon

3 plus progressive : cela est réalisable grâce à la propriété
transition. La syntaxe de cette propriété rac-
courcie est la suivante :

transition: transition-property
transition-duration
transition-timing-function
transition-delay ;
transition-property est la propriété CSS concernée
par la transition. transition-duration est la durée de
la transition exprimée en secondes (un nombre suivi sans espace
de la lettre s ; par défaut, 0, soit pas de transition).
­transition-timing-fonction est le mode de calcul
de la vitesse de la transition, avec comme valeurs possibles
linear (vitesse constante), ease (valeur par défaut : début
lent, accélération puis ralentissement), ease-in (début lent),
ease-out (fin lente), ease-in-out (début et fin lents) et
cubic-bezier(a,b,c,d) où a, b, c et d sont des valeurs
comprises entre 0 et 1 de la fonction cubique de Bézier. Enfin
transition-delay est le délai exprimé en secondes
avant le début de la transition (un nombre suivi de s,
0 par ­défaut).
Saisissez :
.im1:hover {transition: transform 2s ;}

@
90
 TP 33 • Transitions
Vous pouvez spécifier ces propriétés élémentaires indépendamment de la propriété raccourcie et vous pouvez définir plu-
4 sieurs propriétés pour une transition en les séparant par une virgule. Complètez avec le code en gras la règle précédente :

.im1:hover {padding: 10px ;

border: 3px solid blue ;
transition: padding 1s 2s, border 1s .5s, transform 2s ;}

AVANCÉES CSS
Les transitions permettent d’obtenir des effets intéressants, comme par exemple simuler la mise en panier d’un article.
5 ­Saisissez  :

p:active img {transform: translate(1100px,-200px) scale(0,0) ;

opacity: 0 ;
transition: all 2s ;}

Fermez le fichier TP_CSS_33.html dans l’éditeur et le navigateur.

© Dunod – Toute reproduction non autorisée est un délit

@
91
 TP
34
Animations

L e module Animations Niveau 1 permet de créer des animations capables de remplacer des images animées, des
animations Flash ou du code JavaScript à l’aide de la règle @keyframes et de la propriété animation. La
plupart des navigateurs exigent encore l’emploi de leur préfixe dédié. Comme avec le TP précédent Il est évident que
des captures d’écran statiques ne pourront refléter correctement ce qui est exposé : seuls vos essais y parviendront.
Prérequis : TP 29 à 33
Fichier exemple : TP_CSS_34_début.html
Durée nécessaire : 10 minutes
prise en main
AVANCÉES CSS

Ouvrez dans votre éditeur de texte le fichier TP_CSS_34_début.html, puis enregistrez-le sous le nom
1 TP_CSS_34.html. Affichez ce fichier dans votre navigateur.

Les animations sont rendues possibles par la règle @keyframe, dont voici la syntaxe :
2
@keyframes nom_animation
{
étape1 {style: valeur1}
étape2 {style: valeur2}
…
étapen {style: valeurn}
}
étape est une valeur croissante en pourcentage, allant de 0 % (équivalant au mot clé from) à 100 % (équivalant au mot clé to),
nom _ animation est le nom que vous donnez à l’animation, style une propriété CSS, valeur1 à valeurn les valeurs
successives de cette propriété. Vous pouvez modifier autant de styles que vous voulez, autant de fois que vous le voulez. Il doit toute-
fois y avoir au moins deux étapes. Saisissez :

@keyframes animtest
{
0% {background: red ;}
25% {background: yellow ;
transform: translate(150%, 25%) ;}
50% {background: cyan ;
transform: translate(100%, 175%) ;}
75% {background: green ;
transform: translate(-150%, 300%) ;
color: white ;}
100% {background: red ;}
}
Remarquez que, comme dit précédemment, tout appel à la propriété transform annule toute transformation antérieure : vous
repartez toujours de la position initiale de l’élément. Inutile de tester à ce stade, il ne se passera encore rien.

@
92
 TP 34 • Animations
Vous devez ensuite lier l’animation à un sélecteur, pour l’appliquer à celui-ci. La propriété animation, dotée d’au moins
3 deux arguments obligatoires, le nom et la durée de l’animation, vous aide à le faire. Voici la syntaxe complète :

sélecteur {
animation: animation-name animation-duration [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction];}
sélecteur est un sélecteur quelconque, a ­nimation-name est le nom de l’animation @keyframes,
a
­ nimation-duration la durée en secondes ou m ­ illisecondes d’un cycle d’animation (par défaut 0, pas d
­ ’animation),
animation-timing-function est le mode de calcul de la durée (identique à la propriété ­ transition-
timing-function), animation-delay le délai avant début de l’animation (par défaut 0), animation-
iteration-count le nombre d’itérations de l’animation (un nombre positif ou nul ou la valeur infinite ; par défaut 1),
et animation-direction spécifie si l’animation doit se dérouler toujours normalement (normal, valeur par défaut) ou
dans l’ordre contraire sur les cycles pairs (alternate). Saisissez :

div.test:hover {animation: animtest 5s linear 2s 4 alternate;}

AVANCÉES CSS
Une dernière propriété apparentée, absente de la propriété abrégée, est animation-play-state. Elle spécifie si
4 l’animation est active (running, la valeur par défaut) ou en pause (paused). Modifier cette valeur à l’aide du CSS ou d’un
script permet de lancer et d’arrêter à volonté une animation. Cela demande toutefois un peu de réflexion et de préparation :
il est nécessaire de disposer d’un quelconque bouton permettant de visualiser notre action. Cela est obtenu à l’aide de trois éléments
input et de leurs étiquettes associées :
<input id="start" name="controles" type="radio" />
<input id="stop" name="controles" type="radio" checked="checked"/>
<input id="reset" name="controles" type="radio" />

<label for="start" id="lblstart" title="Démarrer">ON</label>

<label for="stop" id="lblstop" title="Arrêter">OFF</label>
<label for="reset" id="lblreset" title="Réinitialiser">RESET</label>
Pour vous simplifier les choses, le code HTML est déjà présent dans le fichier d’exercice, de même que les règles CSS qui concernent
ces éléments. Examinez-les. Le point le plus intéressant est le non-affichage des éléments input, puisqu’un clic sur leur étiquette
© Dunod – Toute reproduction non autorisée est un délit

associée a le même effet qu’un clic sur eux-mêmes.

input[name="controles"] {display: none;}
Il faudra employer la pseudo-classe :checked pour savoir si la commande en question est cliquée ou non. Enfin, il faudra bien
établir la relation de filiation entre la commande et l’élément concerné par l’animation, pour créer le sélecteur adéquat. C’est ici le
sélecteur de frère, le tilde (~). Saisissez :
#stop:checked~div.t {animation-play-state: paused ;}
#start:checked~div.t {animation-play-state: running ;}

@
93
 TP 34 • Animations
Il faut enfin lier l’élément div concerné à l’animation. Remarquez que bien qu’employant la même animation nous avons un
5 peu modifié les paramètres.

div.t {animation: animtest 5s linear .1s infinite alternate ;}

prise en main
AVANCÉES CSS

Cela fonctionne (en principe, sauf erreur de saisie). Toutefois, lorsque vous cliquez sur Off, l’animation s’arrête exactement là où elle
en était. Et reprend à cet endroit si vous cliquez à nouveau sur On.

Il serait agréable de pouvoir réinitialiser l’animation, mais la propriété animation-play-state ne possède que deux
6 valeurs… Le bouton Reset pourtant proposé n’a pour le moment aucun effet. La solution est de l’employer pour fixer la
propriété animation à none : cela revient à la supprimer, donc à la réinitialiser. Saisissez :

#reset:checked~div.t {animation: none ;}

Désormais, un clic sur Reset réinitialise l’animation.

Fermez le fichier TP_CSS_34.html dans l’éditeur et le navigateur.

@
94
 TP
35
Modèle de quadrillage (grid)

L e module Grid Niveau 1, devenu CR en février 2017, propose un type d’affichage bidimensionnel, alors que flexbox
était unidimensionnel. Il constitue une révolution probablement encore plus spectaculaire que le module flebox et
devrait s’imposer à terme comme modèle de base de conception de toute page web.
Ce TP est le plus long de tout le livre, mais cela s’explique par la richesse et la complexité de ce splendide module.

Prérequis : presque tous les TP

Fichier exemple : TP_CSS_35_début.html
Durée nécessaire : 45 minutes

AVANCÉES CSS
Ouvrez dans votre éditeur de texte le fichier TP_CSS_35_début.html, puis enregistrez-le sous le nom
1 TP_CSS_35.html. Affichez ce fichier dans votre navigateur.
Le module Grid est encore actuellement mis en œuvre de façon différente selon les navigateurs : vérifiez avant de commen­
cer qu’il est bien reconnu par votre navigateur. Si tel est le cas, vous devriez voir dans le premier élément en haut à gauche un qua­
drillage composé de neuf cases (trois lignes et trois colonnes). Si ce n’est pas le cas, mettez à jour votre navigateur ou changez-en, ou
reportez-vous au tableau ci-dessous pour essayer d’activer la prise en charge. Vous ne pourrez effectuer ce TP que si vous voyez
correctement ce premier quadrillage. Seuls les navigateurs relativement récents en sont capables.

Chrome : 57+ Internet Explorer : 11+

Activable à partir de Chrome 29.0 via le marqueur fonctionnalités expérimentales de la (avec préfixe -ms-)
plateforme web sous chrome://flags
Firefox : 53+ Safari : 10.1+
La préférence layout.css.grid.enabled doit être activée à partir de Firefox 40.0. Elle l’est (avec préfixe -webkit-)
(souvent, pas toujours) à partir de Firefox 52.0
Opera : 44+ Epiphany : 3.24+
Disponible via la préférence Activer les fonctionnalités expérimentales de la plateforme web
sous chrome://flags depuis Opera 28.0

Le modèle se fonde sur un conteneur (grid-container) constituant le contexte général d’affichage et renfermant un ou plusieurs enfants
directs ou grid-items. Le conteneur est un élément quelconque dont la propriété display est fixée à grid, inline-grid ou
subgrid (uniquement si l’élément est lui-même un grid-item). Sans nécessité d’aucune autre déclaration, ses enfants sont alors
automatiquement des éléments de type grid-item.

Dans l’éditeur de code, examinez la règle située juste au-dessus du commentaire

© Dunod – Toute reproduction non autorisée est un délit

2 /* Saisissez les nouvelles règles ici */ :

.ct1 {display: grid ;
grid-template-columns: 40px 100px 50px ;
grid-template-rows: 25% 100px auto ;}
Elle crée le premier quadrillage de trois colonnes et trois lignes qui permet de vérifier que
le navigateur prend en charge ce module.
La définition du quadrillage du grid-container s’effectue à l’aide des propriétés grid-
template-columns et grid-template-rows, qui définissent respectivement
les colonnes et rangées de la grille à l’aide d’une liste de valeurs séparées par un espace. Les
valeurs représentent la dimension de la ligne ou colonne, nommée piste (track), et l’espace
entre celles-ci, autrement dit les lignes du quadrillage.

@
95
 TP 35 • Modèle de quadrillage (grid)
grid-template-rows/columns: taille [nom] [taille [nom] ...] | subgrid ;
taille est une longueur, un pourcentage ou une fraction de l’espace libre dans la grille (à l’aide de l’unité fr), nom le nom attribué
à la zone définie (obligatoirement placé entre crochets). Le paramètre subgrid est employé si le grid-container est lui-même un
grid-item, autrement dit s’il s’agit de quadrillages imbriqués. Il permet d’indiquer que les dimensions du quadrillage enfant doivent être
héritées de l’élément parent.

Si une définition contient des parties qui se répètent, vous pouvez utiliser la notation repeat() pour alléger le code.
3 Saisissez :

.ct2{display: grid ;
grid-template-columns: repeat(3, 30px) 5% ;}
Ce qui est strictement identique à :

.c2{grid-template-columns: 30px 30px 30px 5% ;}

prise en main
AVANCÉES CSS

L’unité fr permet de spécifier une dimension comme fraction de l’espace libre du conteneur. Par exemple, ce code donne à
4 chaque élément la dimension d’un tiers du conteneur :

.ct3 {display: grid ;

grid-template-columns: 1fr 1fr 1fr ;}

Il est possible d’attribuer des noms aux lignes/colonnes, mais vous pouvez également définir des régions à l’aide de la pro-
5 priété grid-template-areas, qui définit un quadrillage de grille en référençant les noms des zones de grille (grid
areas). Un point (.) signifie que la cellule est vide. La syntaxe elle-même fournit une visualisation de la structure de la grille.
Saisissez :

.ct4{display: grid ;
grid-template-columns: 150px 150px 150px ;
grid-template-rows: auto ;
grid-template-areas: "entete entete entete"
"princ . droite"
"pied pied pied" ;}

@
96
 TP 35 • Modèle de quadrillage (grid)

Les rangées de la déclaration doivent posséder le même nombre de cellules. Nous affecterons par la suite des éléments à ces régions.

Vous pouvez spécifier un écartement entre lignes et/ou colonnes à l’aide des propriétés grid-column-gap (entre co-

AVANCÉES CSS
6 lonnes), grid-row-gap (entre lignes) ou de la propriété raccourcie grid-gap. Saisissez une règle complétée pour
l’élément de classe ct1 :

.ct1 {display: grid ;

grid-template-columns: 40px 100px 50px ;
grid-template-rows: 25% 100px auto ;
grid-gap: 10px 15px ;}
Si vous ne spécifiez qu’une valeur, celle-ci s’appliquera aux deux propriétés.

Les éléments du quadrillage sont en principe placés explicitement sur le quadrillage.

7 Si toutefois il apparaît des grid-items non placés explicitement sur la grille, c’est l’algo-
rithme de placement automatique qui intervient. Son fonctionnement est géré par
la propriété grid-auto-flow, qui accepte les valeurs row (valeur par défaut : remplir
chaque rangée tout à tour, en ajoutant de nouvelles rangées si nécessaire), column (rem-
plir chaque colonne tout à tour, en ajoutant de nouvelles colonnes si nécessaire) et dense
(essayer de remplir les trous le plus tôt possible dans la grille en cas de possible d’apparition
ultérieure de grid-items plus petits). La valeur dense est susceptible de faire apparaître les
grid-items dans le désordre. Complétez à nouveau la règle de l’élément de classe ct1 :

.ct1{…
grid-auto-flow: column ;}
© Dunod – Toute reproduction non autorisée est un délit

La propriété justify-items aligne le contenu à l’intérieur de

8 tous les grid-items horizontalement. Les valeurs possibles sont
start (à partir de la gauche de la zone), end (à partir de la droite
de la zone), center (au centre de la zone) et stretch (la valeur par
défaut qui occupe toute la largeur de la zone). Complément de la précédente,
la propriété align-items aligne le contenu situé à l’intérieur de tous les
grid-items le long de l’axe des rangées. Elle accepte les mêmes valeurs,
gauche et droite étant remplacés par haut et bas dans les explications. Modi-
fiez les règles des éléments de classe ct2 et ct3 :

.ct2{…
justify-items: start ;}
.ct3{…
align-items: center ;}

@
97
 TP 35 • Modèle de quadrillage (grid)
Lorsque la dimension du conteneur excède celle du quadrillage (ce qui est possible
9 si tous les grid-items sont définis avec des tailles absolues), vous pouvez ajuster
l’alignement de la grille à l’intérieur du conteneur horizontalement à l’aide de la
propriété justify-content et verticalement à l’aide de la propriété align-
content. Elles acceptent les valeurs start (à partir de la gauche/haut du conteneur),
end (à partir de la droite/bas), center (au centre), stretch (valeur par défaut, ajuste
les grid-items pour qu’ils occupent toute la place disponible en largeur/hauteur), space-
around (un demi-espace de chaque côté de chaque élément), space-between (un
espace entre éléments, aucun aux e­ xtrémités) et space-evenly (des espaces égaux
entre é­ léments et aux extrémités). Saisissez :

.ct5 {justify-content: space-evenly ;}

Si une piste (ligne ou colonne) est générée ­automatiquement (suite au positionnement d’éléments à l’extérieur du quadril-
10 lage), vous pouvez en définir la dimension à l’aide des propriétés grid-auto-colums et grid-auto-rows. Vous
spécifiez une valeur (longueur, pourcentage ou fraction d’espace libre à l’aide de l’unité fr). Par exemple, ajoutez ce qui suit
prise en main
AVANCÉES CSS

à la règle pour l’élément ct2 :

.ct2 {…
grid-auto-rows: 60px ;}

La propriété raccourcie grid permet de définir en une seule déclaration les propriétés grid-template-rows,
11 grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns et
grid-auto-flow. En outre, même si elle ne peut pas les définir explicitement, elle fixe grid-column-gap et
grid-row-gap à leurs valeurs initiales. Les valeurs possibles sont les suivantes :
• none : règle toutes les sous-propriétés à leurs valeurs initiales ;
• subgrid : règle grid-template-rows et grid-template-columns sur subgrid et toutes les autres sous-
propriétés à leurs valeurs initiales ;
• grid-template-rows/grid-template-columns : fixe ces deux propriétés aux valeurs spécifiées et toutes les
autres sous-­propriétés à leurs valeurs initiales ;
• grid-auto-flow [grid-auto-rows [/grid-auto-columns]] : spécifie
respectivement les valeurs de ces propriétés. Si la valeur de grid-auto-columns est omise, elle prend
la valeur de grid-auto-rows. Si les deux sont omises, les propriétés sont fixées à leurs valeurs initiales.

Saisissez :

.ct6 {display: grid ;

grid: 200px auto / 1fr auto 1fr ;}
Cette déclaration est strictement identique à :

grid-template-rows: 200px auto ;

grid-template-columns: 1fr auto 1fr ;}

@
98
 TP 35 • Modèle de quadrillage (grid)
Il existe également pour grid une syntaxe plus complexe mais très pratique pour régler toutes les propriétés en une seule
12 fois. Vous spécifiez grid-template-areas, grid-template-rows et grid-template-columns et
toutes les autres sous-propriétés sont fixées à leurs valeurs initiales. Par exemple, saisissez :

.ct7{display: grid ;
grid: "entete entete entete" 1fr
"pied pied pied" 40px
/ auto 50px auto ;}
Cette déclaration est strictement équivalente à :

.ct7{display: grid ;
grid-template-areas: "entete entete entete"
"pied pied pied";
grid-template-rows: 1fr 40px ;
grid-template-columns: auto 50px auto ;}
Comme expliqué auparavant, tout élément enfant d’un g ­ rid-container est un grid-item. Les grid-items peuvent être soit positionnés

AVANCÉES CSS
explicitement, soit placés automatiquement dans le quadrillage. Vous pouvez placer explicitement un grid-item dans le quadrillage de
plusieurs façons. La première méthode consiste à employer le nom des lignes du quadrillage pour définir la zone sur laquelle doit se
trouver l’élément.

Les propriétés grid-column-start, grid-column-end, grid-row-start, grid-row-end déter-

13 grid-row-start
minent l’endroit où se trouve un grid-item en référence à des lignes de grille spécifiques. grid-column-start /
est le point où commence l’élément, grid-column-end / grid-row-end celui où il finit.
Ces propriétés acceptent les valeurs suivantes :
• ligne : un numéro faisant référence à une ligne numérotée ou un nom faisant référence à une ligne nommée ;
• span nombre  : l’élément s’étendra sur le nombre spécifié de pistes ;
• span nom  : l’élément s’étendra jusqu’à atteindre la ligne portant le nom spécifié ;
• auto : spécifie un positionnement automatique, une extension automatique ou l’extension par défaut.

Si aucune propriété grid-column-end / grid-row-end n’est déclarée, l’extension est par défaut de 1.
Les propriétés grid-column et grid-row sont des raccourcis pour grid-column-start + grid-column-end
et grid-row-start + grid-row-end. Si aucune valeur de fin n’est déclarée, l’élément s’étendra sur une seule piste.
Les lignes constituant le quadrillage étant numérotées automatiquement, vous spécifiez simplement le point de départ et le point de
fin. Par exemple, saisissez :
.d {grid-column: 1 ;
grid-row: 1 / 3 ;}
.e {grid-column: 2 / 4 ;
grid-row:2 / 4}
L’élément de classe d occupera une colonne (à partir de la ligne verticale 1) et deux lignes (de
la ligne horizontale 1 à la ligne 3). Attention à ne pas confondre les lignes du quadrillage et les
© Dunod – Toute reproduction non autorisée est un délit

lignes de cellules ! L’élément de classe e occupera deux colonnes (de la ligne verticale 2 à la
ligne 4) et deux lignes (de la ligne horizontale 2 à la ligne 4).
Remarquez que cela modifie l’ordre des éléments : c’est vous qui le déterminez totalement, en
parfaite indépendance de leur ordre d’apparition dans le flux du document.

@
99
 TP 35 • Modèle de quadrillage (grid)
Éventuellement, des éléments peuvent se recouvrir.
14 Saisissez :

.f{grid-column: 1 / 3 ;
grid-row: 1 / 3 ;}
.g{grid-column: 1 / 3 ;
grid-row: 2 ;}

Cette propriété peut être également utilisée comme raccourci

encore plus court pour grid-row-start + grid-
column-start + grid-row-end + grid-
prise en main

column-end :
AVANCÉES CSS

.pi{grid-area: 3/1/last-line/4}

Ce qui serait ici un équivalent de :

Servez-vous de z-index pour contrôler leur empile-

15 ment ; ajoutez ce qui suit à la règle pour l’élément de
classe f :
.pi {grid-area: pied ;}

La propriété justify-self aligne le contenu d’un

.f{…
z-index: 10 ;} 17 grid-item individuel horizontalement, la propriété
align-self l’alignant verticalement. Les valeurs
acceptées sont identiques à celles des propriétés de
grid-container justify-content et align-content.
Saisissez :

.s {justify-self: right ;}
.t {align-self: center ;}

Si toutefois vous avez défini des régions, vous pouvez

16 directement affecter un élément à une région nommée
(à l’aide de la propriété grid-template-areas)
grâce à la propriété grid-area (déjà rencontrée). Saisissez :

.dr {grid-area: droite ;} Fermez le fichier TP_CSS_35.html dans l’éditeur et le navi-

.et {grid-area: entete ;} gateur.
.ma {grid-area: princ ;}
.pi {grid-area: pied ;} Le modèle de grille est, plus encore que le modèle de boîte flexi-
ble, une spécification complexe qui reste très peu explorée. C’est
une nouvelle réponse aux attentes légitimes des concepteurs web.
Conjointement avec le modèle de boîte flexible, ils constitueront
probablement les méthodes de positionnement futures en CSS. Il
convient toutefois de rester prudent puisque la prise en charge du
modèle grid par les différents navigateurs reste relativement
hétérogène, au moins au moment de la rédaction de ce livre.

@
100
 TP
36
Variables en cascade

L e module de variables en cascade Niveau 1 est au stade CR depuis décembre 2015 et devrait bientôt passer au stade
PR. Pris en charge par tous les navigateurs récents (sauf Internet Explorer, et à partir de Edge 15), il devrait lui
aussi remplacer une bibliothèque jusque-là très employée.

Prérequis : presque tous les TP

Fichier exemple : TP_CSS_36_début.html
Durée nécessaire : 15 minutes

AVANCÉES CSS
Ouvrez dans votre éditeur de texte le fichier TP_CSS_36_début.html, puis enregistrez-le sous le nom TP_
1 CSS_36.html. Affichez ce fichier dans votre navigateur.

Une propriété personnalisée est une propriété quelconque dont le nom débute obligatoirement par deux tirets, comme dans
2 --maPropriete ou --maCouleur. Un usage fréquent est la définition de couleurs abondamment employées sur un
site, et pour lesquelles on pourrait définir deux propriétés personnalisées. Saisissez :

:root {--couleurFond: rgba(255,220,220,.8) ;

--couleurTexte: rgb(150,10,10) ;}
Cette déclaration reste sans effet sur la page pour le moment. Vous faites ensuite référence à ces propriétés personnalisées à l’aide de
la notation CSS var(). Saisissez :

.cf {background-color: var(--couleurFond) ;

color:var(--couleurTexte) ;}

Chose un peu inhabituelle en CSS, les propriétés personnalisées sont sensibles à la casse :
3
© Dunod – Toute reproduction non autorisée est un délit

p {background-color: var(--couleurfond) ;
color: var(--couleurTexte) ;}

@
101
 TP 36 • Variables en cascade
La couleur du texte des éléments p s’ajuste, mais pas celle du fond : la propriété correcte était --couleurFond. Corrigez et
vérifiez.
À partir du moment où elle est déclarée, une propriété personnalisée peut être employée. Cela signifie qu’une propriété personnalisée
peut dépendre d’une autre propriété personnalisée si et seulement si celle-ci est déclarée avant. Complétez avec le code en gras la
déclaration concernant l’élément racine :

:root {--couleurFond: rgba(255,220,220,.8) ;

--couleurTexte: rgb(150,10,10) ;
--fondDeg: linear-gradient (110deg, cyan, var(--couleurFond)) ;}
Puis ajoutez ce qui suit :

.fd {background-image: var(--fondDeg) ;}

prise en main
AVANCÉES CSS

Pouvoir disposer d’une valeur par défaut est précieux lorsque vous définissez un document type lié à une feuille de styles dans
laquelles des propriétés personnalisées peuvent être ou non personnalisées par les destinataires. Par exemple, imaginons un modèle
dans lequel peuvent être définies plusieurs couleurs personnalisées selon différents éléments. Complétez la déclaration pour :root :

:root {--couleurFond: rgba(255,220,220,.8) ;

--couleur1: ;
--couleur2: ;
…}
Les couleurs ne sont pas définies, c’est normal pour un modèle qui doit être personnalisé. Saisissez ensuite le code suivant :

section {background-color: var(--couleurFond) ;}

div {background-color: var(--couleur1) ;}
p {background-color: var(--couleur2) ;}

Remarquez que les couleurs ne sont pas définies : c’est un modèle. Il est plus que probable que l’utilisateur du document définisse
correctement la couleur de fond (comme nous l’avons fait), mais pas forcément les autres. Les variables personnalisées
--couleur1 et --couleur2 n’étant pas définies, elles sont ignorées.

@
102
 TP 36 • Variables en cascade
La syntaxe exacte d’emploi de var() est la suivante :
4
var(--valeurPersonnalisée[, valeurParDéfaut])
Employer ici une couleur par défaut permet d’obtenir un résultat plus homogène et agréable dans tous les cas. Modifiez comme suit
les deux dernières déclarations :

div {background-color: var(--couleur1, --couleurFond) ;}

p {background-color: var(--couleur2, --couleurFond) ;}

AVANCÉES CSS
Bien sûr, les choses seraient encore mieux si les couleurs étaient définies. Faites-le dans la déclaration pour l’élément :root :

:root {--couleurFond: rgba(255,220,220,.8) ;

--couleur1: rgba(100,5,5,.2) ;
--couleur2: rgba(10,80,20,.1) ;
…}
Les exemples montrés ici s’appliquent à des couleurs, mais vous pouvez employer des propriétés personnalisées pour n’importe quoi,
tant que la valeur spécifiée est valide pour cette propriété. Une des applications pourrait être des valeurs différentes en réponse à
des requêtes médias. Remarquez qu’il est impossible d’employer une propriété personnalisée pour stocker un nombre et lui affecter
ensuite une unité particulière, comme dans :

--maDimension: 10 ;
.a {margin-top: var(--maDimension)% ;}

Fermez le fichier TP_CSS_36.html dans l’éditeur et le navigateur.

© Dunod – Toute reproduction non autorisée est un délit

@
103
 Rappel sur les
documents W3C
T
out document du World Wide Web Consortium (W3C) passe par plusieurs états d’achèvement successifs correpondant à une
stabilité reconnue avant d’atteindre le statut final de recommandation :

• Brouillon de travail (Working Draft, WD) : c’est la phase initiale de conception d’une spécification W3C. Pour publier le premier
WD, le groupe de travail doit avoir obtenu un consensus de travail sur le sujet tel qu’il est exposé dans le projet du rédacteur
(Editor’s Draft).
Un projet du rédacteur (Editor’s Draft) est une copie actualisée du document de travail des rédacteurs. Il peut refléter ou non le
consensus du Groupe de travail et peut éventuellement ne pas être parfaitement cohérent. Le processus de publication du W3C
étant exigeant en temps et en moyens, le projet du rédacteur est souvent la référence la plus à jour d’une spécification.
La transition vers l’étape suivante est parfois nommée phase du « dernier appel à commentaire » (Last Call Working Draft, LCWD).
Tous les problèmes recensés ont été résolus et le projet est dans l’attente des résultats de test et de mise en œuvre.

Annexes
• Candidat à la recommandation (Candidate Recommendation, CR) : c’est la phase de test intensif d’une spécification W3C (et
non de ses mises en œuvre !). Cette phase fait souvent surgir de nouveaux problèmes amenant des modifications au fil du temps
(bien que souvent moindres que lors de l’étape Brouillon de travail). Pour sortir de la phase CR, il faut disposer d’au moins deux
mises en œuvre fonctionnelles distinctes de chaque fonctionnalité.
• Recommandation proposée (Proposed Recommendation, PR). Le W3C Advisory Committee doit approuver, après contrôle, le
passage à l’étape finale.
• Recommandation (Recommendation, REC). C’est l’étape ultime d’une spécification W3C, correspondant à une phase de
maintenance. Le W3C publie si nécessaire un ou plusieurs errata et éventuellement une version mise à jour incorporant les errata.
© Dunod – Toute reproduction non autorisée est un délit

@
105
 État d’avancement actuel CSS

M
i-2017, CSS (Cascading Style Sheets) est défini par les documents suivants. Ceux figurant en gras sont explicitement abor-
dés dans ce livre.

Nom État Description

Niveau 2, dernière révision REC Définit le noyau de CSS, dont certaines parties pourront être
(y compris les errata) outrepassées par des spécifications ultérieures. Aujourd’hui CSS 2.1
Syntaxe Niveau 3 REC Remplace CSS2§4.1, CSS2§4.1, CSS2§4.2, CSS2§4.4 et CSS2§G,
définissant la façon dont est analysé CSS
prise en main

Attributs de style REC Définit l’incorporation de déclarations CSS dans des attributs de balisage
Espaces de noms Niveau 1 REC Définit une règle @namespace pour autoriser des sélecteurs préfixés
selon un espace de noms
Annexes

Sélecteurs Niveau 3 REC Remplace CSS2§5 et CSS2§6.4.3 en définissant une plage étendue de
sélecteurs
Couleur Niveau 3 REC Remplace CSS2§4.3.6, CSS2§14.1 et CSS2§18.2 en définissant une
plage étendue de couleurs et introduisant la propriété opacity
Requêtes médias Niveau 3 REC Remplace CSS2§7.3 et développe la syntaxe de styles spécifiques aux
médias
Cascade et héritage CR->PR Remplace CSS2§1.4.3 et CSS2§6
Niveau 3
Valeurs et unités Niveau 3 CR->PR Remplace CSS2§1.4.2.1, CSS2§4.3 et CSS2§A.2.1-3 en définissant la syntaxe
de définition des propriétés CSS et développant son ensemble d’unités
Arrière-plans et bordures CR->PR Remplace CSS2§8.5 et CSS2§14.2 en offrant un contrôle accru sur
Niveau 3 les arrière-plans et les bordures, y compris les images d’arrière-plan
superposées, les images de bordures et les ombres portées de boîtes
Interface utilisateur CR->PR Remplace CSS2§18.1 et CSS2§18.4 en définissant le curseur, les encadrés
Niveau 3 et plusieurs nouvelles caractéristiques améliorant l’interface utilisateur
Règles conditionnelles CR Remplace CSS2§7.2 en mettant à jour la définition des règles @media
Niveau 3 pour autoriser l’imbrication tout en introduisant le concept de règles
@supports pour des requêtes de prise en charge de dispositif
Valeurs images et contenu CR Constitue une nouvelle base pour l’adaptation de taille des éléments
remplacé Niveau 3 remplacés (comme des images), ajoute un contrôle complémentaire sur
leur taille et leur orientation et introduit le concept de dégradés en tant
qu’images CSS
Polices Niveau 3 CR Remplace CSS2§15 en proposant un contrôle accru sur le choix de
polices et la sélection de leurs caractéristiques
Multi-colonnage Niveau 1 CR Permet le multi-colonnage en CSS
Composition et mélange CR Définit la composition et le mélange des contenus superposés et propose
Niveau 1 des dispositifs pour contrôler leurs modes
Modes d’écriture Niveau 3 CR Définit la prise en charge de différents modes d’écriture internationaux,
comme de gauche à droite (comme les langues occidentales), droite à
gauche (comme l’hébreu ou l’arabe), bidirectionnel (comme un mélange
de latin et d’arabe) et vertical (comme l’écriture asiatique)

@
106
 Annexes • État d’avancement actuel CSS
Les modules suivants sont largement déployés avec une excellente interopérabilité, sans toutefois être totalement testés et débogués.

Nom État Description

Boîte flexible Niveau 1 CR->PR Introduction d’un modèle de boîte linéaire flexible (flexbox) pour CSS
Variables en cascade CR->PR Des variables en cascades constituent un nouveau type de valeur
Niveau 1 primitive accepté par toutes les propriétés CSS et sont accompagnées de
propriétés personnalisées pour les définir.
Transitions Niveau 1 et WD->CR Définition de mécanismes de transition pour des valeurs calculées de
Animations Niveau 1 propriétés CSS au fil du temps
Module de texte Niveau 3 WD->CR Propriétés de manipulation de texte, définissant notamment leur mode
de traitement. Traite de la césure de lignes, de la justification et de
l’alignement, ainsi que des transformations de texte.
Transformations Niveau 1 WD Transformations graphiques CSS

Les modules suivants sont achevés et relativement stables mais doivent encore être largement testés. Ils sont encore peu déployés et
seul l’un d’entre eux (mais quel module !) est abordé dans cet ouvrage.

Nom État Description

Annexes
Styles de compteur Niveau 3 CR->PR Développe les valeurs possibles pour counter-style et propose une
syntaxe @counter-style pour des styles de compteur personnalisés
Will Change Niveau 1 CR->PR Propriété d’indice de performance nommée will-change
Présentation en grille CR->PR Définit un modèle de présentation en quadrillage bidimensionnel,
Niveau 1 optimisé pour la construction d’interfaces utilisateur. Dans ce modèle,
les enfants d’un conteneur quadrillage peuvent être placés à des
emplacements arbitraires d’un quadrillage fixe ou flexible.
Fragmentation Niveau 3 CR->PR Décrit le modèle de fragmentation qui découpe un flux en pages,
colonnes ou régions
Masques Niveau 1 CR Remplace CSS2§11.1.2 en ajoutant des méthodes plus puissantes pour
découper et masquer du contenu
Formes Niveau 1 CR Permet d’appliquer float à des formes non rectangulaires
Décoration de texte Niveau 3 CR Remplace CSS2§16.3 en proposant un contrôle accru sur les lignes
de décoration de texte et en permettant de spécifier des marques
d’emphase et texte et des ombres de texte
Parole Niveau 1 CR Remplace CSS2§A
Alignement de boîte Niveau 3 WD Contient les dispositifs CSS relatifs aux alignements de boîtes au sein
de leur conteneur dans les différents modèles de boîte CSS : blocs,
tableaux, boîtes flexibles et quadrillage
© Dunod – Toute reproduction non autorisée est un délit

Effets de filtres Niveau 1 WD Les effets de filtre sont un moyen de traiter le rendu d’un élément avant
son affichage dans le document.
La liste de tous les modules CSS, stables ou en cours d’élaboration, avec leur état, peut être trouvée sur la page CSS Current Work
(https://www.w3.org/Style/CSS/current-work).

@
107
 Tableaux résumés
Nous suivons dans ces tableaux les conventions énoncées au début de ce livre : tout paramètre figurant en italique doit être remplacé
par une valeur, parfois correspondant à une autre propriété. Toutefois, les diverses valeurs possibles sont séparées dans les tableaux
par des virgules et non des symboles pipeline, tandis que la présence d’une valeur soulignée signale qu’il s’agit de la valeur par défaut
(celle active si vous ne modifiez ou ne spécifiez pas la propriété).

A.1 Sélecteurs CSS

Sélecteur Type de sélecteur Signification CCS

prise en main

E Sélecteur de type Un élément de type E 1

E:link/visited Pseudo-classes dynamiques Un élément E d’une ancre hypertexte dont 1
la cible n’a pas encore été visitée (:link)
Annexes

ou l’a été (:visited)

E::first-line Pseudo-élément La première ligne mise en forme d’un 1
élément E
E::first-letter Pseudo-élément La première lettre mise en forme d’un 1
élément E
E.warning ou E Sélecteur de classe Un élément E dont la classe est warning. 1
[class=warning] Le langage du document spécifie le mode
de détermination de la classe.
E#monid Sélecteur d’ID Un élément E dont l’ID est monid 1
E F Sélecteur de descendant Un élément F descendant d’un élément E 1
E:active/hover/focus Pseudo-classes dynamiques Un élément E pendant certaines actions de 1 et 2
l’utilisateur
* Sélecteur universel N’importe quel élément 2
E[attribut] Sélecteur d’attribut Un élément E avec un attribut attribut 2
E[attribut="valeur"] Sélecteur d’attribut Un élément E avec un attribut attribut 2
dont la valeur est valeur
E[attribut~="valeur"] Sélecteur d’attribut Un élément E avec un attribut attribut 2
dont la valeur est une liste de valeurs
séparées par des virgules dont l’une est
égale à valeur
E:first-child Pseudo-classe structurelle Un élément E, premier enfant de son 2
parent
E:lang(fr) Pseudo-classe Un élément E en langue fr. Le langage 2
du document spécifie le mode de
détermination de la langue.
E::before Pseudo-élément Contenu généré avant un élément E 2
E::after Pseudo-élément Contenu généré après un élément E 2

@
108
 Annexes • Tableaux résumés
Sélecteur Type de sélecteur Signification CCS
E > F Sélecteur d’enfant Un élément F enfant d’un élément E 2
E + F Sélecteur de parent adjacent Un élément F immédiatement précédé par 2
un élément E
E[attribut^="valeur"] Sélecteur d’attribut Un élément E avec un attribut attribut 3
dont la valeur commence exactement par la
chaîne valeur
E[attribut$="valeur"] Sélecteur d’attribut Un élément E dont la valeur de l’attribut 3
attribut se termine exactement par la
chaîne valeur
E[attribut*="valeur"] Sélecteur d’attribut Un élément E dont la valeur de l’attribut 3
attribut contient la sous-chaîne
valeur
E[hreflang|="en"] Sélecteur d’attribut Un élément E dont l’attribut href lang 3
contient une liste séparée par des tirets qui
commence (à gauche) par en
E:root Pseudo-classe structurelle Un élément E racine du document 3

Annexes
E:nth-child(n) Pseudo-classe structurelle Un élément E, ne enfant de son parent 3
E:nth-last-child(n) Pseudo-classe structurelle Un élément E, ne enfant de son parent en 3
partant du dernier
E:nth-of-type(n) Pseudo-classe structurelle Un élément E, ne descendant de ce type 3
E:nth-last-of-type(n) Pseudo-classe structurelle Un élément E, n descendant de ce type à
e 3
partir du dernier
E:last-child Pseudo-classe structurelle Un élément E, ne dernier enfant de son 3
parent
E:first-of-type Pseudo-classe structurelle Un élément E, premier descendant de ce 3
type
E:last-of-type Pseudo-classe structurelle Un élément E, dernier descendant de ce 3
type
E:only-child Pseudo-classe structurelle Un élément E, seul enfant de son parent 3
E:only-of-type Pseudo-classe structurelle Un élément E, seul descendant de ce type 3
E:empty Pseudo-classe structurelle Un élément E dépourvu d’enfant (y compris 3
tout nœud texte)
E:target Pseudo-classe Un élément E cible de l’URI 3
© Dunod – Toute reproduction non autorisée est un délit

E:enabled/disabled Pseudo-classes dynamiques Un élément d’interface utilisateur E activé 3

ou désactivé
E:checked Pseudo-classe dynamique Un élément d’interface utilisateur E coché 3
(bouton d’option ou case à cocher)
E:not(s) Pseudo-classe de négation Un élément E qui ne correspond pas au 3
sélecteur simple s
E ~ F Sélecteur d’enfant Un élément F précédé par un élément E 3
(pas forcément immédiatement)

@
109
 Annexes • Tableaux résumés
A.2 Valeurs de la propriété content
(uniquement avec les pseudo-éléments ::before et ::after)

Valeur Signification
attr(X) Renvoie sous forme de chaîne la valeur de l’attribut X pour le sujet du sélecteur, ou une chaîne
vide si le sujet du sélecteur ne possède pas cet attribut. Cette chaîne n’est pas analysée par le
processeur CSS. La sensibilité à la casse des noms d’attribut dépend du langage du document.
chaîne Contenu texte
compteur Un compteur peut être spécifié avec les fonctions counter() ou counters(). La première
accepte les formes counter(nom) ou counter(nom, style). Le texte généré est la
valeur du compteur le plus interne de nom spécifié à portée du pseudo-élément, mis en forme
dans le style indiqué (decimal par défaut). L’autre fonction possède également deux formes
counters(nom, chaîne) et counters(nom, chaîne, style). Le texte généré
est la valeur de tous les compteurs de nom spécifié à portée du pseudo-élément, du plus
prise en main

externe au plus interne en les séparant par la chaîne spécifiée, dans le style indiqué (decimal
par défaut). Le nom ne doit pas être none, inherit ou initial, faute de quoi la déclaration serait
ignorée.
no-open-quote et
Annexes

Ne génère aucun contenu, mais incrémente ou décrémente le niveau d’imbrication des

no-close-quote guillemets ou apostrophes
none Le pseudo-élément n’est pas généré.
normal Équivaut à none pour les pseudo-éléments ::before et ::after
open-quote et Ces valeurs sont remplacées par la chaîne adéquate spécifiée par la propriété quotes.
close-quote
uri La valeur est une URI qui spécifie une ressource externe (comme une image). Si le navigateur
ne peut afficher la ressource, il doit l’ignorer ou signaler l’impossibilité d’affichage.

A.3 Propriétés d’élément

Propriété Valeur Exemple Effet

border border-width border: 4pt double Ajoute une marge double de quatre
border-style #000000 points autour du contenu
border-color
border-image source décalage border-image: Crée une bordure image sans décalage
largeur débordement url(button.png) 0 de 14 pixels étirée
répétition 14 0 14 stretch;
border-radius hautgauche hautdroit border-radius : Crée une bordure arrondie dont chaque
basdroit basgauche 10px; coin possède un rayon de 10 pixels.
border-style none, dotted, border-style: Crée une bordure épaisse autour de
dashed, solid, double l’élément
double, groove,
ridge, inset,
outset
border-width thin, medium, border-width: thin Crée une bordure mince en haut et en
thick, longueur thick thin thick bas, et une bordure épaisse sur les côtés

@
110
 Annexes • Tableaux résumés
Propriété Valeur Exemple Effet
box-shadow ombre-h ombre-v box-shadow:10px Crée une ombre portée de 20 pixels
[ blur] [ spread] 10px 50px 20px blue bleue vers l’intérieur, décalée de
[couleur] [inset] inset 10 pixels et avec une zone de flou de
50 pixels
height longueur ou auto height: 20pt Impose à l’élément une hauteur de
20 points
margin longueur, margin: 10pt Crée une marge de 10 points autour de
pourcentage, auto l’élément
ou inherit
margin-bottom longueur, margin-bottom: 10pt Crée une marge de 10 points en bas de
pourcentage, auto l’élément
ou inherit
margin-left longueur, margin-left: 10pt Crée une marge de 10 points à gauche
pourcentage, auto de l’élément
ou inherit
margin-right longueur, margin-right: 10pt Crée une marge de 10 points à droite

Annexes
pourcentage, auto de l’élément
ou inherit
margin-top longueur, margin-top: 10pt Crée une marge de 10 points en haut
pourcentage, auto de l’élément
ou inherit
padding longueur, pourcentage padding: 10px Ajoute un espacement de 10 pixels entre
ou auto le contenu et la bordure
width longueur, width: 100pt Impose à l’élément une largeur de
pourcentage, auto 100 points
ou inherit

A.4 Valeurs de la propriété display

Valeur Type de boîte Effet

block Boîte de niveau bloc Génère une boîte bloc
inline-block Boîte de niveau ligne Génère un conteneur bloc de niveau ligne. L’intérieur est mis en
forme comme boîte bloc
inline Boîte de niveau ligne Génère une ou plusieurs boîtes ligne
© Dunod – Toute reproduction non autorisée est un délit

inline-table Boîte de niveau ligne Génère un tableau ligne

flex Boîte flexible Crée un flex-container qui contiendra des flex-items
list-item Boîtes de niveau bloc Génère une boîte bloc principale et une boîte marqueur
none Néant Ni l’élément ni ses descendants n’apparaissent dans la structure de
mise en forme, même si la propriété display des descendants
possède une valeur autre que none.
table Boîte de niveau bloc L’élément est un tableau de niveau bloc.
table-caption Boîte de niveau bloc Libellé du tableau
table-cell Boîte de niveau bloc Élément représentant une cellule de tableau

@
111
 Annexes • Tableaux résumés
Valeur Type de boîte Effet
table-column Boîte de niveau bloc Élément décrivant une colonne de cellules
table-column-group Boîte de niveau bloc Élément regroupant une ou plusieurs colonnes
table-footer-group Boîte de niveau bloc Analogue à table-row-group, pour une ligne de pied
table-header-group Boîte de niveau bloc Analogue à table-row-group, pour une ligne d’en-tête
table-row Boîte de niveau bloc L’élément est une rangée de cellules.
table-row-group Boîte de niveau bloc L’élément regroupe une ou plusieurs lignes.

A.5 Propriétés de positionnement

Propriété Valeur Exemple Effet

prise en main

clear none, left, clear: left La boîte est décalée de l’espace nécessaire
right, both ou pour placer le bord de la bordure supérieure
inherit en dessous du bord inférieur de toute boîte
flottante due à un élément antérieur dans le
Annexes

document source.
clip rect (haut, droite, clip: rect (5 10 5 10) Rogne 5 pixels du haut et du bas, et 10 pixels
bas, gauche) sur les côtés
float left, right, float: left Place l’élément dans un rectangle flottant sur la
none ou gauche
inherit
left longueur ou left: 15pt Place l’élément à 15 points de la gauche du
pourcentage document ou de l’élément parent
overflow visible, overflow: scroll Attribue à l’élément une barre de défilement,
hidden, auto, qu’il en ait besoin ou non
scroll
position absolute, position: absolute Place l’élément à l’écran sans tenir compte des
relative, autres éléments de la page
static, fixed
top longueur ou top: 10pt Place l’élément à 10 points du haut du
pourcentage document ou de l’élément parent
z-index entier z-index: 1 Place d’abord le premier élément et empile
dessus les suivants

A.6 Propriétés de police

Propriété Valeur(s) But

font font-style font-variant font-weight font-size Propriétés de police
line-height font-family
font-family tout nom de police, serif, sans-serif, cursive, fantasy, Police(s) ou famille(s) de
monospace polices à employer
font-size taille en points, xx-large, x-large, large, medium, small, Taille de la police
x-small, xx-small, larger, smaller, pourcentage

@
112
 Annexes • Tableaux résumés
Propriété Valeur(s) But
font-style normal, italic, oblique Style de la police
font-weight incréments de 100, normal, bold, bolder, lighter Graisse de la police
line-height nombre, longueur, pourcentage Hauteur de ligne

A.7 Propriétés de fond

Propriété Valeur(s) But

background background-color background-image Propriété raccourcie pour toutes
background-repeat background- les propriétés de fond
attachment background-position
background- scroll, fixed Définit si l’image défile ou non
attachment avec le contenu
background-color couleur hexadécimale ou nom Couleur d’arrière-plan
background-image URI Image d’arrière-plan

Annexes
background-position pourcentage, longueur, top, center, bottom, Position de l’image d’arrière-plan
left, center, right
background-repeat repeat, repeat-x, repeat-y, no-repeat Définit une répétition de l’image
de fond
background-size largeur hauteur Définit la taille de l’image de fond
background-origin content-box |padding-box |border-box Définit la position de départ d’une
image
background-clip content-box |padding-box |border-box Définit la zone couverte par l’image

A.8 Propriétés de texte

Propriété Valeur(s) But

direction tr, rtl Direction du texte
letter-spacing normal, longueur Interlettrage
text-align left, right, center, justify Alignement horizontal du texte
text-decoration none, underline, overline, line-through Enrichissement du texte
text-indent
© Dunod – Toute reproduction non autorisée est un délit

longueur en points, longueur en pourcentage Indentation du texte

text-transform capitalize, uppercase, lowercase, none Transformation de la casse
text-overflow clip, ellipsis, chaîne Définit le comportement en cas de
dépassement de la capacité du conteneur
text-shadow horizontal vertical flou couleur Ombre portée de texte
unicode-bibi normal, embed, bidi-override Création d’un nouveau niveau de direction
vertical-align baseline, sub, super, top, text-top, Alignement vertical du texte
middle, bottom, text-bottom, pourcentage
word-spacing normal, longueur Espacement entre mots

@
113
 Annexes • Tableaux résumés
Propriété Valeur(s) But
word-wrap normal, break-word Permet de forcer la césure de mots longs.
color nom de couleur ou valeur Couleur du texte

A.9 Propriétés de liste : list-style-type

Catégorie Valeur Signification

Glyphes disc, circle et square Disque (valeur par défaut), cercle et carré
Numéros decimal Nombres décimaux débutant par 1
decimal-leading-zero Nombres décimaux avec zéro initial
lower-roman Chiffres romains minuscules
upper-roman Chiffres romains majuscules
prise en main

georgian Numérotation traditionnelle géorgienne

armenian Numérotation traditionnelle majuscule arménienne
+ autres…
Alphabet lower-latin ou lower-alpha Lettres romaines minuscules (a, b, ..., z)
Annexes

upper-latin ou upper-alpha lettres romaines majuscules (A, B, ..., Z)

lower-greek Lettres grecques classiques minuscules (a, b, g...)

A.10 Propriétés CSS 3 avancées

Propriété Valeur(s) But

animation nom durée [type] [délai] Applique l’animation nom pendant durée selon le type après
[ itération] [direction] délai (par défaut 0), répétée itération fois (par défaut, 1) dans
une direction (normalement ou dans l’ordre contraire sur les
cycles pairs)
perspective nombre, none Définit l’éloignement en pixel par rapport à la vue
perspective- x y Origine de la perspective (par défaut au milieu)
origin
transition propriété durée méthode délai Applique une transisition à propriété pendant une durée (par
défaut 0) selon une méthode (par défaut ease) après délai
secondes (0 par défaut)
transform rotate(x,y), Modifications bidimensionnelles
skew(x,y), scale(x,y),
matrix(x,y),
translate (x,y)
transform-origine transform- Fixe le point d’origine de la transformation (par défaut, au
origine(x,y) centre de l’élément)
transform3d rotate3d(x,y,z), Modifications tridimensionnelles
scale3d(x,y,z),
matrix3d(x,y,z),
translate3d(x,y,z)
transform-style flat, preserve-3d Indique si les éléments enfants doivent ou non conserver le
contexte 3D du parent

@
114
 Annexes • Tableaux résumés
A.11 Propriétés flexbox

Propriété Valeur(s) But

display flex ou inline-flex Définit un élément comme flex-container
flex-direction row, row-reverse, column, Fixe le sens principal de distribution des flex-items dans le
column-reverse flex-container
flex-wrap nowrap, wrap, wrap-reverse Autorise ou non le passage à la ligne dans le flex-container
flex-flow valeurFlexDirection valeurFlexWrap Propriété raccourcie pour flex-direction et flex-
wrap pour le flex-container
justify- flex-start, flex-end, center, Alignement selon l’axe principal déterminé par flex-
content space-between, space-around direction dans le flex-container
align-items stretch, flex-start, Alignement selon l’axe secondaire dans le flex-container
flex-end, center, baseline
align-self stretch, flex-start, Définit l’alignement d’un flex-item individuel
flex-end, center, baseline
order nombre entier positif ou négatif Définit l’ordre des flex-items, par order croissant

Annexes
flex flex-growth flex-shrink Propriété raccourcie pour les trois propriétés de flexibilité.
flex-basis, initial, auto, Préférer son emploi à celui de ses sous-propriétés (flex-item)
none, nombre positif
flex-growth nombre entier positif ou nul Facteur de grossissement si espace disponible (flex-item)
flex-shrink nombre entier positif ou nul Facteur de rétrécissement si espace manquant (flex-item)
flex-basis auto, content, largeur Taille de base de l’élément (flex-item)

A.12 Propriétés grid

Propriété Valeur(s) But

display grid, inline-flex ou subgrid Définit un élément comme grid-container
grid-template-columns dimensions, auto Définit le nombre et la largeur des colonnes
du quadrillage
grid-template-rows dimensions, auto Définit le nombre et la hauteur des lignes du
quadrillage
grid-template-areas "nomcol1lign1, noncol2lign1…, Définit des noms de régions. Les rangées
nomcolnlignen" doivent posséder le même nombre de cellules.
© Dunod – Toute reproduction non autorisée est un délit

grid-column-gap dimension Espacement entre colonnes

grid-row-gap dimension Espacement entre lignes
grid-gap dimension [dimension] Propriété raccourcie pour les écartements
grid-auto-flow row, column, dense Mode de fonctionnement du positionnement
automatique
justify-items start, end, center, stretch Alignement horizontal de tous les grid-items
align-items start, end, center, stretch Alignement vertical de tous les grid-items
justify-content start, end, center, stretch, Alignement horizontal du quadrillage dans le
space-around, space-between, conteneur
space-evenly

@
115
 Annexes • Tableaux résumés
Propriété Valeur(s) But
align-content start, end, center, stretch, Alignement vertical du quadrillage dans le
space-around, space-between, conteneur
space-evenly
grid-auto-columns, dimension Taille par défaut d’une colonne ou ligne
grid-auto-rows automatiquement créée
grid column-start, ligne, span nombre, span nom, Fixent les points de départ et de fin d’un
grid-column-end, auto élément
grid-row-start,
grid-row-end
grid-area nom Affecte une région à un élément
grid-column grid-column-start / Raccourci
grid-column-end
grid-row grid-row-start / Raccourci
prise en main

grid-row-end
justify-self start, end, center, stretch Alignement horizontal d’un grid-item
align-self start, end, center, stretch Alignement vertical d’un grid-item
Annexes

A.13 Propriétés typeCurseur de cursor

Famille/ Valeur Description

Curseurs d’usage général
auto Le curseur le plus adapté : généralement text sur du texte et default autrement
default Curseur par défaut du système d’exploitation, souvent une flèche
none Aucun curseur pour cet élément
Curseurs de lien et d’état
context-menu Un menu contextuel est disponible pour cet élément. Souvent une flèche avec un petit menu
help De l’aide est disponible. Souvent rendu par un point d’interrogation ou une bulle
pointer Pointeur indiquant un lien
progress Indicateur de progression. Souvent un ballon qui tourne, une flèche ave un cadran d’horloge ou
un sablier
wait Indique que le programme est occupé et que l’utilisateur doit attendre. Souvent un sablier
Curseurs de sélection
cell Indique qu’une cellule ou un groupe de cellules peut être sélectionné. Souvent un signe plus épais
avec un point au milieu
crosshair Un + fin
text Indique que du texte peut être sélectionné. Souvent un I majuscule
vertical-text Indique que du texte vertical peut être sélectionné. Souvent un I majuscule horizontal
Curseurs de glisser-déposer
alias Indique qu’un alias de raccourci va être créé. Souvent une flèche avec une petite flèche arrondie
à côté
copy Indique une copie en cours. Souvent une flèche accompagnée d’un petit +

@
116
 Annexes • Tableaux résumés
Famille/ Valeur Description
Curseurs de glisser-déposer
move Indique un déplacement en cours
no-drop Indique que l’élément déplacé ne peut être déposé à cet emplacement. Souvent une main avec un
cercle barré
not-allowed L’action demandée ne sera pas effectuée. Souvent un cercle barré
grab Quelque chose peut être glissé-déposé. Souvent le dos d’une main ouverte
grabbing Quelque chose est en cours de déplacement. Souvent un dos de main fermée
Curseurs de taille et de défilement
e-resize, Indique qu’un côté va être déplacé. Par exemple, le curseur se-resize est employé lorsque le
n-resize, mouvement débute au coin sud-est de la boîte.
ne-resize,
nw-resize,
s-resize,
se-resize,
sw-resize,

Annexes
w-resize
ew-resize, Signale un curseur de redimensionnement bidirectionnel
ns-resize,
nesw-resize,
nwse-resize
col-resize Indique que l’élément ou la colonne peut être modifié horizontalement. Souvent une flèche
bicéphale horizontale avec une barre verticale
row-resize Indique que l’élément ou la colonne peut être modifié verticalement. Souvent une flèche bicéphale
verticale avec une barre horizontale
all-scroll Vous pouvez faire défiler quelque chose dans toutes les directions. Souvent quatre flèches avec un
point au milieu
Curseurs de zoom
zoom-in, Quelque chose peut être agrandi ou diminué. Souvent une loupe avec au centre un + ou un − pour
zoom-out indiquer le sens de l’action

A.14 Correspondance par défaut des éléments HTML

Élément(s) HTML Style CSS
a :link, :visited {text-decoration: underline}
© Dunod – Toute reproduction non autorisée est un délit

address {display: block ; unicode-bidi: embed ; font-style: italic}

BDO[DIR="ltr"] {direction: ltr ; unicode-bidi: bidi-override}
BDO[DIR="rtl"] {direction: rtl ; unicode-bidi: bidi-override}
big {font-size: 1.17em}
blockquote {display: block ; unicode-bidi: embed ; margin: 1.12em 0 ;
margin-left: 40px ; margin-right: 40px}
body {display: block ; unicode-bidi: embed ; margin: 8px}
br :before {content: "\A" ; white-space: pre-line}
button {display: inline-block}
caption {display: table-caption ; text-align: center}

@
117
 Annexes • Tableaux résumés
Élément(s) HTML Style CSS
center {display: block ; unicode-bidi: embed ; text-align: center}
cite {font-style: italic}
code {font-family: monospace ;}
col {display: table-column}
colgroup {display: table-column-group}
dd {display: block ; unicode-bidi: embed ; margin-left: 40px}
del {text-decoration: line-through}
dir {display: block ; unicode-bidi: embed ; margin : 1.12em 0 ;
margin-left: 40px}
div {display: block ; unicode-bidi : embed}
dl {display: block ; unicode-bidi : embed ; margin : 1.12em 0}
dt {display: block ; unicode-bidi: embed}
em {font-style: italic}
prise en main

fieldset {display: block ; unicode-bidi: embed ; margin: 1.12em 0}

form {display: block ; unicode-bidi: embed ; margin: 1.12em 0}
frame {display: block ; unicode-bidi: embed}
frameset {display: block ; unicode-bidi: embed}
Annexes

h1 {display: block ; unicode-bidi: embed ; font-weight: bolder ;

font-size: 2em ; margin: .67em 0}
h2 {display: block ; unicode-bidi: embed ; font-weight: bolder ;
font-size: 1.5em ; margin: .75em 0}
h3 {display: block ; unicode-bidi: embed ; font-weight: bolder ;
font-size: 1.17em ; margin: .83em 0}
h4 {display: block ; unicode-bidi: embed ; font-weight: bolder ;
margin: 1.12em 0;}
h5 {display: block ; unicode-bidi: embed ; font-weight: bolder ;
font-size: .83em ; margin: 1.5em 0}
h6 {display: block ; unicode-bidi: embed ; font-weight: bolder ;
font-size: .75em ; margin: 1.67em 0}
head {display: none}
hr {display: block ; unicode-bidi: embed ; border: 1px inset}
html {display: block ; unicode-bidi: embed}
i {font-style: italic}
input {display: inline-block}
ins {text-decoration: underline}
kbd {font-family: monospace ;}
li {display: list-item}
menu {display: block ; unicode-bidi: embed ; margin: 1.12em 0 ;
margin-left: 40px}
noframes {display: block ; unicode-bidi: embed}
ol {display: block ; unicode-bidi: embed ; margin: 1.12em 0 ;
margin-top: 0 ; margin-bottom: 0 ; margin-left: 40px ;
list-style-type: decimal}
p {display: block ; unicode-bidi: embed ; margin: 1.12em 0}
pre {display: block ; unicode-bidi: embed ; font-family: monospace ;
white-space: pre}
s {text-decoration: line-through}
samp {font-family: monospace ;}

@
118
 Annexes • Tableaux résumés
Élément(s) HTML Style CSS
select {display: inline-block}
small {font-size: .83em}
sub {font-size: .83em ; vertical-align: sub}
sup {font-size: .83em ; vertical-align: super}
strike {text-decoration: line-through}
strong {font-weight: bolder}
table {display: table ; border-spacing: 2px ;}
tbody {display: table-row-group ; vertical-align: middle}
td {display: table-cell ; vertical-align: inherit}
textarea {display: inline-block}
tfoot {display: table-footer-group ; vertical-align: middle}
th {display: table-cell ; vertical-align: inherit ;
font-weight: bolder ; text-align: center}
thead {display: table-header-group ; vertical-align: middle}
tr {display: table-row ; vertical-align: inherit}
tt {font-family: monospace ;}
u {text-decoration: underline}

Annexes
ul {display: block ; unicode-bidi: embed ; margin: 1.12em 0 ;
margin-left: 40px}
var {font-style: italic}
*[DIR="ltr"] {direction: ltr ; unicode-bidi: embed}
*[DIR="rtl"] {direction: rtl ; unicode-bidi: embed}
© Dunod – Toute reproduction non autorisée est un délit

@
119
 Index
Symbols background-origin, propriété 52
background-position, propriété 51, 58
:active, pseudo-classe 20 background-repeat, propriété 51, 58
:checked, pseudo-classe 20, 93 background-size, propriété 52
:empty, pseudo-classe 23 before, pseudo-élément 71
:first-child, pseudo-classe 22 bloc de déclaration 10
:first-of-type, pseudo-classe 23 boîte
:focus, pseudo-classe 20 flexible, modèle de 78
:hover, pseudo-classe 20, 90 flottante 41
:last-child, pseudo-classe 22 boîtes, modèle de 29
:last-of-type, pseudo-classe 23 border, propriété 35
:link, pseudo-classe 19 border-color 32
:not(), pseudo-classe 23 border-style 32
:nth-child(), pseudo-classe 21 border-width 32
:nth-last-child(), pseudo-classe 22 border-image, propriété 35
:nth-last-of-type(), pseudo-classe 23 border-radius, propriété 34
:nth-of-type(), pseudo-classe 22 bordure, propriétés de 34
:only-child, pseudo-classe 23 box-shadow, propriété 35
:only-of-type, pseudo-classe 23 box-sizing, propriété 64
::after, pseudo-élément 26
::before, pseudo-élément 26 C
::first-letter, pseudo-élément 25 caractéristiques médias 74
::first-line, pseudo-élément 24 cascade 9
@font-face, règle 48 classe, sélecteur de 17
@keyframe, règle 92 clear, propriété 41
@media, règle 75, 76 clip, propriété 43
[], sélecteur d’attribut 17 color, propriété 49
., sélecteur de classe 17 column-count, propriété 62
~, sélecteur de frère 16 column-gap, propriété 62
+, sélecteur de parent adjacent 16 column-rule, propriété 63
#, sélecteur d’identifiant 18 column-width, propriété 62
A columns, propriété raccourcie 63
commentaire 10
align-content, propriété 98 compteur, propriétés de 71
align-items, propriété 80, 97 conception adaptative 73
align-self, propriété 80, 100 contenu, propriétés de 38
© Dunod – Toute reproduction non autorisée est un délit

animation, propriété 93 couche, propriétés de 42

animation, propriétés d’ 92 couleur 4
animation-play-state, propriété 93 couleur et fond, propriétés de 49
attribut, sélecteur d’ 17 counter(), fonction 72
counter-increment, propriété 71
B
counter-reset, propriété 71
backface-visibility, propriété 86 counters(), fonction 72
background-attachment, propriété 51 D
background-color, propriété 49
background-image, propriété 50 déclaration 10
linear-gradient(), méthode 53 dimension 4
radial-gradient(), méthode 56 display, propriété 40

@
121
E I

effet visuel, propriétés d’ 43 identifiant, sélecteur d’ 18

entier 4 interface utilisateur, propriétés d 64
espacement, propriétés d’ 37
J
F
justify-content, propriété 79, 98
feuille de styles justify-items, propriété 97
externe 9 justify-self, propriété 100
interne 8
L
flex, propriété raccourcie 80
flex-basis, propriété 80 linear-gradient(), méthode 53
flexbox 78 line-height, propriété 47
flex-container 78 link, élément 9
flex-direction, propriété 78 liste, propriétés de 68
flex-flow, propriété raccourcie 79 list-style, propriété raccourcie 70
flex-grow, propriété 80 list-style-image, propriété 68
flex-item 78 list-style-position, propriété 70
flex-shrink, propriété 80 list-style-type, propriété 68
flex-wrap, propriété 79
M
float, propriété 41
font, propriété raccourcie 47 marge, propriétés de 30
font-family, propriété 46 margin, propriété 31
font-size, propriété 47 matrix(), fonction 85
font-style, propriété 47 matrix3d(), fonction 86, 88
font-variant, propriété 47 max-height, propriété 39
font-weight, propriété 47 max-width, propriété 39
frère, sélecteur de 16 media, attribut 74
fr, unité 96 media queries, Voir requêtes médias
min-height, propriété 39
G min-width, propriété 39
grid, propriété raccourcie 98 N
grid-area, propriété 100
grid-auto-colums, propriété 98 nombre 4
grid-auto-flow, propriété 97 Notepad++ 8
grid-auto-rows, propriété 98
grid-column-end, propriété 99 O
grid-column-gap, propriété 97 opacity, propriété 50
grid-column-start, propriété 99 order, propriété 80
grid-container 95 outline, propriété 33, 65
grid-gap, propriété raccourcie 97 outline-offset, propriété 65
grid-item 95 overflow, propriété 39
grid-row-end, propriété 99
grid-row-gap, propriété 97 P
grid-row-start, propriété 99
padding, propriété 37
grid-template-columns, propriété 95
perspective, propriété 87
grid-template-rows, propriété 95
perspective-origin, propriété 87
H police, propriétés de 46
position, propriété 41
height, propriété 38 positionnement, propriétés de 40
héritage 9 pourcentage 4

@
122
 propriété rotateX(), méthode 86
d’animation 92 rotateY(), méthode 86
de bordure 34 rotateZ(), méthode 86
de compteur 71
de contenu 38 S
de couche 42 scale(), méthode 83
de couleur et de fond 49 scale3d(), méthode 86
d’effet visuel 43 sélecteur 10
de liste 68 d’attribut 17
de marge 30 de classe 17
de positionnement 40 de frère 16
d’espacement 37 de parent adjacent 16
de texte 59 de pseudo-classe dynamique 19
de texte et de police 46 d’identifiant 18
d’interface utilisateur 64 spécificité 27
pseudo-classe skew(), méthode 83
:checked 20 style
:empty 23 attribut 8
:first-child 22 élément 8
:first-of-type 23
:focus 20 T
:hover 20
:last-child 22 text-decoration, propriété 59
:last-of-type 23 text-indent, propriété 60
:not() 23 text-overflow, propriété 65
:nth-child() 21 text-shadow, propriété 61
:nth-last-child() 22 text-transform, propriété 60
:nth-last-of-type() 23 texte, propriétés de 59
:nth-of-type() 22 transformation 2D
:only-child 23 matrix(), fonction 85
:only-of-type 23 rotate(), méthode 82
:target 19 scale(), méthode 83
pseudo-élément 24 skew(), méthode 83
::after 26 translate(), méthode 82
::before 26 transformation 3D
::first-letter 25 backface-visibility, propriété 86
::first-line 24 matrix3d(), fonction 86, 88
perspective-origin, propriété 87
Q perspective, propriété 87
rotate3d(), méthode 86
quadrillage, modèle de boîte 95 rotateX(), méthode 86
R rotateY(), méthode 86
rotateZ(), méthode 86
© Dunod – Toute reproduction non autorisée est un délit

radial-gradient(), méthode 56 scale3d(), méthode 86

règle 10 transform-style, propriété 87
repeat(), notation 96 translate3d(), méthode 86
repeating-gradial-gradient(), propriété 58 translateZ(), méthode 86
repeating-linear-gradient(), propriété 55 transform, propriété 82, 84
requête média 73, 76 transform-origin, propriété 83, 86
resize, propriété 64 transform-style, propriété 87
responsive design, Voir conception adaptative transition, propriété 90
RGB 4 translate(), méthode 82
rotate(), méthode 82 translate3d(), méthode 86
rotate3d(), méthode 86 translateZ(), méthode 86

@
123
U W

URI (Uniform Resource Identifier) 5 white-space, propriété 65

width, propriété 38
V word-spacing, propriété 59
word-wrap, propriété 61
valeur 4
Z
vertical-align, propriété 59
visibility, propriété 43 z-index, propriété 42, 89