CSS-EST Meknès-2021 - Export

Prof.
Morad HAJJI
CSS
Cascading Style Sheets
1
Plan
1 Introduction
2 Sélecteurs
3 Couleurs
4 Unités de mesure
5 Modèle de boîtes
6 Formater du texte
7 Positionnement
8 Listes
9 Arrière-plans (Backgrounds)
10 Boîtes flexibles (Flexbox)
2
Introduction
CSS est un langage basé sur des règles : on définit des règles de styles destinées à
des éléments ou des groupes d'éléments particuliers dans la page HTML.
3
Introduction
Anatomie d’une règle CSS – Syntaxe
Sélecteur h1 {
font-weight: bold;
color: red;
{
{
} Propriété Valeur
Déclaration
4
Introduction
Il existe trois façons pour insérer des styles :
1. CSS externe
2. CSS interne
3. CSS en ligne
<head>
Déclaration dans un fichier <link rel="stylesheet" href="style.css">
<style>
Script dans le header h1{ color: red; }
</style>
</head>
<body>
Déclaration directe <h1 style="color: red;"> </h1>
5
Sélecteurs
Un sélecteur CSS est la partie d’une règle CSS qui désigne les éléments d'un
document concernés par cette règle. Les éléments correspondants auront le style
spécifié par la règle qui est appliquée à ces éléments.
Les sélecteurs déterminent les éléments auxquels une mise en forme (style) est
appliquée.
6
Sélecteurs
Types de sélecteurs
 Sélecteurs de base  Combinaisons

o Sélecteurs de type : elementname o Sélecteurs de frère adjacent : A + B
o Sélecteurs de classe : .classname o Sélecteurs de voisins généraux : A ~ B
o Sélecteurs d'ID : #idname o Sélecteurs d'enfant : A > B
o Sélecteurs universels : * o Sélecteurs descendants : A B
o Sélecteurs d'attribut : [attr=value]
 Pseudo-éléments : ::pseudo-élément (::before (:before))

 Pseudo-classes : :pseudo-classe (:hover)
7
Sélecteurs
1. Sélecteurs de type
Les sélecteurs de type ciblent des éléments en fonction de leur nom. Ainsi, lorsqu'un
sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit
tous les nœuds avec ce nom) contenus dans le document.
 Syntaxe :
 Exemple :
8
Sélecteurs
2. Sélecteurs de classe
Les sélecteurs de classe permettent de cibler des éléments d'un document en

fonction du contenu de l'attribut class de chaque élément.
 Syntaxe :
 Exemple :
9
Sélecteurs
3. Sélecteurs d'ID
Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un

élément grâce à la valeur de son attribut id. Il faut que la valeur soit exactement la
même que celle du sélecteur pour que l'élément soit effectivement ciblé.
 Syntaxe :
 Exemple :
10
Sélecteurs
4. Sélecteurs universels
L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de

n'importe quel type.
 Syntaxe :
 Exemple :
11
Sélecteurs
5. Sélecteurs d'attribut
Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un

attribut ou selon la valeur donnée d'un attribut.
Syntaxe Signification
[attr] Permet de cibler un élément qui possède un attribut attr.
 Syntaxe : Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement
[attr=valeur]
valeur.
[attr~=valeur] Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette
forme permet de fournir une liste de valeurs, séparées par des blancs, à tester.
[attr^=valeur] Permet de cibler un élément qui possède un attribut attr dont la valeur commence par
valeur.
[attr$=valeur] Permet de cibler un élément qui possède un attribut attr dont la valeur se termine par
valeur.
[attr*=valeur] Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au
moins une occurrence de valeur dans la chaîne de caractères. 12
Sélecteurs
5. Sélecteurs d'attribut – exemples
Exemples :
13
Sélecteurs
6. Sélecteurs de frère adjacent : A + B
Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci

« suit » un élément donné et que les deux éléments sont les fils d'un même élément
parent.
 Syntaxe :
 Exemple :
14
Sélecteurs
7. Sélecteurs de voisins généraux : A ~ B
Le combinateur ~ permet de cibler un élément si celui-ci correspond au second

sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément
correspondant au premier sélecteur qui partage le même parent. Les deux éléments
sont des fils d'un même élément parent, des voisins immédiats ou pas.
 Syntaxe :
 Exemple :
15
Sélecteurs
7. Sélecteurs d'enfant : A > B
Le combinateur > sépare deux sélecteurs et cible seulement les éléments

correspondant au second sélecteur qui sont des enfants directs des éléments ciblés
par le premier sélecteur.
 Syntaxe :
 Exemple :
16
Sélecteurs
8. Sélecteurs descendant : A B
Le combinateur de descendance, représenté par un blanc (ou plusieurs blancs à la

suite) permet de combiner deux sélecteurs (sous la forme sélecteur₁ sélecteur₂) afin
de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci
ont un élément ancêtre qui correspond au premier sélecteur.
 Syntaxe :
 Exemple :
17
Sélecteurs
9. Pseudo-éléments : ::pseudo-élément
Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en

forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément
::first-line permettra de ne cibler que la première ligne d'un élément visé par le
sélecteur.
 Syntaxe :
 Exemple :
18
Sélecteurs
9. Pseudo-éléments : ::pseudo-élément
Les principaux pseudo-éléments
 ::after (:after)
 ::before (:before)
 ::first-letter (:first-letter)
 ::first-line (:first-line)
19
Sélecteurs
9. Pseudo-classes : :pseudo-classe
Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer
l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. Par
exemple, la pseudo-classe :hover permet d'appliquer une mise en forme spécifique
lorsque l'utilisateur survole l'élément ciblé par le sélecteur.
 Syntaxe :  Exemple :
20
Sélecteurs
9. Pseudo-classes : :pseudo-classe
Liste de quelques pseudo-lasses :
:checked :disabled :enabled
:focus :hover :last-child
:nth-last-child() :nth-last-of-type() :first-child
:last-of-type :first-of-type :nth-of-type()
:nth-child() :read-only :visited
Exemple :
21
Couleurs
Les couleurs sont spécifiées à l'aide de noms (mots-clés) de couleurs prédéfinis ou

de valeurs exprimées avec l’un des systèmes : RGB, RGBA, HEX, HSL ou HSLA.
22
Couleurs
1. Nom de couleur
En CSS, une couleur peut être spécifiée en utilisant un nom de couleur prédéfini :
23
Couleurs
2. RGB
Une valeur de couleur RGB représente les sources de lumière Red (Rouge), Green
(Verte) et Blue (Bleue). En CSS, une couleur peut être spécifiée en tant que valeur
RGB en utilisant la formule :
RGB (red, green, blue)
Chaque paramètre (rouge, vert et bleu) définit l'intensité de la couleur entre 0 et 255.
Pour afficher le noir, définissez tous les paramètres de couleur à 0, comme ceci: rgb (0, 0, 0).
Pour le blanc, définissez tous les paramètres de couleur à 255, comme ceci: rgb (255, 255, 255).
24
Couleurs
2. RGB
Exemples :
25
Couleurs
3. RGBA
Les valeurs de couleur RGBA sont une extension des valeurs de couleur RGB avec
un canal alpha qui spécifie l'opacité d'une couleur. Une valeur de couleur RGBA est
spécifiée avec la formule :
RGBA(red, green, blue, alpha)
Le paramètre alpha est un nombre compris entre 0.0 (totalement transparent) et 1.0
(pas du tout transparent).
26
Couleurs
3. RGBA
Exemples :
27
Couleurs
4. HEX
En CSS, une couleur peut être spécifiée à l'aide d'une valeur hexadécimale sous la
forme :
#RRGGBB
Où RR (rouge), GG (green) et BB (blue) sont des valeurs hexadécimales comprises

entre 00 et FF (identique à une décimale entre 0 et 255).
28
Couleurs
4. HEX
Exemples
29
Couleurs
5. HSL
En CSS, une couleur peut être spécifiée à l'aide de la teinte, de la saturation et de la

luminosité (HSL : hue, saturation, lightness) sous la forme :
HSL (teinte, saturation, légèreté)
La teinte est un degré sur la roue chromatique de 0 à 360. 0 est rouge, 120 est vert et
240 est bleu. La saturation est une valeur en pourcentage, 0% signifie une nuance de
gris et 100% est la couleur complète. La clarté est aussi un pourcentage, 0% est noir,
50% n'est ni clair ni foncé, 100% est blanc.
30
Couleurs
5. HSL
31
Couleurs
5. HSL
Exemples
32
Couleurs
6. HSLA
Les valeurs de couleur HSLA sont une extension des valeurs de couleur HSL avec un
canal alpha qui spécifie l'opacité d'une couleur. Une valeur de couleur HSLA est
spécifiée sous la forme :
HSLA (teinte, saturation, légèreté, alpha)
Le paramètre alpha est un nombre compris entre 0.0 (totalement transparent) et 1.0
(pas du tout transparent):
33
Couleurs
6. HSLA
Exemples :
34
Unités de mesure
En CSS, une longueur peut être exprimée avec différentes unités de mesure.
De nombreuses propriétés CSS prennent des valeurs de « longueur », telles que la

largeur, les marges externes, les marges internes, la taille de la police, etc.
La longueur est un nombre suivi d'une unité de longueur, telle que 12px, 3em, etc.
Il existe deux types d'unités de longueur : absolue et relative.
Remarque : il ne doit pas y avoir d’espaces entre le nombre et l'unité de mesure. En

plus, si la langueur vaut la valeur 0, l'unité peut être omise.
35
Unités de mesure
1. Unités de langueur absolue
Les unités de longueur absolue sont fixes et une longueur exprimée dans l'une de ces
unités apparaîtra exactement avec cette taille.
Les unités de longueur absolue ne sont pas recommandées pour une utilisation à
l'écran, car les tailles d'écran varient énormément. Cependant, ils peuvent être utilisés
si le support de sortie est connu, par exemple pour la mise en page d'impression.
36
Unités de mesure
1. Unités de langueur absolue

Dans le tableau, figurent des unités de langueur absolue :
Unit Description
cm centimètres
mm millimètres
in inches (1in = 96px = 2.54cm)
px * pixels
pt points (1pt = 1/72 de 1in)
pc picas (1pc = 12 pt)
* Les pixels (px) sont relatifs à l'appareil de visualisation.

37
Unités de mesure
2. Unités de langueur relative
Les unités de longueur relative spécifient une longueur par rapport à une autre
propriété de longueur. Les unités de longueur relative s'adaptent mieux entre les
différents supports de rendu.
38
Unités de mesure
2. Unités de langueur relative

Dans le tableau, figurent des unités de langueur relative :
Unit Description
% Par rapport à l'élément parent
Par rapport à la taille de la police de l'élément (2em signifie 2 fois la taille
em
de la police actuelle)
rem Par rapport à la taille de la police de l'élément racine
ex Par rapport à la hauteur x de la police actuelle (rarement utilisée)
ch Par rapport à la largeur du "0" (zéro)
vw Par rapport à 1% de la largeur de la fenêtre
vh Par rapport à 1% de la hauteur de la fenêtre
vmin Par rapport à 1% de la plus petite dimension de la fenêtre
vmax Par rapport à 1% de la plus grande dimension de la fenêtre 39
Modèle de boîtes
En CSS, le terme « modèle de boîte » est utilisé pour désigner la conception et de

