SI

1
Ac
P

Page 1
LU ad
VI S e

langage
SI Ac
P

Maîtriser le
LU ad

niveau
niveau avancé
S
langage
em
Ac Maîtriser le y
a CSS
U de VI
-
S m
CSS - avancé
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI

2
Ac
P ad

Page 2
LU
VI S e
SI Ac
P

le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U MaîtriserPréparer
de VI
S m
Ac y
ad VI
em SI
y PL
U
travail

S
Partie 1 :

de VI
m SI
y PL
U
VI S
SI Ac
P LU ad
S em
son environnement de

IS Ac
IP
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 1 :

PL
y

Ac
m
S

SI
MaîtriserPrésentation et organisation des
de
LU

le

VI

S
a

LU
langage CSS -
ressources
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
3
Page 3 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y
Les points clés du module de formation

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
La pratique sera
Le CSS sera au Un dossier
S

SI
essentielle et se

de
cœur du module. d'exercice et un
LU

Maîtriser le fera

VI

S
Seuls les bases e-pub nous
principalement
a

LU
langage CSS - du HTML seront accompagneront
P

Ac
dans le
abordées. tout du long
SI

niveau avancé

y
navigateur

P
em
S

SI

A
LU

VI

S
Page 4 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P ad

Page 5
LU
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
Organisation des dossiers

IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P ad

Page 6
LU
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
Fichier de ressource e-pub

IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

U
Démonstration : présentation et

ad
Ac

PL
y
organisation des ressources

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 7 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Nous concentrerons sur le CSS

ad
Ac

PL
y
Nous ferons beaucoup de pratiques

Ac
m
S

SI
de
LU

Maîtriser le Il y a un dossier d'exercice par chapitre

VI

S
a

LU
langage CSS -
P

Ac
Les codes seront stockés dans le
SI

niveau avancé

P
fichier e-pub

em
S

SI

A
LU

VI

S
Page 8 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI

9
Ac
P ad

Page 9
LU
VI S e
SI Ac
P

Maîtriser le
langage CSS
LU ad

-
niveau avancé
S em
Ac y
a
U de
Installer VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
Chapitre 2:

m SI
y PL
U
VI S
SI Ac
P LU ad
le logiciel pour éditer

IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

U
Démonstration :

ad
Ac

PL
y
installer le logiciel pour éditer

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 10 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Nous utiliserons Visual Studio Code

ad
Ac
pour éditer le code et afficher les pages

PL
y

Ac
m
S

SI
Plusieurs extensions sont disponibles

de
LU

pour modifier le comportement du

Maîtriser le

VI

S
logiciel
a

LU
langage CSS -
P

Ac
SI

niveau avancé

y
Un lien a été créé vers le dossier des

P
em
exercices
S

SI

A
LU

VI

S
Page 11 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 3 :

PL
y

Ac
m
S

SI
MaîtriserÉditer le CSS en direct et en local
de
LU

le

VI

S
a

LU
langage CSS -
avec Chrome
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 12 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : éditer le CSS en direct et

ad
Ac

PL
y
en local avec Chrome

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 13 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Chrome permet l'édition en direct

ad
Ac

PL
y
Tout se passe dans l'inspecteur

Ac
m
S

SI
de
LU

Maîtriser le Deux modes sont possibles: Éléments

VI

S
a ou Sources

LU
langage CSS -
P

Ac
SI

niveau avancé

P
Toujours contrôler le point vert

em
S

SI

A
LU

VI

S
Page 14 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad
Partie 2 :

ad
Ac

PL
y
Intégrer les fondamentaux

Ac
m
S

SI
de
LU

Maîtriser le
langageindispensables pour optimiser le

VI

S
a

LU
CSS -
P

Ac

responsive design
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 15 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P ad

Page 16
LU
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
grammaire

m
Chapitre 4 :

SI
y PL
U
VI S
SI Ac
P
Parler CSS avec la bonne

LU ad
IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac

PL
y
Définition

Ac
em

SI

