CMS
Centent Management System
Système de gestion de contenu
S5 - 3ème année
Pr. Brahim HMEDNA
FS Agadir 2024 - 2025
Partie II :
Langage CSS TP2
Plan du cours
1. Introduction
2. Intégration du code CSS
3. Sélecteurs
4. Pseudo-classe
5. Box model
6. FlexBox
4
Définition
CSS : Cascading Style Sheets
Feuilles de style en cascade
Un langage permettant la description de la présentation
des pages HTML.
Objectifs
Séparation du contenu et de la présentation
Rendre la page plus attractive
Réduire la complexité du HTML
Adaptation aux différents appareils
Identifier la page avec CSS
1 2 3
Anatomie d'une règle CSS
Le CSS fonctionne en associant des règles aux éléments HTML.
Une règle CSS contient deux parties : un sélecteur et une déclaration.
Déclaration
sélecteur {
propriété : valeur ;
}
Un sélecteur permet de cibler un ou plusieurs éléments HTML
une déclaration indique au navigateur comment afficher l'élément ciblé
par le sélecteur
Anatomie d'une règle CSS
h1 {
color : red ;
font-family : Arial, vendara ;
font-size : 20px ;
}
Plan du cours
1. Introduction
2. Intégration du code CSS
3. Sélecteurs
4. Pseudo-classe
5. Box model
6. FlexBox
Intégrer du CSS à du code HTML
CSS interne CSS externe
CSS inline
(dans une balise (feuille de style
(dans les balises HTML)
<style> séparée)
CSS inline
(dans les balises HTML)
<body>
<h1 style= "color: #4a4a4a;" >
L'importance du CSS
</h1>
<p style= "color: #CC0033;">
Le CSS est un élément crucial dans le développement web
</p>
</body>
<head>
<title> CSS </title> CSS interne
<meta charset="utf-8"> (dans une balise
<style>
<style>
h1{color: #4a4a4a;}
p {color: #cc0033;}
</style>
<head>
<body>
<h1>
L'importance du CSS
</h1>
<p>
Le CSS est un élément crucial dans le développement web
</p>
</body>
[Link] [Link] CSS externe
(feuille de style
<head> séparée)
<title> CSS </title>
<meta charset="utf-8">
h1{
<link rel="stylesheet“ type="text/css" href="[Link]" >
<head> color: #4a4a4a;
<body> }
<h1>
L'importance du CSS p {
</h1> color: #4a4a4a;
<p> }
Le CSS est un élément crucial dans le développement web
</p>
</body>
Plan du cours
1. Introduction
2. Intégration du code CSS
3. Sélecteurs
4. Pseudo-classe
5. Box model
6. FlexBox
Sélecteur
Un sélecteur permet de cibler un ou plusieurs éléments HTML
sélecteur {
propriété : valeur ;
}
Sélecteur universel *
<body>
<h3> Un titre de niveau 3 </h3>
<p> Un premier paragraphe </p>
<p> Un deuxième paragraphe </p>
<p> Un troisème paragraphe Un titre de niveau 3
<span> SPAN imbriquée </span> Un premier paragraphe
</p>
</body> Un deuxième paragraphe
Un troisième paragraphe SPAN imbriquée
*{
color : #CC0033 ;
font-family : arial Black , Arial ;
}
Sélecteur d'élément
<body>
<h3> Un titre de niveau 3 </h3>
<p> Un premier paragraphe </p>
<p> Un deuxième paragraphe </p>
<p> Un troisième paragraphe Un titre de niveau 3
<U> partie soulignée </U> Un premier paragraphe
</p>
</body> Un deuxième paragraphe
Un troisième paragraphe partie souligneée
P {
color : red ;
font-family : arial Black , Arial ;
}
Sélecteur de différents éléments simultanément
<body>
<h3> Un titre de niveau 3 </h3>
<p> Un premier paragraphe </p>
<p> Un deuxième paragraphe </p>
<p> Un troisième paragraphe Un titre de niveau 3
<span> SPAN imbriquée </span> Un premier paragraphe
</p>
</body> Un deuxième paragraphe
Un troisième paragraphe SPAN imbriquée
h3 , span {
color : red ;
font-family : arial Black , Arial ;
}
Sélecteur : un élément adjacent (frère)
<body>
<h3> Un titre de niveau 3 </h3>
<p> Un premier paragraphe </p>
<pre> Un deuxième paragraphe </pre>
<p> Un troisième paragraphe Un titre de niveau 3
<span> SPAN imbriquée </span> Un premier paragraphe
</p>
</body> Un deuxième paragraphe
Un troisième paragraphe SPAN imbriquée
h3+p {
color : red ;
font-family : arial Black , Arial ;
}
sélecteur descendant
<body>
<h3> Un titre de niveau 3 </h3>
<p> Un premier paragraphe </p>
<pre> Un deuxième paragraphe </pre>
<p> Un troisième paragraphe Un titre de niveau 3
<span> SPAN imbriquée </span> Un premier paragraphe
</p>
</body> Un deuxième paragraphe
Un troisième paragraphe SPAN imbriquée
p span {
color : red ;
font-family : arial Black , Arial ;
}
sélecteur d'ID
<body>
<h3> Un titre de niveau 3 </h3>
<p id="parag"> Un premier paragraphe </p>
<pre> Un deuxième paragraphe </pre>
<p> Un troisième paragraphe Un titre de niveau 3
<span> SPAN imbriquée </span> Un premier paragraphe
</p>
</body> Un deuxième paragraphe
Un troisième paragraphe SPAN imbriquée
#parag {
color : red ;
font-family : arial Black , Arial ;
}
Sélecteur de class
<body>
<h3 class="title"> Un titre de niveau 3 </h3>
<p id="parag"> Un premier paragraphe </p>
<pre> Un deuxième paragraphe </pre>
<p> Un troisième paragraphe Un titre de niveau 3
<span> SPAN imbriquée </span> Un premier paragraphe
</p>
</body> Un deuxième paragraphe
Un troisième paragraphe SPAN imbriquée
.title {
color : red ;
font-family : arial Black , Arial ;
}
Plan du cours
1. Introduction
2. Intégration du code CSS
3. Sélecteurs
4. Pseudo-classe
5. Box model
6. FlexBox
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é.
selecteur:pseudo-classe {
propriété: Valeur ;
}
Pseudo-classe
<ul class="cube">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li> 1 2 3 4 5 6
<li> 6 </li>
</ul>
.cube li:first-child {
background-color: #FABD03;
}
Pseudo-classe
<ul class="cube">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li> 1 2 3 4 5 6
<li> 6 </li>
</ul>
.cube li:last-child {
background-color: #FABD03;
}
Pseudo-classe
<ul class="cube">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li> 1 2 3 4 5 6
<li> 6 </li>
</ul>
.cube li:nth-child(3) {
background-color: #FABD03;
}
Pseudo-classe
<ul class="cube">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li> 1 2 3 4 5 6
<li> 6 </li>
</ul>
.cube li:nth-child(odd) {
background-color: #FABD03;
}
Pseudo-classe
<ul class="cube">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li> 1 2 3 4 5 6
<li> 6 </li>
</ul>
.cube li:nth-child(even) {
background-color: #FABD03;
}
Pseudo-classe
<ul class="cube">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li> 1 2 3 4 5 6
<li> 6 </li>
</ul>
.cube li:nth-child(n+3) {
background-color: #FABD03;
}
Pseudo-classe
<ul class="cube">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li> 1 2 3 4 5 6
<li> 6 </li>
</ul>
.cube:nth-child(3n-1) {
background-color: #FABD03;
}
Plan du cours
1. Introduction
2. Intégration du code CSS
3. Sélecteurs
4. Pseudo-classe
5. Box model
6. FlexBox
Box model : Dimension
Tout élément HTML est considéré comme contenu dans une
boîte.
width
hello height
Box model : Bordure
Tout élément HTML est considéré comme contenu dans une
boîte.
width
hello height
Box model : Padding
En CSS, le padding permet de créer un espacement interne à
la boîte
Padding
hello
Box model : margin
Accueil produit
Box model : margin
La marge, c'est l'espace invisible qui entoure une boîte
margin
Accueil produit
Box model : border, margin et padding
Tout élément HTML est considéré comme contenu
dans une boîte.
width
margin
border
hello height
padding
Dimension
<p class="citation">
L’amélioration contenu
</p> L’amélioration contenu
400px
.citation {
background: lightblue;
width:400px;
}
Padding
<p class="citation">
L’amélioration contenu
</p> 40px
L’amélioration contenu
40px
.citation {
background: lightblue;
width:400px;
padding:40px;
}
Border
<p class="citation">
L’amélioration contenu
</p>
L’amélioration contenu
.citation {
background: lightblue;
width:400px;
padding:40px;
border: 2px solid #000000;
}
Margin
<p class="citation">
L’amélioration contenu
</p> 20px
20px
.citation { L’amélioration contenu
background: lightblue;
width:400px;
padding:40px;
border: 2px solid #000000;
margin: 20px;
}
Plan du cours
1. Introduction
2. Intégration du code CSS
3. Sélecteurs
4. Pseudo-classe
5. Box model
6. FlexBox
44
En CSS2, pour gérer la disposition
des éléments on utilise :
Display : bloc;
h1
P
div Difficile de créer des mises en
page dynamiques qui
s'adaptent à différentes tailles
Display : inline; d'écran.
Manque de flexibilité
span a img
45
Définition
FlexBox : Flexible Box Model
modèle de boites Flexible
une technique de mise en page CSS qui permet d'organiser
les éléments d'une interface web de manière flexible et
dynamique
46
Qu’est-ce que FlexBox
Un ensemble de Alignement du Création de mises
propriétés CSS contenu en page flexibles
47
Les bases de Flexbox
Le conteneur : C'est l'élément parent qui englobe les
éléments que tu souhaites organiser avec Flexbox.
Conteneur
01 02 03
48
Les bases de Flexbox
Les éléments flexibles : Ce sont les enfants directs du conteneur flexible.
Eléments
(items)
01 02 03
<div class = "container">
Conteneur
</div>
<div class = "container">
<div class = "item">
Item 01
Eléments flexible
</div>
<div class = "item">
Item 02 Item Item Item
01 02 03
</div>
<div class = "item">
Item 03
</div>
</div>
Flex Container
Container
.container{
border : solid 4px blue ; Item Item Item
01 02 03
display : flex ;
}
52
Les bases de Flexbox
L'axe principal selon lequel les éléments sont disposés. Par défaut, c'est
l'axe horizontal (de gauche à droite).
Axe
principal
01 02 03
53
Les bases de Flexbox
Début du conteneur est le point de départ de la disposition des éléments
flexibles.
Début du conteneur
01 02 03
54
Les bases de Flexbox
fin du conteneur est le point où s'arrête la disposition des objets (éléments flexibles)
dans la boîte (conteneur flexible).
Ligne de début La ligne de fin
01 02 03
55
Les bases de Flexbox
Taille principale représente la taille d’un conteneur flexible sur l'axe principal
Ligne de début Ligne de fin
01 02 03
Row
Row-reverse
Flex-direction
Column
Column-revere
Flow direction
.container{
display : flex ;
Item Item Item
flex-direction: row ; 01 02 03
border : solid 4px blue ;
}
Flow direction
.container{
display : flex ;
Item Item Item
flex-direction: row-reverse ; 03 02 01
border : solid 4px blue ;
}
Flow direction
Item
01
.container{
display : flex ;
Item
flex-direction: column ; 02
border : solid 4px blue ;
}
Item
03
Flow direction
Item
03
.container{
display : flex ;
Item
flex-direction: column-reverse ; 02
border : solid 4px blue ;
}
Item
01
61
Les bases de Flexbox
Taille principale représente la taille d’un conteneur flexible sur l'axe principal
Ligne de début Ligne de fin
01 02 03
nowrap
Flex-wrap
warap
Flex line wrapping
Item Item Item Item Item Item Item
01 01 02 02 03 04 05
Flex line wrapping
.container{
display : flex ;
flex-direction: row ; Item
Item Item Item
border : solid 4px blue ; 01 02 03 04
width : 50% ;
flex-wrap: nowrap ;
}
Flow direction
.container{ Item Item Item
display : flex ; 01 02 03
flex-direction: row ;
border : solid 4px bleu ;
width : 50% ; Item
flex-wrap: wrap ; 04
}
Flex line wrapping
Item 01
.container{
display : flex ;
flex-direction: column ; Item 02
border : solid 4px bleu ;
width : 50% ;
flex-wrap: nowrap ; Item 03
}
Item 04
Flex line wrapping
Item 01 Item 04
.container{
display : flex ;
flex-direction: column ; Item 02
border : solid 4px bleu ;
width : 50% ;
flex-wrap: wrap ; Item 03
}
La propriété order : permet de changer l'ordre d'affichage
des éléments à l'intérieur du conteneur flexible
Chaque élément a une
Order valeur order par
défaut de 0
<div class = "container">
<div class = "item1">
Item 01
</div>
<div class = "item2">
Item 02
</div> Item Item Item Item
<div class = "item3"> 01 02 03 04
Item 03
</div>
<div class = "item4"> 1er groupe
Item 04 Order = 0
</div>
</div>
.item2 {
background-color:#FFC000 ; Item Item Item Item
order:1 ; 01 02 03 04
}
1er
groupe
.item2{
background-color:#FFC000 ; Item Item Item Item
order:1 ; 01 03 04 02
}
1er 2eme
groupe groupe
.item3{
background-color:#EA4235 ; Item Item Item Item
order:2 ; 01 03 04 02
}
1er 2eme
groupe groupe
.item3{
background-color:#EA4235 ; Item Item Item Item
order:2 ; 01 04 02 03
}
1er 2eme 3eme
groupe groupe groupe
.item2 {
background-color:#EA4235 ; Item Item Item Item
order:-1 ; 01 04 02 03
}
1er 2eme 3eme
groupe groupe groupe
.item2 {
background-color:#EA4235 ; Item Item Item Item
order:-1 ; 02 01 04 03
}
1er 2eme 3eme
groupe groupe groupe
Flex-start
Flex-end
Justify-centent Center
Space-between
Space-around
alignement
1 2 3
1 2 3
Item Item
Justify-content Item 1 2 01 3 02
03
1 2 3
1 2 3
Flex-start
.container {
display : flex ;
flex-direction: row ;
border : solid 4px bleu ;
justify-content: flex-start ; 1 2 3
}
Flex-end
.container {
display : flex ;
flex-direction: row ;
border : solid 4px bleu ;
justify-content: flex-end ; 1 2 3
}
center
.container {
display : flex ;
flex-direction: row ;
border : solid 4px bleu ;
justify-content: center ; 1 2 3
}
Space-between
.container {
display : flex ;
flex-direction: row ;
border : solid 4px bleu ;
justify-content: space-between ; 1 2 3
} // //
Space-around
.container {
display : flex ;
flex-direction: row ;
border : solid 4px bleu ;
justify-content: space-around ; 1 2 3
}
x 2x 2x x
Space-around
.container {
display : flex ;
flex-direction: row ;
border : solid 4px bleu ;
justify-content: space-evenly; 1 2 3
} // // // //
Flex-start
Flex-end
Align-item Center
stretch
Space-around
85
Les bases de Flexbox
Axe secondaire : l'axe perpendiculaire à l'axe
principal.
01 02 03
Axe secondaire
alignement
1 2 3 2
3
1
1 3 1 2 3
2
align-item Item
03
1
3
2
Flex-start
.container {
display : flex ;
flex-direction: row ;
1 2 3
border : solid 4px bleu ;
align-item: flex-start ;
}
Flex-end
.container {
display : flex ;
flex-direction: row ;
border : solid 4px bleu ;
align-item: flex-end ; 2
3
1
}
center
.container {
display : flex ;
flex-direction: row ;
border : solid 4px bleu ; 2
1 3
align-item: center ;
}
Stretch
.container {
display : flex ;
flex-direction: row ;
border : solid 4px bleu ; 1 2 3
align-item: stretch ;
}
Flex-start
Flex-end
Align-self Center
stretch
Space-around
.item1 {
align-self:flex-start ;
}
1
3
.item2 { 2
align-self:center ;
}
.item3 {
align-self:stretch ;
}
Exemples d'applications de Flexbox
2
<header>
<nav> <Main> <aside>
<footer>
<header>
<h1>Header</h1>
</header>
<header>
<main>
<nav>
<h1> Navigation </h1>
</nav>
<article>
<nav> <article> <aside> <h1> Main Content </h1>
</article>
<aside>
<h1> Sidebar </h1>
</aside>
</main>
<footer> <footer>
<h1> Footer </h1>
</footer>
body {
text-align: center;
<header>
height:100%;
}
header {
background-color: #8E4585;
height:10%;
<nav> <article> <aside>
}
main {
display: flex;
flex-direction: row;
height:80%;
<footer>
}
nav {
background-color: #B4CD3C;
<header> width: 20%;
}
article {
background-color: #7E77AB;
width: 60%;
<nav> <article> <aside> }
sidebar {
background-color: #6DBDD6;
width: 20%;
}
footer {
<footer> background-color: #3E5CA2;
height : 10%
}