mise en page d’un document HTML. Chaque élément HTML 5 visuel dans le
navigateur est englobé par une zone rectangulaire nommée boîte.
40
Modèle de boîtes
Explication des différentes parties:

• Contenu : le contenu de la boîte représente le contenu de l’élément HTML tels que
des textes, des images, des vidéos, etc.
• Marge interne (padding) : crée une zone autour du contenu. Le padding est
transparent (invisible).
• Bordure (border) : un cadre (bordure) qui entoure le padding et le contenu.
• Marge externe (marge) : crée une zone en dehors de la bordure. La marge
entoure la bordure, le padding et le contenu. Elle est transparente (invisible).
41
Modèle de boîtes
1. Marge
Les marges sont utilisées pour créer un espace transparent autour des éléments, en
dehors de toute bordure définie.
Les marges permettent d’aérer le contenu d’une page en créant de l’espace entre le
rendu d’un élément et ses voisins.
Avec CSS, vous avez un contrôle total sur les marges. Il existe des propriétés pour
définir la marge de chaque côté d'un élément (haut, droite, bas et gauche).
42
Modèle de boîtes
1. Marge
a. Définition d’une marge – seule déclaration
Dans une règle CSS, on peut définir les épaisseurs (les tailles) des marges des
quatre côtés d’un élément. La syntaxe est la suivante :
Exemple :
43
Modèle de boîtes
1. Marge
b. Définition d’une marge individuelle – plusieurs déclarations
Dans une règle CSS, on peut définir individuellement les épaisseurs (les tailles) des
marges des quatre côtés d’un élément. La syntaxe est la suivante :
Exemple :
44
Modèle de boîtes
1. Marge
c. Valeur automatique
Vous pouvez définir la propriété margin avec la valeur auto pour centrer un élément
horizontalement dans son conteneur.
L'élément occupera alors la largeur spécifiée et l'espace restant sera divisé