y
em
VI

S
ad CSS

ad
Ac
=

PL
y

Ac
m
Cascading Style Sheet
S

SI
de
=
LU

Maîtriser le

VI

S
Feuille de style en cascade
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 17 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y
Le langage CSS en trois dates

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
CSS 3
de
LU

Maîtriser le CSS 1 CSS 2

VI

S
de 1999 à
a

LU
langage CSS - de 1995 à 1996 de 1997 à 1998
P

maintenant
Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 18 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y
Termes : règle CSS

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
Une règle CSS
Chaque
S

SI
est un ensemble L'ensemble des

de
déclaration
LU

Maîtriser le de déclarations déclarations sont

VI

S
associe une
associées à un placées entre
a

LU
langage CSS - valeur à une
P

Ac
ou plusieurs accolades
propriété
SI

niveau avancé

y
sélecteurs

P
em
S

SI

A
LU

VI

S
Page 19 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 20
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P
En image : règle CSS

LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P ad

Page 21
LU
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P
En image : règle CSS

LU ad
IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

U
Démonstration :

ad
Ac

PL
y
parler CSS avec la bonne grammaire

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 22 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad CSS signifie : les feuilles de styles en

U
cascade

ad
Ac

PL
y

Ac
m
Une règle CSS regroupe des
S

SI
déclarations
de
LU

Maîtriser le

VI

S
a

LU
langage CSS - Une déclaration est une propriété
P

Ac
associée à une valeur
SI

niveau avancé

P
em
S

SI

A
Chaque déclaration est séparée par un
LU

";"

VI

S
Page 23 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 5 :

PL
y

Ac
m
S

SI
Maîtriser le Comprendre la cascade, la
de
LU

VI

S
a

LU
langage CSS -
spécificité et l'héritage
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 24 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : comprendre la cascade,

ad
Ac

PL
y
la spécificité et l'héritage

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 25 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad La cascade tient compte de l'ordre

ad
Ac
d'apparition des règles

PL
y

Ac
m
S

SI
La spécificité calcule le poids

de
LU

d'une règle
Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
L'héritage illustre les styles qui sont
SI

niveau avancé

y
transmis aux enfants

P
em
S

SI

A
LU

VI

S
Page 26 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 27
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m
Chapitre 6 :

SI
y PL
U
VI S
SI
Visionner le box model

Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 28
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI
Démonstration :

Ac
P ad
visionner le box model

LU
IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Le modèle de boîte est un concept

ad
Ac
essentiel pour la mise en page CSS

PL
y

Ac
m
S

SI
Il y a deux grands types de boîtes :

de
LU

En bloc
Maîtriser le

VI

S
En ligne
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
Ce sont les tailles, les espacements et

em
S

SI

A
les bordures qui seront différents
LU

VI

S
Page 29 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 7 :

PL
y

Ac
m
S

SI
Maîtriser Privilégier le REM comme unité
de
LU

le

VI

S
a

LU
langage CSS -
de mesure
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 30 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : privilégier le REM

ad
Ac

PL
y
comme unité de mesure

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 31 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad L'unité REM signifie Root EM

ad
Ac

PL
y
Le réglage principal s'effectue sur la

Ac
m
S

SI
balise HTML

de
LU

Maîtriser le

VI

S
a Le REM est modulable et accessible

LU
langage CSS -
P

Ac
SI

niveau avancé

P
Nous utilisons une base de 10 pour

em
S

SI

A
faciliter les réglages
LU

VI

S
Page 32 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 8 :

PL
y

Ac
m
S

SI
Maîtriser le Optimiser vos CSS avec les
de
LU

VI

S
a

LU
langage CSS -
variables
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 33 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration :

ad
Ac

PL
y
optimiser vos CSS avec les variables

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 34 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Les variables sont bien supportées

ad
Ac

PL
y
Il est préférable de déclarer les

Ac
m
S

SI
variables sur le :root

de
LU

Maîtriser le

VI

S
a Les variables simplifient la

