Chapitre2 CSS

Master 1 –ESE
Programmation Avancée (PRAVAN)

Où sommes nous ?
Les bases de données Chapitre 5 Chapitre 4 Site dynamique
Serveur
Web
Base de données
Single Page App (SPA) Chapitre 6 Chapitre 2 Site statique

HTML CSS
Chapitre 3 Chapitre 1
Interactivité Navigateur
(programmation JavaScript Introduction
côté client)
2
Plan de cette séance
1. Rappel
1. Notions de base du Web
2. Les bases du CSS
3. Les sélecteurs
4. Les propriétés/valeurs
5. CSS Media Queries
6. Règles de priorité
3
1. Notions de base du Web

1
Rappel
4
1- Rappel
Vous devez
apprendre à écrire
un document HTML
Si vous voulez créer

une page Web…
5
1- Rappel
Est ce que c'est suffisant

pour bâtir une page Web
comme celle ci ?
La réponse est: NON
6
1- Rappel
Titres
Listes
Le HTML permet de remplir Paragraphes
et de structurer le contenu
de la page seulement:
Images
…
7
1- Rappel
Titres
Listes
Le HTML permet de remplir Paragraphes
et de structurer le contenu
de la page:
Rendre la page plus présentable ? Images

…
Il faut ajouter
autre chose !
Un document
CSS
Couleur de texte
Police d’écriture
Positionnement
des images
8
1- Rappel
Titres
Listes
Paragraphes
CSS: Cascading Style Sheets

Images
Feuilles sont écrites dans un langage …
spécifique (format textuel, extension.css)
Rendre la plus
présentable ?
Comme ceci Un document
Il faut ajouter CSS
autre chose !
Couleur de texte
Police d’écriture
Positionnement
des images
9
1- Rappel
Pourquoi cette dissociation?