également entre les marges gauche et droite.
45
Modèle de boîtes
2. Bordure
Les bordures permettent d’obtenir des effets visuels qui attirent l’attention dans le but
de mettre en évidence la structure d’une page.
En CSS, nous pouvons spécifier les propriétés d’une bordure comme le style, la
largeur et la couleur.
46
Modèle de boîtes
2. Bordure
a. Style de la bordure (border-style)
La propriété border-style spécifie le type de bordure à afficher :
 dotted : définit une bordure pointillée ;

 dashed : définit une bordure en pointillés ;
 solid : définit une bordure solide ;
 double : définit une double bordure ;
 groove : définit une bordure rainurée 3D ;
 ridge : définit une bordure striée 3D.
La propriété border-style peut avoir de une à quatre valeurs (pour la bordure

supérieure, la bordure droite, la bordure inférieure et la bordure gauche). 47
Modèle de boîtes
2. Bordure
a. Style de la bordure (border-style)
Exemples :
48
Modèle de boîtes
2. Bordure
b. Épaisseur de la bordure (border-width)
La propriété border-width spécifie l’épaisseur des quatre bordures. L’épaisseur peut

être définie comme une taille spécifique (en px, pt, cm, em, etc.) ou en utilisant l'une
des trois valeurs prédéfinies: thin (mince), medium (moyen) ou thick (épais).
La propriété border-width peut avoir de une à quatre valeurs (pour la bordure

supérieure, la bordure droite, la bordure inférieure et la bordure gauche):
49
Modèle de boîtes
2. Bordure
b. Épaisseur de la bordure (border-width)
Exemples :
50
Arrière plan
Les propriétés d'arrière-plan CSS sont utilisées pour ajouter des effets de fond aux
éléments HTML. Parmi les propriétés d'arrière-plan CSS, se trouvent :
 background-color
 background-image
 background-repeat Arrière-plan bleu
 background-attachment
 background-position
 background-size
 background (propriété raccourcie des autres propriétés)