LU
langage CSS -
P

Ac
maintenance du CSS
SI

niveau avancé

P
em
S

SI

A
L'édition des variables est simplifiée
LU

avec l'inspecteur de Chrome

VI

S
Page 35 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 9 :

PL
y

Ac
m
S

SI
MaîtriserOptimiser l'affichage responsive
de
LU

le

VI

S
a

LU
langage CSS -
avec les unités vh et vw
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 36 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : optimiser l'affichage

ad
Ac

PL
y
responsive avec les unités vh et vw

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 37 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Le vh et le vw sont des unités liées à la

ad
Ac
taille de la fenêtre

PL
y

Ac
m
S

SI
Le vh pour la hauteur et le vw pour la

de
LU

largeur
Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
La valeur 100 correspond à 100 % dans
SI

niveau avancé

y
la hauteur ou la largeur

P
em
S

SI

A
LU

VI

S
Page 38 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 39
VI S e
SI Ac
P

Maîtriser le
langage CSS
LU ad

-
niveau avancé
S em
Ac y
a
U de VI
S m
Organiser
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
Chapitre 10 :

y PL
U
VI S
SI Ac
P LU ad
S em
le responsive design

IS Ac
IP
L U
ad
S em
A y
 SI Ac
P LU ad

Page 40
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI
Démonstration :

Ac
P LU ad
S em
organiser le responsive design

IS Ac
IP
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Les requêtes pour le responsive

U
utilisent @media

ad
Ac

PL
y

Ac
m
Les media queries sont placées à la fin
S

SI
des fichiers CSS
de
LU

Maîtriser le

VI

S
a

LU
langage CSS - Les règles CSS sont placées dans
P

Ac
chaque groupe de requête
SI

niveau avancé

P
em
S

SI

A
Choisir l'approche Mobile first de
LU

préférence

VI

S
Page 41 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Partie 3 :

PL
y

Ac
m
S

SI
Maîtriser lePersonnaliser vos formulaires
de
LU

VI

S
a

LU
langage CSS -
avec les CSS
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 42 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 11 :

PL
y

Ac
m
S

SI
MaîtriserRappels sur la construction d'un
de
LU

le

VI

S
a

LU
langage CSS -
formulaire
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 43 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Les bases d'un formulaire

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
Un formulaire est En fonction des
de
LU

Maîtriser le

VI

S
a construit en HTML et il données à traiter,

LU
langage CSS - permet d'interagir avec plusieurs types de
P

Ac
l'utilisateur champs existent
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 44 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 45
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

U
Démonstration : rappels sur la

ad
Ac

PL
y
construction d'un formulaire

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 46 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Un formulaire est construit en HTML

ad
Ac

PL
y
Plusieurs balises dédiées sont

Ac
m
S

SI
disponibles

de
LU

Maîtriser le

VI

S
a Un formulaire est une interaction entre

LU
langage CSS -
P

Ac
un utilisateur et la génération d’une
SI

niveau avancé

y
donnée

P
em
S

SI

A
LU

VI

S
Page 47 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 12 :

PL
y

Ac
m
S

SI
Maîtriser leAjouter les styles de base aux
de
LU

VI

S
a

LU
langage CSS -
formulaires
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 48 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : ajouter les styles de

ad
Ac

PL
y
base aux formulaires

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 49 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Les CSS sur les formulaires sont plus

ad
Ac
ou moins difficiles à appliquer

PL
y

Ac
m
S

SI
Chaque navigateur applique son propre

de
LU

style en accord avec son interface

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Utilisation de la valeur inherit pour
SI

niveau avancé

y
appeler des styles de base

P
em
S

SI

A
LU

VI

S
Page 50 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 13 :

PL
y

Ac
m
S

SI
Maîtriser Ajouter des styles avancés aux
de
LU

le

VI

S
a

LU
langage CSS -
formulaires
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 51 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : ajouter des styles

ad
Ac

PL
y
avancés aux formulaires

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 52 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Les pseudo-classes nous aident à