• Assurer la cohérence graphique de ce site.
Un document • La maintenance d'un site en est facilitée.
HTML • Plusieurs mises en forme différentes peuvent être
appliquées à un même document.
• Le code HTML est lisible et facilement modifiable.
Rendre la plus • Les pages sont plus légères, donc plus rapides à
présentable ? circuler sur un réseau (la feuille de style ne sera
Comme ceci chargée qu'une seule fois).
Il faut ajouter
autre chose ! Un document
CSS
10
2
1. Notions de base Les bases du CSS
du Web
Un document
CSS Fonctionnement
des feuilles de style
(CSS)
11
2- Les bases du CSS
Fonctionnement des feuilles de style (CSS)
Prenons l'exemple suivant.

Nous avons donc un code HTML qui
contient un titre H1, et qui permet
d'afficher sur le navigateur, Bienvenue sur
la page.
12
Vous voulez changer la couleur de
2- Les bases du CSS Supposons que
ce texte en rouge
13
ce texte en rouge
1- Vous devez sélectionner l’élément
Dans notre exemple, ça sera l'élément h1
14
ce texte en rouge
2- Puis affecter "rouge" à sa propriété
couleur
L’élément a plusieurs propriétés.

La propriété "couleur" est l’une d’elles.
15
ce texte en rouge
couleur
CSS
En CSS, on fait ça grâce
à un bout de code qui
ressemble à ceci
et qu'on appelle une règle CSS
16
ce texte en rouge
Anatomie d’une règle CSS 1- Vous devez sélectionner l’élément
couleur Une règle CSS
CSS
17
ce texte en rouge
CSS
Sélecteur
CSS
• Une feuille de style = suite de règles. Propriété Valeur

• Une règle = sélecteur + déclaration
• Un sélecteur indique l'élément concerné par le style; Une déclaration
• Un déclaration est une paire propriété : valeur
• Une règle peut contenir plusieurs déclarations (un
bloc de déclarations) séparés par « ; » placé entre { }
18
ce texte en rouge
CSS
Sélecteur
CSS
Oui… Mais où mettre ces règles ? Propriété Valeur

Il existe 3 méthodes Une déclaration
19
2- Les bases du CSS Où mettre le code CSS ?
Méthode 1: Enligne
Consiste à mettre les déclarations

CSS directement dans la balise
ouvrante de l'élément concerné,
grâce à l'attribut Style.
20
Méthode 1: Enligne
Méthode 2: En-tête
Consiste à mettre les règles CSS

dans la partie Head (ou entête)
du document HTML, et ceci se
fait en insérant la déclaration CSS
dans un élément appelé style.
21
Méthode 1: Enligne Méthode 3: Fichier CSS
Méthode 2: En-tête
Consiste à mettre les règles CSS

dans un autre fichier qui porte monFichierStyles.css
l'extension .css
Dans cet exemple, nous avons mis
notre déclaration dans le fichier
"monFichierSyles.css"
et nous lui avons fait référence dans

notre fichier HTML, grâce à l’élément
Link, dans l’élément Head.
22
2- Les bases du CSS
Fonctionnement des règles CSS
Une règle CSS
Sélecteur
CSS
Plusieurs types de
sélecteurs possibles
(selon le besoin)
Propriété Valeur
-Par élément, Plusieurs valeurs
-Par id Plusieurs propriétés
Possibles (selon le besoin) possibles
-Par classe (selon le besoin)
…. -color
-background-color -blue
-font-family -red
… -yellow
….
C’est ce qu’on va détailler dans le reste de ce chapitre 23
Une règle CSS
Sélecteur
CSS
Les Sélecteurs Propriété Valeur
CSS
24
3- Les sélecteurs CSS
1- Par élément HTML
C'est pour ça que c'est une sélection

par élément, car on mentionne
directement le nom de la balise de
l'élément concerné.
CSS
CSS CSS CSS CSS CSS
25
Programmation Avancée (PRAVAN) Contrairement au code HTML précédent,
nous avons ajouté des identifiants en
3- Les sélecteurs CSS utilisant l'attribut "id".
2- Par id HTML
Si je veux sélectionner un élément, il
me suffira simplement de faire
(Identifiant) référence à son identifiant. Et pour ce
faire, dans la partie du sélecteur, je
mets un #, suivi du nom de l'attribut
cible.
CSS
CSS
CSS CSS
26
Vous devez aussi connaitre l’utilité
3- Les sélecteurs CSS d‘utiliser une sélection par identifiant.
Ici, nous avons deux éléments p. Ainsi,

2- Par id HTML
si nous avions utilisé une sélection par
élément, comme dans la première
(Identifiant) méthode les deux éléments auraient
été affectés.
CSS
CSS
CSS CSS
Mais puisque, dans cet exemple, nous

avons voulu sélectionner uniquement
le deuxième élément p, nous lui avons
donné un identifiant (à savoir parag2)
afin de le distinguer du premier, puis,
nous lui avons fait référence dans le
CSS.
27
Programmation Avancée (PRAVAN) contrairement au code HTML précédent, nous avons
ajouter des classes en utilisant l'attribut "class".
HTML
3- Par class
si je veux sélectionner un élément, il
me suffira simplement de faire
référence à sa classe. Et pour ce faire,
dans la partie du sélecteur, je mets un
point, suivi du nom de la classe cible.
CSS
CSS CSS
CSS
28
Vous devez aussi connaitre l’utilité
3- Les sélecteurs CSS d‘utiliser une sélection par classe.
1
3- Par class Imaginez que vous avez le code HTML
suivant, et que voudriez affecter le
même style pour les élément Titre1 et
Titre2 en leur donnant par exemple la
même couleur.
2
Pour cela, vous aurez simplement
besoin de leur donner la même classe,
par exemple "mesTitre", puis vous
mettez le style souhaité pour cette
classe
Et c'est ici que les classes diffèrent des
identifiants, car les identifiants sont
utilisés pour ne désigner qu'un seul
3 élément dans votre document HTML.
et les deux éléments
seront affectés. Donc, lorsque vous avez plusieurs
éléments qui partagent le même style,
il est préférable d'opter pour
l'utilisation des classes.
29
HTML
4- Par Enfant
En ciblant les enfants des
éléments. identi1
identi1
30
1- Par Elément
Une règle CSS
2- Par Id
3- Par Class Sélecteur
4- Par Enfant CSS
Nous n’avons pas vu tous
les sélecteurs possibles. Il
existe d’autres. Propriété Valeur
Voir d’autres sélecteurs ici:

https://www.w3schools.com/cssref/css_selectors.asp
31
Une règle CSS
Sélecteur
CSS
Propriété Valeur
Les Propriétés/
Valeurs
32
4- Les propriétés/valeurs
Texte color
Différentes manières d’exprimer un code couleur
33
Texte Background-color
34
Texte text-decoration
Valeur par défaut: none 35

Texte font-weight
Valeur par défaut: normal

36
Texte font-style
Valeur par défaut: normal

37
Texte font-family (La police d’écriture)
Toujours préciser une liste de polices: de la moins générique à

la plus générique (pour éviter les problème de compatibilité
dans les navigateurs)
38
HTML
Texte font-size Plusieurs unités possibles
39
Texte text-align
Valeur par défaut: left 40

Texte border
41
Listes list-style-type
42
Table Border/border-collapse
43
Les boites (Box-Model)
44
Les boites (Box-Model) En CSS, tout élément est inclus dans une boîte
45
Les boites (Box-Model) En CSS, tout élément est inclus dans une boîte
padding
border
margin
46
Les boites (Box-Model) padding
Padding-top
Padding-left
Padding-bottom
Top right bottom left
(Top&bottom) (right&left)
(Top&right&bottom&left)
47
Les boites (Box-Model) margin
margin-top
margin-left margin-right
Top right bottom left
(Top&bottom) (right&left)
(Top&right&bottom&left) margin-bottom
48
Les boites (Box-Model) height/width
height
Plusieurs unités possibles: width

Absolues : px, cm, mm…
Relatives: %, em, rem..
49
Les Affichages
display
Bloc En-ligne
50
HTML
Affichages display
Les éléments bloc,

comme h1 ont, par défaut,
CSS "display:block"
Les éléments enligne,

comme span ont, par défaut,
"display:inline"
51
HTML
Affichages display
Les élément bloc ont

CSS une hauteur/largeur
Les élément enligne n’ont

pas de hauteur/largeur
52
HTML
Affichages display
CSS On peut changer le display:
(inline, inline-block, block)
53
Les Positionnements
Position
54
Positionnement position
Par défaut:
Les éléments HTML sont déposés sur la Element 1
page suivant le flux normal (flow):
L’un après l’autres, du haut, vers Element 2 Element 3
le bas.
Et ils ont tous, par défaut:
position: static; Element 4
Element 5
55
Ne pas confondre Marge et Position
Par défaut:
Les éléments HTML sont déposés sur la
page suivant le flux normal (flow):
L’un après l’autres, du haut, vers
le bas.
Et ils ont tous, par défaut:
position: static;
Les propriété suivantes ne peuvent

dont pas êtres appliquées:
Top, Right, Left, Bottom
On peut changer le type de position 56
position: relative; Les propriétés suivantes deviennent applicables (par rapport à la
position courante): Top, Left
Top:20px
Left:60px
57
position: absolute; Les propriétés suivantes deviennent applicables (par rapport au
premier parent relative): Top, Right, Bottom, Left
10px
40px 60px
50px 58
position: fixed; L’élément reste figé sur la même position, même en scrollant.
59
Les Positionnements
Float
60
Positionnement float
La propriété float indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son
conteneur (devient flottant);
Supposons que j’ai ça

61
Div1, Div2 et
Paragraphe 1, sur la
même ligne côté à
côte
On doit:
1- changer display: inline;
2- changer float: left;
3- ajuster la largeur;
Et je veux ça
62
63
Problème:
Les éléments qui vont suivre #le_p1
Le flux orginal (paragraphe1) vont monter pour continuer le
flux normal
64
Pour corriger ça:

On efface le float dés le paragrapge 2
(#le_p2), avec :
Clear:both
65
Autres valeurs possibles

float: right;
float: none; /* valeur par défaut */

66
Découpage de la page
Display
Grid Flexbox
67
Découpage de la page display On peut utiliser la propriété Display aussi pour créer un découpage avancé
Exemple
68
Grid Propose un système de mise en page basé sur une grille, avec des lignes et des colonnes, ce
qui facilite la conception de pages Web sans avoir à utiliser le "float" et le "positionnement".
Exemple
Modèle en Grille
Colonne Colonne Colonne
Ligne
Ligne
Ligne
69
Exemple HTML Container
items
70
Grid
CSS
Nous avons créé une grille de 3 colonnes
71
Grid
CSS
Nous avons créé une grille de 3 colonnes
Nous avons rajouté des espacement entre les éléments de

la grille grâce à la propriété gap
72
Ligne 1
Grid Ligne 2 Ligne 3 Ligne 4
Exemple Ligne 1
HTML
1
Ligne 2
Ligne 3
Ligne 4
CSS
Ligne 5
Nous avons étalé la largeur de l’élément

1, de la ligne 1 jusqu’à la ligne3
Nous avons étalé la hauteur de l’élément

3, de la ligne 2 jusqu’à la ligne 5
73
Ligne 1
Grid Ligne 2 Ligne 3 Ligne 4
Ligne 1
1
Ligne 2
Ligne 3
Ligne 4
Ligne 5
Utile pour
faire ça
74
Flexbox Ou boîte flexible, facilite la conception d'une structure de mise en page flexible et réactive
sans utiliser de flottement ou de positionnement."float" et le "positionnement".
CSS
75
Une règle CSS
Sélecteur
CSS
Propriété Valeur
Nous n’avons pas vu toutes propriétés/valeurs

possibles. Il existe d’autres.
Voir d’autres propriétés/valeurs ici:

https://www.w3schools.com/cssref/default.asp
76
5
CSS Media Queries
77
5- CSS Media Queries
Par défaut, le navigateur se débrouille pour faire un
Besoin ? Avoir un rendu adapté pour chaque type de média affichage pour un large écran, qui n’est pas adapté pour les
autres médias et dimensions d’écran de la zone d’affichage
(viewport).
Ecran large (Screen)
Impression (print)
Ecran Etroit
(e.x. Mobile)
78
Par défaut, le navigateur se débrouille pour faire un
Besoin ? Avoir un rendu adapté pour chaque type de média affichage pour un large écran, qui n’est pas adapté pour les
autres médias et dimensions d’écran de la zone d’affichage
(viewport).
Ecran large (Screen)
Impression (print)
Ecran Etroit
(e.x. Mobile)
Spécifier différents styles CSS pour chaque média (mais de manière

Solution ? intelligente), en indiquant au navigateur quel style choisir pour le
média concerné. Pour cela, on utilise les media queries.
79
D’abord, on distingue les 2
Comment ça marche ? média Screen et Print
80
Comment ça marche ?
Où l’indiquer ? Méthode 1
Style2.css
2
Le mentionner dans l’entête Style1.css
du document HTML
1
On utilisera 2 documents CSS
différents pour chaque média
81
Où l’indiquer ? Méthode 2
Utiliser un seul document CSS, et

mentionner la distinction grâce à
l’utilisation de l’annotation @media
Style.css
82
Pour Screen, on peut
Comment ça marche ? distinguer les écrans selon la
dimensions d’écran de la zone
d’affichage (viewport).
Ce ne sont pas les dimensions de l’écran,

mais plutôt de la zone d’affichage
(viewport), qui peut varier par exemple
selon l’inclinaison de l’appareil et son type
Téléphone
Navigateur
Tablette
83
Pour Screen, on peut
Comment ça marche ? distinguer les écrans selon la
dimensions d’écran de la zone
d’affichage (viewport).
Ce ne sont pas les dimensions de l’écran,

mais plutôt de la zone d’affichage
(viewport), qui peut varier par exemple
selon l’inclinaison de l’appareil et son type
Téléphone
Navigateur
Tablette
Utiliser un seul document CSS, et

Où l’indiquer ? mentionner la distinction grâce à
l’utilisation de l’annotation @media Style.css
84
Téléphone
Navigateur
Tablette
Donc on aura fait une Redimensionner, masquer, réduire, agrandir

conception réactive ou déplacer le contenu afin de le rendre
("Responsive design") esthétique sur n'importe quel écran.
85
6
Règles de priorité
86
6- Règles de priorité
Scénario 1 Nous avons le même élément sélectionné à différent endroit (context) du CSS, pour changer la même propriété "color".
HTML Fichier Externe

CSS
Dans le header
En-ligne
Quelle règle va être

considérée par le navigateur
????
87
3
CSS
2
Dans le header
1
En-ligne
Solution Priorité selon le contexte
Le navigateur applique des 1- Règle enligne

règles de priorité prédéfinies. 2- Règle dans le header
3- Règle dans le fichier CSS
88
3
CSS
2
Dans le header
1
En-ligne

89
3
CSS
2
Dans le header
1
En-ligne

90
CSS
Scénario 2 Nous avons le même élément sélectionné avec différents sélecteurs.
Par élément
HTML
Par classe
Par identifiant
Quelle règle va être

considérée par le navigateur
????
91
CSS
3
Par élément
HTML
2
Par classe
1
Par identifiant
Solution Priorité selon le spécificité
Le navigateur applique des 1- Par Identifiant

règles de priorité prédéfinies. 2- Par Classe
3- Par Element
92
CSS
3
Par élément
HTML
2
Par classe
1
Par identifiant

3- Par Element
93
CSS
3
Par élément
HTML
2
Par classe
1
Par identifiant

3- Par Element
94
CSS
3
Par élément
HTML
2
Par classe
1
Par identifiant
Mais la déclaration en-ligne
l’emporte si elle est définie
0
En-ligne

3- Par Element
95
CSS
HTML
Les priorités sont appliquées
sur les propriétés.
C’est pour ça que la propriété
Background-color de l’élément
est prise, car elle n’est pas
déclarée ailleurs.
En-ligne
Solution
Le navigateur applique des
règles de priorité prédéfinies.
96
CSS
HTML
Lorsque les priorités sont de
même niveau, le navigateur
sélectionne la dernière
déclaration rencontrée.
Solution
97
CSS
HTML
Lorsque les priorités sont de
même niveau, le navigateur
sélectionne la dernière
déclaration rencontrée.
Mais la déclaration en-ligne

l’emporte si elle est définie
0
En-ligne
Solution
98
Liens utiles
W3Schools
https://www.w3schools.com/
Mozilla Developer Network

https://developer.mozilla.org/fr/docs/Learn/HTML
Ma chaine Youtube (Bingo Web Academy)

https://youtube.com/playlist?list=PL6OcOlxBo0fDTwv7McJpGwq_t35PM6z70
99
La suite ?
1- Différents contextes de CSS (en-ligne, header, fichier)
2- Les sélecteurs
En TP 3- Les propriétés/valeurs
4- Les média queries
5- Les priorités
Un site Statique
100
La suite ? Prochain cours
Les bases de données Chapitre 5 Chapitre 4 Site dynamique
Serveur
Web
Base de données
Single Page App (SPA) Chapitre 6 Chapitre 2 Site statique

HTML CSS
Chapitre 3 Chapitre 1
Interactivité Navigateur
(programmation JavaScript Introduction
côté client)
101
Merci
102

Chapitre2 CSS

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre2 CSS

Transféré par

Droits d'auteur :

Formats disponibles

Master 1 –ESE

Programmation Avancée (PRAVAN)

Les bases de données Chapitre 5 Chapitre 4 Site dynamique

Single Page App (SPA) Chapitre 6 Chapitre 2 Site statique

1. Notions de base du Web

Si vous voulez créer

Est ce que c'est suffisant

Rendre la page plus présentable ? Images

CSS: Cascading Style Sheets

Pourquoi cette dissociation?

Prenons l'exemple suivant.

Dans notre exemple, ça sera l'élément h1

L’élément a plusieurs propriétés.

et qu'on appelle une règle CSS

• Une feuille de style = suite de règles. Propriété Valeur

Oui… Mais où mettre ces règles ? Propriété Valeur

Consiste à mettre les déclarations

Consiste à mettre les règles CSS

Méthode 1: Enligne Méthode 3: Fichier CSS

Consiste à mettre les règles CSS

et nous lui avons fait référence dans

Une règle CSS

Les Sélecteurs Propriété Valeur

C'est pour ça que c'est une sélection

CSS CSS CSS CSS CSS

Ici, nous avons deux éléments p. Ainsi,

Mais puisque, dans cet exemple, nous

Voir d’autres sélecteurs ici:

Une règle CSS

Différentes manières d’exprimer un code couleur

Valeur par défaut: none 35

Valeur par défaut: normal

Valeur par défaut: normal

Toujours préciser une liste de polices: de la moins générique à

Valeur par défaut: left 40

Les boites (Box-Model)

Top right bottom left

Top right bottom left

Plusieurs unités possibles: width

Les éléments bloc,

Les éléments enligne,

Les élément bloc ont

Les élément enligne n’ont

Les propriété suivantes ne peuvent

Supposons que j’ai ça

Pour corriger ça:

Autres valeurs possibles

float: none; /* valeur par défaut */

Colonne Colonne Colonne

Nous avons créé une grille de 3 colonnes

Nous avons créé une grille de 3 colonnes

Nous avons rajouté des espacement entre les éléments de

Nous avons étalé la largeur de l’élément

Nous avons étalé la hauteur de l’élément

Une règle CSS

Nous n’avons pas vu toutes propriétés/valeurs

Voir d’autres propriétés/valeurs ici:

Spécifier différents styles CSS pour chaque média (mais de manière

Utiliser un seul document CSS, et

Ce ne sont pas les dimensions de l’écran,

Ce ne sont pas les dimensions de l’écran,

Utiliser un seul document CSS, et

Donc on aura fait une Redimensionner, masquer, réduire, agrandir