51
Arrière plan
1. Backgroun-color
La propriété background-color spécifie la couleur d'arrière-plan d'un élément HTML.

Cette spécification est établie au moyen de n’importe quel système (RGB, etc.).
La propriété opacity spécifie l'opacité et elle peut prendre une valeur comprise entre
0.0 et 1.0. Mais, cette propriété affecte aussi le contenu de l’élément concerné.
Cependant, on peut spécifier l’opacité de l’arrière plan en exprimant la valeur de la

propriété backgroun-color au moyen du système RGBA ou du système HSLA. Cette
manière de procéder n’affecte que l’opacité de l’arrière plan.
52
Arrière plan
1. Backgroun-color
Exemples :
53
Arrière plan
2. Background-image
La propriété background-image spécifie une image à utiliser comme arrière-plan

d'un élément. Par défaut, l'image est répétée pour couvrir tout l'élément.
Exemple :
54
Arrière plan
3. Background-repeat
Par défaut, la propriété background-image répète une image à la fois

horizontalement et verticalement (valeurs : repeat, no-repeat, repeat-x ou repeat-y).
Exemple :
Image dégradée
gbg.png
55
Arrière plan
Image dégradée
gbg.png
3. Background-repeat
Exemples :
56
Arrière plan
4. Background-attachment
La propriété background-attachment spécifie si l'image d'arrière-plan doit défiler ou

se fixer (ne défilera pas avec le reste de la page). Parmi ses valeurs possibles :
 Local : l’image de fond va se déplacer avec le contenu de l’élément auquel elle

est associée et défiler dans la page avec l’élément auquel elle est associée.
 Scroll : valeur par défaut. L’image de fond ne défile pas avec le contenu de
l’élément auquel elle est associée mais défile avec l’élément dans la page.
 Fixed : l’image de fond restera fixe par rapport à son conteneur quelle que soit
la taille de l’élément auquel elle est associée.
57
Arrière plan
4. Background-attachment
Exemples :
58
Arrière plan
5. Background-position
La propriété CSS background-position permet de définir la position à partir de

laquelle une image de fond doit s’afficher relativement à la position définie avec
background-origin. Parmi les valeurs qu’elle peut prendre :
 top, right, bottom, left ou center;

 X Y : où x (axe horizontal) et y (axe vertical) sont des longueurs ;
 right x top y, left x top y, right x top y, … etc.