ad
Ac
changer le style selon l’état du

PL
y
formulaire

Ac
m
S

SI
de
LU

La propriété appearance nous permet

Maîtriser le

VI

S
de retirer les styles par défaut des
a

LU
langage CSS -
P

navigateurs
Ac
SI

niveau avancé

P
em
Les techniques CSS à utiliser pour des
S

SI

A
éléments moins accessibles
LU

VI

S
Page 53 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 54
VI S e
SI Ac
P

le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
MaîtriserAjouter
U de VI
S m
Ac y
ad VI
em SI
y PL
CSS

U
VI S
Partie 4 :

de
m SI
y PL
U
VI S
SI Ac
P LU ad
S em
du mouvement avec les

IS Ac
IP
L U
ad
S em
A y
 SI Ac
P LU ad

Page 55
VI S e
SI Ac
P

Maîtriser le
langage CSS
LU ad

-
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
Introduction

ad VI
em SI
y PL
U
de VI S
m SI
Chapitre 14 :

y PL
U
VI S
SI Ac
P LU ad
et outils en ligne

IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac
Transformations et animations

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
Avec l'arrivée du CSS3,
S

SI
Dans ce module de
les outils de design
de
LU

formation, nous nous

Maîtriser le

VI

S
sont devenus
concentrerons sur les
a

LU
langage CSS - beaucoup plus
P

transformations et les
Ac
nombreux. Les outils
SI

niveau avancé animations

P
en ligne ont suivi.

em
S

SI

A
LU

VI

S
Page 56 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 57
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 58
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 59
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 60
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P ad

Page 61
LU
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI
Démonstration :

Ac
P LU ad
S em
introduction et outils en ligne

IS Ac
IP
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Le CSS3 ajoute beaucoup

ad
Ac
d'ornementations et d'effets natifs

PL
y

Ac
m
S

SI
Nous allons nous concentrer sur les

de
LU

propriétés transform et animation

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
De nombreux outils en ligne sont
SI

niveau avancé

y
disponibles pour tester vos styles CSS

P
em
S

SI

A
LU

VI

S
Page 62 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 63
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
Chapitre 15 :

y PL
transformations

U
Présentation des

VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 64
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI
Démonstration :

Ac
P LU ad
IS S em
présentation des transformations

IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad La propriété transform intègre de

U
nombreuses valeurs au travers de

ad
Ac

PL
fonctions

Ac
m
S

SI
La plupart des fonctions ont deux
de
LU

Maîtriser le paramètres possibles

VI

S
a

LU
langage CSS -
P

Ac
Les valeurs négatives sont possibles
SI

niveau avancé

P
em
S

SI

A
De nouvelles unités sont utilisées
LU

comme deg ou turn

VI

S
Page 65 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 16 :

PL
y

Ac
m
S

SI
Pratiquer : créer des
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
transformations
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 66 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration :

ad
Ac

PL
y
pratiquer – Créer des transformations

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 67 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Utiliser la notation (courte ou longue)

ad
Ac
avec laquelle vous êtes le plus à l’aise

PL
y

Ac
m
S

SI
Ne pas hésiter à utiliser les outils en

de
LU

ligne pour tester vos styles

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Ne pas intégrer les préfixes pour
SI

niveau avancé

y
faciliter la lecture du code

P
em
S

SI

A
LU

VI

S
Page 68 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 69
VI S e
SI Ac
P

Maîtriser le
langage CSS
LU ad

-
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad
Présentation

VI
em SI
y PL
U
de VI S
m SI
Chapitre 17 :

y PL
U
VI S
SI Ac
P LU ad
des animations

IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 70
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI
Démonstration :

Ac
P LU ad
S em
présentation des animations

IS Ac
IP
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad De nombreuses propriétés d’animation

U
existent

ad
Ac

PL
y

Ac
m
Ces propriétés sont à ajouter à un
S

SI
sélecteur
de
LU

Maîtriser le

VI

S
a

LU
langage CSS - Une notation courte animation peut
P