Parmi les valeurs que peut prendre background-origin :

 border-box;
 padding-box;
 content-box; 59
Arrière plan
5. Background-position
Exemples :
60
Arrière plan
6. Background-size
La propriété CSS background-size permet de gérer la taille des images de fond d’un
élément. Cette propriété peut prendre une ou deux valeurs de longueur. En cas de
valeur relative, la dimension est exprimée en fonction de la taille du fond (du
conteneur) et non pas de la taille originale de l’image.
61
Arrière plan
6. Background-size
En plus, la propriété background-size peut être définie avec un mot-clé, tell que :
 auto : l'image est redimensionnée afin que ses proportions soient conservées.
 contain : l'image est redimensionnée afin qu'elle soit la plus grande possible et
que l'image conserve ses proportions. L'image est contenue dans le conteneur.
 Cover : l’image est redimensionnée afin de couvrir tout l’espace (en largeur)
dans le conteneur tout en conservant ses proportions de base. L’image peut
déborder du conteneur afin d’occuper toute la surface de fond.
62
Arrière plan
6. Background-size
background-repeat: no-repeat; background-repeat: no-repeat;
Exemples : background-size: contain; background-size: cover;
background: url(oualili.jpg); Image originale :

background-repeat: no-repeat;
63
Formater du texte
Propriété Description Syntaxe et Valeurs

Explication desNom
font-family différentes
de police parties: serif, sans-serif, monospace
font-size Taille du texte 1.3em, 16px, 120%...
font-weight Niveau du gras bold, …
font-style Style d’écriture du texte italic, …
text-decoration Soulignement, ligne au-dessus ou barré underline, overline, line-through, blink
text-transform Transformation du texte capitalize, lowercase, uppercase
font Super propriété de police. Combine : font-weight, font-style, font-size,...
text-align Alignement horizontal left, center, right, justify
Alignement vertical (cellules de tableau baseline, middle, sub (indice), super
vertical-align
ou éléments inline-block uniquement) (exposant), top, bottom
line-height Hauteur de ligne 18px, 120%, normal...
text-indent Indentation 25px
5px 5px 2px blue
text-shadow Ombre de texte
(horizontale, verticale, fondu, couleur)
direction Direction d’écriture rtl (right to left), ltr (left to right), …
64
Formater du texte
Exemples :
65
Positionnement
La propriété position spécifie le type de la méthode du positionnement utilisé pour un

élément. Il existe cinq valeurs de position différentes :
• static
• Relative
• absolute
• fixed
• sticky
Les éléments sont ensuite positionnés à l'aide des propriétés top, bottom, left et
right. Cependant, ces propriétés ne fonctionneront que si la propriété de position est
définie en premier.
66
Positionnement
1. Satatic
Les éléments HTML sont positionnés par défaut en statiques selon le flux normal
opéré par les navigateurs. Les éléments positionnés statiques ne sont pas affectés
par les propriétés haut, bas, gauche et droite (top, bottom, left et right).
Un élément avec position: static n'est pas positionné d'une manière particulière ; il
est toujours positionné selon le flux normal de la page : les éléments de type block se
placent les uns en dessous des autres et les éléments de type inline se placent les
uns à côté des autres.
67
Positionnement
2. Relative
Un élément avec "position: relative" est positionné par rapport à sa position

normale, mais il reste dans le flux du positionnement. La définition des propriétés top,
bottom, left et right d'un élément positionné de manière relative le fera éloigner de
sa position normale. Les autres contenus ne seront pas ajustés pour s'insérer dans
l’espace libéré par l'élément.
68
Positionnement
3. Absolute
Un élément avec "position: absolute" est positionné par rapport à l'ancêtre

positionné le plus proche. Le positionnement absolu crée un élément indépendant du
reste du document.
Les éléments définis en position absolue sont retirés du flux normal et se

positionnent à l’emplacement exact défini par le concepteur. Les autres contenus
seront ajustés pour s'insérer dans l’espace libéré par l'élément.
69
Positionnement
3. Absolute
Si un élément positionné absolu n'a pas d'ancêtres positionnés, il utilise le corps du

document et se déplace avec le défilement de la page.
Remarque : Un élément « positionné » est un élément dont la position est différente

de static.
70
Positionnement
3. Fixed
Un élément avec "position: fixed" est positionné par rapport à la fenêtre, ce qui
signifie qu'il reste toujours au même endroit même si la page défile. Les propriétés
top, bottom, left et right sont utilisées pour positionner l'élément.
Les éléments définis en position fixe sont retirés du flux normal et se positionnent à
l’emplacement exact défini par le concepteur. Les autres contenus seront ajustés
pour s'insérer dans l’espace libéré par l'élément.
71
Positionnement
4. Sticky
Un élément avec "position: sticky" est positionné en fonction de la position de

défilement de l'utilisateur.
Un élément sticky bascule entre positionnement relatif et fixe en fonction de la

position de défilement. Il est positionné relatif jusqu'à ce qu'une position de décalage
donnée soit rencontrée dans la fenêtre puis il se "colle" en place (comme position:
fixed).
72
Listes
Les propriétés CSS d’un élément de type liste :
Propriété Description
list-style-type Spécifie le type de marqueur d'élément de liste
list-style-image Spécifie une image comme marqueur d'élément de liste
list-style-position Spécifie la position des marqueurs d'élément de liste (puces)
list-style Définit toutes les propriétés d'une liste dans une seule déclaration
73
Listes
Exemples :
74
Boîtes flexibles (Flexbox)
1. Mode d’affichage : display
La propriété display définit le type d'affichage utilisé pour le rendu d'un élément (de
bloc ou en ligne) et la disposition utilisée pour ses éléments fils : grid (grille) ou flex
(boîtes flexibles).
Le type d'affichage donné par display possède deux composantes : le type

d'affichage extérieur (display-outside) qui définit comment la boîte participe au flux
(block, inline, etc.) et le type d'affichage intérieur (display-inside) qui définit
l'organisation des éléments enfants (flex, table, etc.).
75
1. Mode d’affichage : display

Syntaxe : Valeurs de type <display-outside> display: inline;
display: block;
Valeurs de type <display-inside> display: flow;
display: table;
display: grid;
display: flow-root;
display: flex;
Combinaison de valeurs display: block flow;
<display-outside> et <display-inside> display: inline table;
Valeurs de type <display-legacy> display: inline-block;
display: inline-flex;
display: inline-grid;
76
2. Conteneur flexible
Un conteneur flexible possède la propriété display définie à flex (display: flex). Les
propriétés d’un conteneur flexible sont :
flex-direction Spécifie la direction des éléments flexibles à l'intérieur d'un conteneur flexible
Spécifie si les éléments flexibles doivent être enveloppés ou non sur une ligne
flex-wrap
flexible s'il n'y a pas assez de place pour eux.
flex-flow Une propriété raccourcie pour flex-direction et flex-wrap
Permet d’aligner verticalement les éléments flexibles lorsque les éléments
align-items
n'utilisent pas tout l'espace disponible sur l'axe transversal
Modifie le comportement de la propriété flex-wrap. Il est similaire à align-items,
align-content mais au lieu d'aligner les éléments flexibles, il permet d’aligner les lignes
flexibles
Permet d’aligner horizontalement les éléments flexibles lorsque les éléments
justify-content 77
n'utilisent pas tout l'espace disponible sur l'axe principal
2. Conteneur flexible
Exemples :
flex-direction (column, column-
reverse, row, row-reverse)
flex-wrap (wrap, nowrap)
align-items (flex-start, center,

baseline, flex-end)
align-content (center, flex-end, flex-

start, space-around, space-between)
justify-content(center, flex-start,
space-around) 78
3. Éléments Flex (Flex Items)
Les éléments enfants directs d'un conteneur flexible (flex) deviennent

automatiquement des éléments flexibles (flex). Des propriétés des éléments flexibles :
Spécifie l'alignement d'un élément flexible (remplace la propriété align-items du
align-self conteneur flex)
Spécifie la croissance d'un élément flexible par rapport au reste des éléments flex à
flex-grow l'intérieur du même conteneur.
Spécifie dans quelle mesure un élément flexible se rétrécira par rapport au reste des
flex-shrink éléments flex à l'intérieur du même conteneur
flex-basis Spécifie la longueur initiale d'un élément flexible
flex Une propriété abrégée pour les propriétés flex-grow, flex-shrink et flex-basis.
order Spécifie l'ordre des éléments flex à l'intérieur du même conteneur
79
3. Éléments Flex (Flex Items)