Ac
être utilisée dans vos règles CSS
SI

niveau avancé

P
em
S

SI

A
C’est la règle @keyframes qui permet
LU

de créer l’animation

VI

S
Page 71 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 72
VI S e
SI Ac
P

Maîtriser le
langage CSS
LU ad

-
niveau avancé
S em
Ac y
a
U de
Pratiquer VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
Chapitre 18 :

y PL
U
VI S
SI Ac
P LU ad
S em
: créer des animations

IS Ac
IP
L U
ad
S em
A y
 SI Ac
P LU ad

Page 73
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI
Démonstration :

Ac
P LU ad
IS S em
pratiquer : créer des animations

IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Il est possible de créer des animations

U
complexes en CSS

ad
Ac

PL
y

Ac
m
Utiliser la notation (courte ou longue)
S

SI
avec laquelle vous êtes le plus à l’aise
de
LU

Maîtriser le

VI

S
a

LU
langage CSS - Ne pas hésiter à utiliser les outils en
P

Ac
ligne
SI

niveau avancé

P
em
S

SI

A
Ne pas intégrer les préfixes pour
LU

faciliter la lecture du code

VI

S
Page 74 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 75
VI S e
SI Ac
P LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
S
Flexbox

VI
Partie 5 :

de
m SI
y PL
U
VI S
SI Ac
P
Maîtriser le Répartir les éléments avec

LU ad
IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 19 :

PL
y

Ac
m
S

SI
Maîtriser leIntroduction et ressources sur
de
LU

VI

S
a

LU
langage CSS -
Flexbox
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 76 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 77
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac

PL
y
Les bases de Flexbox

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
Flexbox permet Flexbox est
Flexbox
S

SI
de remplir un adapté pour les

de
fonctionne sur
LU

Maîtriser le espace mises en page

VI

S
une seule
dynamiquement simples. Il
a

LU
langage CSS - dimension, dans
P

Ac
avec des tailles complète Grid
les deux sens
SI

niveau avancé

y
non connues Layout.

P
em
S

SI

A
LU

VI

S
Page 78 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 79
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

U
Démonstration :

ad
Ac

PL
y
introduction et ressources sur Flexbox

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 80 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Flexbox est dynamique dans sa

ad
Ac
répartition dans un espace donné

PL
y

Ac
m
S

SI
Flexbox fonctionne sur une seule

de
LU

dimension
Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Flexbox complète Grid Layout dans les
SI

niveau avancé

y
mises en page plus complexes

P
em
S

SI

A
LU

VI

S
Page 81 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 20 :

PL
y

Ac
m
S

SI
Déclarer les différentes
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
propriétés de Flexbox
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 82 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : déclarer les différentes

ad
Ac

PL
y
propriétés de Flexbox

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 83 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Pour activer Flexbox nous utilisons la

U
valeur flex sur la propriété display

ad
Ac

PL
y

Ac
m
La majorité des réglages sont ajoutés
S

SI
sur le parent des éléments flex
de
LU

Maîtriser le

VI

S
a

LU
langage CSS - Gap permet d’ajouter des gouttières
P

Ac
(comme pour Grid Layout)
SI

niveau avancé

P
em
S

SI

A
Toujours tenir compte de flex-direction
LU

pour les réglages

VI

S
Page 84 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad
Chapitre 21 :

ad
Ac

PL
y
Ajouter des réglages

Ac
m
S

SI
de
LU

Maîtriser le
spécifiques pour les éléments

VI

S
a

LU
langage CSS -
P

Ac

internes
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 85 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : ajouter des réglages

ad
Ac

PL
y
spécifiques pour les éléments internes

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 86 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Il est possible de changer l’ordre des

ad
Ac
éléments flex (enfants)

PL
y

Ac
m
S

SI
Plusieurs fonctions permettent de gérer

de
LU

les grossissements et le rétrécissement

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Des alignements spécifiques sont
SI

niveau avancé

y
possibles sur les enfants

P
em
S

SI

A
LU

VI

S
Page 87 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 22 :

PL
y

Ac
m
S

SI
Maîtriser Pratiquer – Faire un menu avec
de
LU

le

VI

S
a

LU
langage CSS -
Flexbox
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 88 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration :

ad
Ac

PL
y
Pratiquer : faire un menu avec Flexbox

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 89 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Flexbox est très utile pour la création de

ad
Ac
menus dynamiques

PL
y

Ac
m
S

SI
Le retour à la ligne est optionnel en cas

de
LU

de rétrécissement de l'écran
Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Utiliser les coefficients pour la gestion
SI

niveau avancé

y
spécifique des éléments

P
em
S

SI

A
LU

VI

S
Page 90 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P ad

Page 91
LU
VI S e
SI Ac
P LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
Layout

VI S
Partie 6 :

de
m SI
y PL
U
VI S
SI Ac
P LU ad
S
Maîtriser leComprendre les bases de Grid

em
IS Ac
IP
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 23 :

PL
y

Ac
m
S

SI
Maîtriser leIntroduction et ressources sur
de
LU

VI

S
a

LU
langage CSS -
Grid Layout
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 92 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 93
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 94
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac

PL
y
Les bases de Grid Layout

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
Grid Layout
S

SI
Grid Layout a été Grid Layout

de
permet de
LU

Maîtriser le supporté très fonctionne très

VI

S
réaliser des
rapidement à bien avec
a

LU
langage CSS - grilles sur deux
P

Ac
partir de 2017 Flexbox
dimensions
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 95 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : introduction et

ad
Ac

PL
y
ressources sur Grid Layout

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 96 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Grid Layout permet de travailler sur

ad
Ac
deux dimensions

PL
y

Ac
m
S

SI
Grid Layout donne la possibilité de

de
LU

réaliser des mises en page complexes

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Grid Layout fonctionne très bien avec
SI

niveau avancé

y
Flexbox

P
em
S

SI

A
LU

VI

S
Page 97 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad
Chapitre 24 :

ad
Ac

PL
y
Lister les terminologies et les

Ac
m
S

SI
de
LU

Maîtriser le
propriétés essentielles de Grid

VI

S
a

LU
langage CSS -
P

Ac

Layout
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 98 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : lister les terminologies

ad
Ac

PL
y
et propriétés essentielles de Grid Layout

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 99 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Une terminologie complète

U
accompagne Grid Layout

ad
Ac

PL
y

Ac
m
Grid Layout est une valeur de la
S

SI
propriété display
de
LU

Maîtriser le

VI

S
a

LU
langage CSS - De très nombreuses propriétés ont été
P

Ac
ajoutées pour Grid Layout
SI

niveau avancé

P
em
S

SI

A
La plupart des réglages sont effectués
LU

sur le parent principal (container)

VI

S
Page 100 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 101
VI S e
SI Ac
P

Maîtriser le
LU ad

-
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
langage CSSConstruire

ad VI
em SI
y PL
U
de VI S
m SI
Chapitre 25 :

y PL
U
VI S
SI Ac
P LU ad
sa première grille

IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 102
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI
Démonstration :

Ac
P LU ad
S
construire sa première grille

em
IS Ac
IP
L U
ad
S em
A y
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Le nombre de colonnes est déterminé

ad
Ac
par les valeurs de grid-template-

PL
y
columns

Ac
m
S

SI
de
LU

Le nombre de rangées est déterminé

Maîtriser le

VI

S
automatiquement par le nombre
a

LU
langage CSS -
P

d’éléments
Ac
SI

niveau avancé

P
em
Les unités peuvent être mixtes: px, %...
S

SI

A
LU

VI

S
Page 103 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 26 :

PL
y

Ac
m
S

SI
Utiliser les unités de mesure et
de
LU

Maîtriser le

VI

S
a

LU
les
langage CSS -
fonctions avec Grid Layout
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 104 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : utiliser les unités de

ad
Ac