Exemples : flex-grow
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 9">2</div>
flex-shrink
<div style="flex-shrink: 0">1</div>
<div>2</div>
flex-basis
<div style="flex-basis: 150px">1</div>
<div>2</div>
Order
<div style="order:1">1</div>
80
4. Conception adaptative (Responsive design)
Les CSS Media Queries permettent de créer différentes mises en page pour
différentes tailles d'écran et différents appareils.
Exemple :
81
4. Conception adaptative (Responsive design)
82

CSS-EST Meknès-2021 - Export

Transféré par

Informations du document

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

CSS-EST Meknès-2021 - Export

Transféré par

Droits d'auteur :

Formats disponibles

Prof.

10 Boîtes flexibles (Flexbox)

Anatomie d’une règle CSS – Syntaxe

Il existe trois façons pour insérer des styles :

 Sélecteurs de base  Combinaisons

 Pseudo-éléments : ::pseudo-élément (::before (:before))

Les sélecteurs de classe permettent de cibler des éléments d'un document en

Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un

L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de

Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un

5. Sélecteurs d'attribut – exemples

6. Sélecteurs de frère adjacent : A + B

Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci

7. Sélecteurs de voisins généraux : A ~ B

Le combinateur ~ permet de cibler un élément si celui-ci correspond au second

7. Sélecteurs d'enfant : A > B

Le combinateur > sépare deux sélecteurs et cible seulement les éléments

Le combinateur de descendance, représenté par un blanc (ou plusieurs blancs à la

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en

Les couleurs sont spécifiées à l'aide de noms (mots-clés) de couleurs prédéfinis ou

RGBA(red, green, blue, alpha)

Où RR (rouge), GG (green) et BB (blue) sont des valeurs hexadécimales comprises

En CSS, une couleur peut être spécifiée à l'aide de la teinte, de la saturation et de la

HSL (teinte, saturation, légèreté)

HSLA (teinte, saturation, légèreté, alpha)

De nombreuses propriétés CSS prennent des valeurs de « longueur », telles que la

Il existe deux types d'unités de longueur : absolue et relative.

Remarque : il ne doit pas y avoir d’espaces entre le nombre et l'unité de mesure. En

1. Unités de langueur absolue

1. Unités de langueur absolue

* Les pixels (px) sont relatifs à l'appareil de visualisation.

2. Unités de langueur relative

2. Unités de langueur relative

En CSS, le terme « modèle de boîte » est utilisé pour désigner la conception et de

Explication des différentes parties:

L'élément occupera alors la largeur spécifiée et l'espace restant sera divisé

La propriété border-style spécifie le type de bordure à afficher :

 dotted : définit une bordure pointillée ;

La propriété border-style peut avoir de une à quatre valeurs (pour la bordure

La propriété border-width spécifie l’épaisseur des quatre bordures. L’épaisseur peut

La propriété border-width peut avoir de une à quatre valeurs (pour la bordure

La propriété background-color spécifie la couleur d'arrière-plan d'un élément HTML.

Cependant, on peut spécifier l’opacité de l’arrière plan en exprimant la valeur de la

La propriété background-image spécifie une image à utiliser comme arrière-plan

Par défaut, la propriété background-image répète une image à la fois

La propriété background-attachment spécifie si l'image d'arrière-plan doit défiler ou

 Local : l’image de fond va se déplacer avec le contenu de l’élément auquel elle

La propriété CSS background-position permet de définir la position à partir de

 top, right, bottom, left ou center;

Parmi les valeurs que peut prendre background-origin :

background: url(oualili.jpg); Image originale :

Propriété Description Syntaxe et Valeurs

La propriété position spécifie le type de la méthode du positionnement utilisé pour un

Un élément avec "position: relative" est positionné par rapport à sa position

Un élément avec "position: absolute" est positionné par rapport à l'ancêtre

Les éléments définis en position absolue sont retirés du flux normal et se

Si un élément positionné absolu n'a pas d'ancêtres positionnés, il utilise le corps du

Remarque : Un élément « positionné » est un élément dont la position est différente

Un élément avec "position: sticky" est positionné en fonction de la position de

Un élément sticky bascule entre positionnement relatif et fixe en fonction de la

Les propriétés CSS d’un élément de type liste :

list-style-type Spécifie le type de marqueur d'élément de liste

list-style-image Spécifie une image comme marqueur d'élément de liste

list-style-position Spécifie la position des marqueurs d'élément de liste (puces)