PL
y
mesure et les fonctions avec Grid Layout

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 105 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Une nouvelle unité a été ajoutée avec

U
Grid Layout : fr

ad
Ac

PL
y

Ac
m
Des mots clés de taille sont disponibles
S

SI
de
LU

Maîtriser le

VI

S
a Il est possible d’ajouter un minimum et

LU
langage CSS - un maximum avec des fonctions
P

Ac
dédiées
SI

niveau avancé

P
em
S

SI

A
Utiliser la fonction repeat pour créer
LU

des grilles plus complexes

VI

S
Page 106 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 27 :

PL
y

Ac
m
S

SI
Maîtriser lePlacer les éléments avec Grid
de
LU

VI

S
a

LU
langage CSS -
Layout
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 107 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration :

ad
Ac

PL
y
placer les éléments avec Grid Layout

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 108 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad L’ordre des éléments est donné par le

U
HTML

ad
Ac

PL
y

Ac
m
Grid Layout permet de changer l’ordre
S

SI
des éléments
de
LU

Maîtriser le

VI

S
a

LU
langage CSS - Utilisation de grid-row et grid-column
P

Ac
pour le placement des éléments
SI

niveau avancé

P
em
S

SI

A
Utilisation de span pour être plus
LU

dynamique dans le placement

VI

S
Page 109 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad
Chapitre 28 :

ad
Ac

PL
y
Pratiquer – Créer une page web

Ac
m
S

SI
de
LU

Maîtriser le
langage CSSresponsive design avec Grid

VI

S
a

LU
-
P

Ac

Layout
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 110 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : pratiquer : créer une page

ad
Ac

PL
y
web responsive design avec Grid Layout

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 111 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad La construction de la grille de base est

U
essentielle

ad
Ac

PL
y

Ac
m
Ne pas hésiter à partir d’un croquis
S

SI
dessiné
de
LU

Maîtriser le

VI

S
a

LU
langage CSS - Les éléments s’alignent
P

Ac
automatiquement
SI

niveau avancé

P
em
S

SI

A
Les marges internes s’intègrent
LU

parfaitement dans la grille

VI

S
Page 112 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Partie 7 :

PL
y

Ac
m
S

SI
Créer des mises en page
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
complexes avec Grid Layout
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 113 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 29 :

PL
y

Ac
m
S

SI
MaîtriserComprendre les grilles explicites
de
LU

le

VI

S
a

LU
langage CSS -
et implicites
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 114 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : comprendre les grilles

ad
Ac

PL
y
explicites et implicites

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 115 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad La grille est fixée avec grid-template-

ad
Ac
columns et grid-template-rows

PL
y

Ac
m
S

SI
Les éléments hors de la grille utilisent

de
LU

une grille implicite

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Les propriétés grid-auto-rows et grid-
SI

niveau avancé

y
auto-columns permettent d’avoir le

P
em
contrôle sur cette grille
S

SI

A
LU

VI

S
Page 116 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 30 :

PL
y

Ac
m
S

SI
Maîtriser le Utiliser des lignes nommées
de
LU

VI

S
a

LU
langage CSS -
pour définir une grille
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 117 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : utiliser des lignes

ad
Ac

PL
y
nommées pour définir une grille

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 118 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Il est possible de nommer les lignes

ad
Ac
comme suit [nom-ligne]

PL
y

Ac
m
S

SI
Les dimensions sont placées entre ces

de
LU

noms de ligne
Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Ces noms de lignes sont utilisés pour le
SI

niveau avancé

y
placement des enfants

P
em
S

SI

A
LU

VI

S
Page 119 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 31 :

PL
y

Ac
m
S

SI
Maîtriser le Utiliser des zones nommées
de
LU

VI

S
a

LU
langage CSS -
pour définir une grille
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 120 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : utiliser des zones

ad
Ac

PL
y
nommées pour définir une grille

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 121 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Les zones nommées permettent de

ad
Ac
dessiner une zone

PL
y

Ac
m
S

SI
Cette zone a besoin d’une grille pour

de
LU

exister
Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Utilisation de valeurs « mots clés »
SI

niveau avancé

y
dans la propriété grid-template-areas

P
em
S

SI

A
LU

Le . permet de créer des cellules vides

VI

S
Page 122 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 32 :

PL
y

Ac
m
S

SI
Justifier et aligner les éléments
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
depuis le parent
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 123 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : justifier et aligner les

ad
Ac

PL
y
éléments depuis le parent

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 124 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Il est possible de justifier ou d’aligner

ad
Ac
tous les enfants depuis la balise

PL
y
principale (container)

Ac
m
S

SI
de
LU

Une notation courte existe : place-items

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Il est possible de justifier ou d’aligner
SI

niveau avancé

y
toute la grille dans son parent direct

P
em
S

SI

A
LU

VI

S
Page 125 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 33 :

PL
y

Ac
m
S

SI
Maîtriser leJustifier et aligner les enfants
de
LU

VI

S
a

LU
langage CSS -
directement
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 126 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : justifier et aligner les

ad
Ac

PL
y
enfants directement

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 127 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Les enfants de la grille peuvent être

ad
Ac
alignés individuellement

PL
y

Ac
m
S

SI
Pour la justification nous utilisons la

de
LU

propriété justify-self
Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Pour l’alignement nous utilisons la
SI

niveau avancé

y
propriété align-self

P
em
S

SI

A
LU

VI

S
Page 128 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 34 :

PL
y

Ac
m
S

SI
Créer des alignements
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
automatiques et responsive
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 129 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : créer des alignements

ad
Ac

PL
y
automatiques et responsive

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 130 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad La grille est fixe par défaut

ad
Ac
contrairement à Flexbox

PL
y

Ac
m
S

SI
L’inspecteur de Chrome nous aide à

de
LU

afficher les réglages de la grille

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Les fonctions auto-fill et minmax() nous
SI

niveau avancé

y
évitent plusieurs média queries

P
em
S

SI

A
LU

Il est possible de déplacer un élément

VI

S
Page 131 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac

PL
y

Ac
em

SI

y
em
VI

S
ad

ad
Ac

Chapitre 35 :

PL
y

Ac
m
S

SI
Améliorer la compatibilité avec
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
@supports
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 132 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

U
Démonstration : améliorer la

ad
Ac

PL
y
compatibilité avec @supports

Ac
em

SI

y
em
VI

S
ad

ad
Ac

PL
y

Ac
m
S

SI
de
LU

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
SI

niveau avancé

P
em
S

SI

A
LU

VI

S
Page 133 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 e

em
VI

S
ad

ad
Ac
Ce qu’il faut retenir

PL
y

Ac
em

SI

y
em
VI

S
ad Créer une version simplifiée du site

ad
Ac
pour les navigateurs anciens

PL
y

Ac
m
S

SI
La règle @support permet d'ajouter des

de
LU

CSS plus avancés : grid layout, frexbox...

Maîtriser le

VI

S
a

LU
langage CSS -
P

Ac
Il est possible de combiner plusieurs
SI

niveau avancé

y
conditions dans cette règle

P
em
S

SI

A
LU

VI

S
Page 134 ad

U
P

Ac

L
SI

IP
m
VI

IS
de
U
 SI Ac
P LU ad

Page 135
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
VI S
Partie 8 :

de
m
Conclusion

SI
y PL
U
VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 136
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
Chapitre 36 :

y PL
U
Pour aller plus loin

VI S
SI Ac
P LU ad
IS S em
IP Ac
L U
ad
S em
A y
 SI Ac
P LU ad

Page 137
VI S e
SI Ac
P

Maîtriser le
LU ad

langage CSS -
niveau avancé
S em
Ac y
a
U de VI
S m
Ac y
ad VI
em SI
y PL
U
de VI S
m SI
y PL
U
VI S
SI Ac
P LU ad
S em
Démonstration : aller plus loin

IS Ac
IP
L U
ad
S em
A y