ABIDI Mohamed Fadhel

I. Introduction au CSS
Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire la présentation visuelle des pages
web. Il permet de contrôler la mise en forme des éléments HTML, comme les couleurs, les polices,
les marges, et la disposition. CSS sépare le contenu (HTML) de la présentation, facilitant la
maintenance et la modification de l'apparence d'un site web.

1. Définition d'une règle CSS

Une règle CSS se compose de deux parties principales :
✓ Sélecteur : Il identifie les éléments HTML à styliser.
✓ Déclaration : Elle contient les propriétés CSS et leurs valeurs à appliquer aux éléments
sélectionnés.

Exemple d’utilisation :
html css
<p> Hello world ! </p> p {
color: blue;
font-size: 16px;
}

Page 52 sur 112

 ABIDI Mohamed Fadhel
2. Types de Sélecteurs CSS
a. Sélecteur de type
Cible un élément HTML par son nom de balise. Par exemple utiliser le sélecteur p pour tous les
paragraphes.

Exemple d’utilisation :
html css
<p> Hello world ! </p> span {
<span> Bonjour </span> color: red;
}

b. Sélecteur de classe :
Cible un ou plusieurs éléments avec une classe spécifique, précédé d'un point (.).

Exemple d’utilisation :
html css
<p> Hello </p> .esp {
<p> Bonjour </p> color: red;
<p class="esp"> hola </p> }

c. Sélecteur d'ID :
Cible un élément unique avec un identifiant spécifique, précédé d'un dièse (#).

Exemple d’utilisation :

Page 53 sur 112

 ABIDI Mohamed Fadhel
html css
<p> Hello </p> #esp {
<p id="esp"> Bonjour </p> color: red;
<p class="esp"> hola </p> }

d. Sélecteur universel :
Cible tous les éléments (*).

Exemple d’utilisation :
html css
<span> Hello </span> * {
<p> Bonjour </p> color: red;
<div> hola </div> }

e. Sélecteur d'attribut :
Cible les éléments avec un attribut spécifique. (balise[attribut="valeur"] )

Exemple d’utilisation :

html css
Nom :<input type="text"> input[type=text] {
Tel :<input type="tel"> color: red;
}

Page 54 sur 112

 ABIDI Mohamed Fadhel
f. Sélecteurs combinés :
Il s’agit de la combinaison d’un sélecteur de balise avec un sélecteur de classe afin de cibler
avec plus de précision certains éléments HTML.
Exemple d’utilisation :

html css
<p class="en"> Hello </p> [Link] {
<p> Bonjour </p> color: red;
<p> hola </p> }
<div class="en"> reste … </p>

g. Sélecteurs multiples :
Les sélecteurs multiples permettent d’appliquer les mêmes styles à plusieurs éléments
différents en les séparant par une virgule (,) dans la feuille de style CSS. Cela évite de répéter
plusieurs règles identiques.
Exemple d’utilisation :

html css
<h1>Bienvenue </h1> p,h1 {
<p>paragraphe</p> color: red;
<div> une division.</div> }

Page 55 sur 112

 ABIDI Mohamed Fadhel
h. pseudo-classe
Une pseudo-classe est un mot-clé ajouté à un sélecteur, précédé d’un deux-points : qui
permet de définir un état particulier d’un élément HTML sans ajouter de classe ou
d’attribut.
Liste de pseudo-classes :
Pseudo-classe Élément concerné Moment où elle s’applique
:link Lien <a> Lorsqu’un lien n’a pas encore été
visité
:visited Lien <a> Lorsqu’un lien a déjà été visité
:hover Tout élément Lorsqu’on passe la souris dessus
interactif
:active Bouton ou lien Lors d’un clic actif (appui sans
relâche)
:focus Champs de Lorsqu’un élément reçoit le focus
formulaire
Exemple d’utilisation :

html css
<p>Bienvenue </p> p:hover {
<p>paragraphe</p> color: red;
}

Avant le passage de souris : après le passage :

II. Propriétés de mise en forme du texte en CSS

Le CSS offre un large éventail de propriétés permettant de styliser le texte dans les pages web. Voici
quelques-unes des plus courantes, avec des exemples :

1. font-family :
Cette propriété permet de définir la police de caractères utilisée pour le texte.

Page 56 sur 112

 ABIDI Mohamed Fadhel
Exemple d’utilisation :

html css
<p>Bienvenue </p> p {
font-family :arial,sans-serif ;
}

Ici, le texte des paragraphes utilisera la police Arial avec une alternative sans-serif si Arial n'est pas
disponible. Voici les 5 famille de polices avec des exemples des fonts :

2. font-weight :
Elle permet de définir l'épaisseur du texte. Les valeurs possibles incluent normal, bold, ou des valeurs
numériques comme 100 à 900.
Exemple d’utilisation :

html css
<p>Bienvenue </p> p {
<div> division </div> font-weight :bold ;
}

Page 57 sur 112

 ABIDI Mohamed Fadhel

3. font-style :
Utilisée pour mettre le texte en italique. Les valeurs possibles sont normal, italic, ou oblique.
Exemple d’utilisation :

html css
<p>Bienvenue dans notre <span> span {
plateforme </span> de jeux en font-style :italic ;
ligne </p> }

4. font-size :

Elle permet de définir la taille du texte. Les valeurs peuvent être en pixels (px).
Exemple d’utilisation :

html css
<p>Bienvenue </p> p {
<p class= "A"> division </p> font-size :16px ;
}
.A {
font-size : 32px ;
}

5. font :
Cette propriété regroupe plusieurs propriétés liées aux polices, comme font-style, font-weight, font-size,
et font-family dans une seule déclaration.

Page 58 sur 112

 ABIDI Mohamed Fadhel
Exemple d’utilisation :

html css
<p>Bienvenue dans notre site </p> p {
font: italic bold 16px Arial ;
}

6. text-align :
permet le contrôle l'alignement horizontal du texte. Les valeurs incluent left, right, center, et justify.

7. text-shadow :
Cette propriété permet d'ajouter une ombre au texte. Elle prend 4 valeurs : l'offset horizontal et
vertical, le flou, et la couleur.
Exemple d’utilisation :

html css
<h1> un Titre H1 </h1> h1 { text-shadow: 2px 2px 5px red;
}

8. text-transform :
Elle permet de modifier la casse du texte. Les valeurs incluent uppercase, lowercase, et capitalize.

Page 59 sur 112

 ABIDI Mohamed Fadhel
Exemple d’utilisation :

html css
<h1>Titre principal </h1> h1 {
<p>ceci est un texte.</p> text-transform: uppercase;
}
p {
text-transform: capitalize;
}

9. color :
Cette propriété définit la couleur du texte. Les couleurs peuvent être spécifiées en nom (comme red),
en hexadécimal .

Exemple d’utilisation :

html css
<h1>Titre principal </h1> h1 {
color: lime;
}

Page 60 sur 112

 ABIDI Mohamed Fadhel
XII. Propriétés de couleur et de fond :
1. background-color
La propriété background-color définit la couleur de fond d'un élément. Elle peut être spécifiée à l'aide
de noms de couleurs, de valeurs hexadécimales, ….
Exemple d’utilisation :

html css
<h1>Titre </h1> body {background-color: #f0f0f0;}
<p>Paragraphe</p> h1 {background-color: lightblue;}

2. background-image
La propriété background-image permet d’appliquer une image en tant qu’arrière-plan d’un élément.
L'image peut être spécifiée par une URL.

Exemple d’utilisation :

html css
<h1>Titre </h1> body {
<p>Paragraphe</p> background-image: url("[Link]");
color:white;
}

Page 61 sur 112

 ABIDI Mohamed Fadhel
3. background-repeat :
La propriété background-repeat contrôle la répétition de l'image de fond. Par défaut, une image de fond
se répète pour couvrir l'élément. Vous pouvez choisir de désactiver la répétition ou de répéter l'image
horizontalement ou verticalement.
Valeurs :
❖ repeat (par défaut) : L'image de fond se répète dans les deux
directions.
❖ repeat-x : L'image se répète uniquement horizontalement.
❖ repeat-y : L'image se répète uniquement verticalement.
❖ no-repeat : L'image ne se répète pas.

Exemple d’utilisation :

html css
<h1>Titre </h1> body {
<p>Paragraphe</p> background-color:silver;
background-image: url("[Link]");
background-repeat: repeat-y;
}

Page 62 sur 112

 ABIDI Mohamed Fadhel

4. background-size :
La propriété background-size définit la taille de l’image d’arrière-plan. Vous pouvez définir des
dimensions précises, utiliser des pourcentages, ou employer des mots-clés comme cover ou contain.
Valeurs :

❖ auto (par défaut) : La taille de l'image de fond reste à sa taille d'origine.

❖ cover : L'image couvre entièrement l'élément tout en gardant ses proportions.
❖ contain : L'image est redimensionnée pour être complètement visible à l'intérieur de l'élément.
❖ Valeurs libre : comme 100px 50px, pour des largeurs et hauteurs spécifiques.

Exemple d’utilisation :

html css
<h1>Titre </h1> body {
<p>Paragraphe</p> background-color:silver;
background-image: url("[Link]");
background-repeat: no-repeat;
background-size :cover ;
}

Page 63 sur 112

 ABIDI Mohamed Fadhel
5. background
La propriété background est une propriété raccourcie qui permet de définir plusieurs propriétés de
fond en une seule déclaration, comme background-color, background-image, background-repeat,
backgroundposition, et background-size.

Syntaxe :

background: [background-color] [background-image] [background-repeat]

[position / taille];

Exemple d’utilisation :

html css
<h1>Titre </h1> body {
<p>Paragraphe</p> background: lightblue url('[Link]')
no-repeat center / cover;
}

Propriétés des bordures :

5. 1. border-style
La propriété border-style définit le style de la bordure d'un élément. Elle peut prendre différentes
valeurs pour spécifier l'apparence de la bordure (solide, en pointillés, en tirets, etc.).

Page 64 sur 112

 ABIDI Mohamed Fadhel

Exemple d’utilisation :

html css
<h1>Titre principal </h1> h1 { border-style: solid;
<p> paragraphe </p> }

6. border-color
La propriété border-color définit la couleur de la bordure. Elle peut être spécifiée en utilisant un nom
de couleur, une valeur hexadécimale, RGB, ….
Exemple d’utilisation :

html css
<h1>Titre principal </h1> h1 { border-style: solid;
border-color :red ;
}

Page 65 sur 112

 ABIDI Mohamed Fadhel
7. border-width
La propriété border-width contrôle l'épaisseur de la bordure. Vous pouvez définir une épaisseur
spécifique en pixels ou utiliser des valeurs prédéfinies telles que thin, medium, ou thick.
Exemple d’utilisation :

html css
<h1>Titre principal </h1> h1,p {
<p> un paragraphe</p> border-style: solid;
border-color :red ;
}
h1{border-width :10px ;}

4. border-radius
La propriété border-radius permet de créer des coins arrondis pour les bordures. Vous pouvez définir
un rayon spécifique pour les coins en pixels ou en pourcentage.
Exemple d’utilisation :

html css
<h1>Titre principal </h1> h1 { border-style: solid;
text-align:center;
border-color :red ;
border-radius :50% ;
}

8. 5. border
La propriété border est une propriété raccourcie qui permet de définir en une seule déclaration le
style, la couleur et l'épaisseur de la bordure.
Syntaxe :

border: [épaisseur] [style] [couleur];

Page 66 sur 112

 ABIDI Mohamed Fadhel
Exemple d’utilisation :

html css
<h1>Titre principal </h1> h1 {
border : 2px dashed navy ;
}

XIII. Propriétés des listes

1. list-style-type
La propriété list-style-type définit le type de puce ou de numérotation à utiliser pour les éléments
d'une liste. Elle peut être appliquée à des listes ordonnées (<ol>) et non ordonnées (<ul>).
Valeurs possibles :

Exemple d’utilisation :

html css
<span>programme </span> ol {
<ol> list-style-type : georgian ;
<li> workshop 1 </li> }
<li> pause </li>
<li> workshop 2 </li>
</ol>

Page 67 sur 112

 ABIDI Mohamed Fadhel
2. 2. list-style-position
La propriété list-style-position détermine la position de la puce ou du numéro par rapport au contenu
de l'élément de la liste.
Valeurs possibles :

• inside : la puce ou le numéro est à l'intérieur du bloc, donc aligné avec le texte de l'élément.
• outside (par défaut) : la puce ou le numéro est à l'extérieur du bloc, décalé à gauche du texte.

Exemple d’utilisation :

html css
<span>programme </span> ol {
<ol> list-style-position: outside;
<li> workshop 1 </li> }
<li> pause </li> li{
<li> workshop 2 </li> background-color:pink;
</ol> }

3. 3. list-style-image
La propriété list-style-image permet d'utiliser une image en tant que puce dans une liste.

Page 68 sur 112

 ABIDI Mohamed Fadhel
Exemple d’utilisation :

html css
<span>programme </span> ol {
<ol> list-style-image: url("[Link]");
<li> workshop 1 </li> }
<li> pause </li>
<li> workshop 2 </li>
</ol>

4. 4. list-style
La propriété list-style est une propriété raccourcie qui permet de définir simultanément list-style-type,
list-style-position, et list-style-image en une seule déclaration.

Syntaxe :

list-style: [type] [position] [image];

Exemple d’utilisation :

html css
<span>programme </span> ol {
<ol> list-style:decimal inside url("[Link]");
<li> workshop 1 </li> }
<li> pause </li>
<li> workshop 2 </li>
</ol>

Dans cet exemple, la liste utilise une image [Link], avec un style de puce décimale comme
secours, et les puces sont alignées à l'intérieur du texte.

Page 69 sur 112

 ABIDI Mohamed Fadhel
XIV. Propriétés des tableaux
5. 1. table-layout
La propriété table-layout détermine la manière dont la largeur des colonnes d'un tableau est calculée.
Elle influence la rapidité du rendu du tableau et la manière dont les colonnes sont redimensionnées.

Valeurs possibles :

Exemple d’utilisation :

html css
<table> table {
<tr> table-layout: fixed;
<th>Colonne courte</th> }
<th>Colonne avec un texte td,th{
beaucoup plus long qui ne devrait border: 1px solid black;
pas élargir</th> }
</tr>
<tr>
<td>123</td>
<td> texte pour voir
l'effet.</td>
</tr>
</table>

Page 70 sur 112

 ABIDI Mohamed Fadhel
6. 2. border-collapse
La propriété border-collapse détermine si les bordures des cellules adjacentes dans un tableau sont
fusionnées en une seule bordure ou séparées.
Valeurs possibles :

• separate (valeur par défaut) : Les bordures des cellules sont séparées
• collapse : Les bordures adjacentes des cellules fusionnent en une seule bordure. Cela donne
une apparence plus propre au tableau avec des bordures continues.

Exemple d’utilisation :

html css
<table> table {
<tr> table-layout: auto;
<th>Colonne courte</th> border-collapse:collapse;
<th>Colonne avec un texte }
beaucoup plus long qui ne devrait td,th{
pas élargir</th> border: 1px solid black;
</tr> }
<tr>
<td>123</td>
<td> texte pour voir
l'effet.</td>
</tr>
</table>

Page 71 sur 112

 ABIDI Mohamed Fadhel
XV. Propriétés des images :
La propriété filter en CSS permet d'appliquer des effets graphiques (comme un flou ou un
changement de couleurs) aux éléments tels que des images, du texte, ou même des blocs. C'est un
moyen simple de modifier l'apparence visuelle d'un élément sans avoir à modifier l'image ou
l'élément lui-même.

1. invert()
La fonction invert() inverse les couleurs d'un élément. Cela signifie que les couleurs claires
deviennent sombres et les couleurs sombres deviennent claires. La valeur est un pourcentage entre
0% (aucune inversion) et 100% (couleurs complètement inversées).

Exemple d’utilisation :

html css
<span> avant .fl{
<img src="[Link]"> filter: invert(100%);
</span> }
<span> après
<img class="fl" src="[Link]">
</span>

Page 72 sur 112

 ABIDI Mohamed Fadhel
2. grayscale()
La fonction grayscale() applique un effet de désaturation, transformant une image en niveaux de gris.
La valeur est un pourcentage entre 0% (pas de changement) et 100% (image entièrement en niveaux
de gris).

Exemple d’utilisation :

html css
<span> avant .fl{
<img src="[Link]"> filter: grayscale(70%);
</span> }
<span> après
<img class="fl" src="[Link]">
</span>

3. blur()
La fonction blur() applique un flou à l'élément. La valeur spécifie le rayon du flou, exprimé en pixels.

Page 73 sur 112

 ABIDI Mohamed Fadhel

Exemple d’utilisation :

html css
<span> avant .fl{
<img src="[Link]"> filter: blur(5px);
</span> }
<span> après
<img class="fl" src="[Link]">
</span>

XVI. Propriétés des boîtes :

Les propriétés CSS des boîtes permettent de gérer la taille, la position, les marges, les bordures, le
remplissage et d'autres aspects des éléments HTML.

Page 74 sur 112

 ABIDI Mohamed Fadhel

1. width et height
❖ width : définit la largeur d’un élément.
❖ height : définit la hauteur d’un élément.

Exemple d’utilisation :

html css
<div> box 150x150 px</div> div{
width :150px ;
height : 150px ;
background-color: #97A191;
}

2. margin

La propriété margin ajoute de l’espace autour d’un élément. Elle peut être définie pour les quatre côtés
individuellement ou globalement.

Page 75 sur 112

 ABIDI Mohamed Fadhel

Syntaxe :
Syntaxe Exemple Effet
1 valeur margin: 20px; 20px en haut, droite, bas, gauche
2 valeurs margin: 20px 50px; Haut et Bas = 20px Droite et Gauche =
50px
3 valeurs margin: 10px 30px 50px; Haut = 10px Droite et Gauche = 30px
Bas = 50px
4 valeurs margin: 5px 10px 15px 20px; Haut = 5px Droite = 10px Bas = 15px
Gauche = 20px
Propriétés margin-top: 10px; Définit chaque côté séparément
individuelles margin-right: 20px;
margin-bottom: 30px ;
margin-left: 40px;

Valeurs margin: auto ; centre un bloc horizontalement

spéciales margin: 0; aucune marge

3. padding

La propriété padding ajoute de l’espace à l’intérieur de l’élément, entre son contenu et sa bordure.

Exemple d’utilisation :

html css
<p> un paragraphe avec p{
espacement intérieur à gauche width:300px;
</p> border: 2px solid red;
padding-left : 100px ;
}

Page 76 sur 112

 ABIDI Mohamed Fadhel

4. Display :
En CSS, la propriété display détermine la manière dont un élément est rendu à l’écran :
❖ none : l’élément est totalement masqué et n’occupe aucun espace dans la page.
❖ block : l’élément s’affiche sous forme de bloc, prend toute la largeur disponible et commence
toujours sur une nouvelle ligne (ex. : <div>, <p>).
❖ inline : l’élément s’intègre directement dans le flux du texte, à la suite des autres, sans retour à
la ligne. On ne peut pas lui appliquer de dimensions (width, height) (ex. : <span>, <a>).
❖ inline-block : l’élément reste sur la même ligne que les autres, mais il conserve les
possibilités de mise en forme d’un bloc (dimensions, marges, espacements).

Exemple d’utilisation :

html css
<div> box 1 </div> div{
<div> box 2 </div> display : inline-block ;
width :200px ;
background-color : #FAB9C2 ;
height :150px ;
}

Page 77 sur 112

 ABIDI Mohamed Fadhel
5. Position :
Elle permet de contrôler l’emplacement d’un élément dans la page.
Valeurs communes :

❖ static (par défaut) : l'élément suit le flux normal du document.

❖ relative : l'élément est positionné par rapport à sa position normale.
❖ absolute : l'élément est retiré du flux et positionné par rapport à son conteneur positionné
le plus proche.
❖ fixed : l'élément est positionné par rapport à la fenêtre et ne bouge pas lors du défilement.

❖ sticky :permet à un élément de rester positionné normalement dans la page, mais de

devenir fixe (collant) lorsqu’on fait défiler la page .

La propriété position est utilisé souvent avec les propriétés CSS :

❖ top : décale l’élément vers le bas à partir du haut.

❖ bottom : décale l’élément vers le haut à partir du bas.

❖ left : décale l’élément vers la droite à partir de la gauche.

❖ right : décale l’élément vers la gauche à partir de la droite.

Remarque : Ces propriétés fonctionnent seulement si position ≠ static.

Page 78 sur 112

 ABIDI Mohamed Fadhel
Exemple d’utilisation :

html css
<div> div{
<p> un pargraphe </p> width :200px ;
</div> background-color : #FAB9C2 ;
height :150px ;
}
p{
background-color : red ;
position :relative ;
left : 180px ;
}

6. float :
La propriété float en CSS permet de positionner un élément à gauche ou à droite de son conteneur,
de façon que le texte et les autres éléments s’enroulent autour.

Valeurs principales :

❖ left : l’élément flotte à gauche.

❖ right : l’élément flotte à droite.
❖ none : valeur par défaut, pas de flottement.
❖ Exemple d’utilisation :

html css
<div> div{
<p> un pargraphe </p> width :300px ;
</div> border : 2px solid red;
height :40px ;
}
p{float :right ;}

Page 79 sur 112

 ABIDI Mohamed Fadhel
7. overflow

La propriété overflow contrôle comment le contenu débordant d’un élément est géré.

Valeurs :

❖ visible (par défaut) : le contenu déborde de la boîte.

❖ hidden : le contenu qui dépasse est masqué.
❖ scroll : des barres de défilement sont ajoutées si nécessaire.
❖ auto : des barres de défilement apparaissent seulement si le contenu déborde.
❖ clip: semble fonctionner exactement comme overflow: hidden. La différence est que vous
pouvez utiliser d’autre propriétés pour faire défiler quelque chose avec hidden, mais pas si
l'élément a clip.

Exemple d’utilisation :

html css
<div> div{
Contenu trop grand pour le width :50px ;
container background-color : #FAB9C2 ;
</div> height :50px ;
overflow :clip ;
}

8. box-shadow
La propriété box-shadow ajoute une ombre autour d’un élément.

Syntaxe :

box-shadow: offsetX offsetY taille color;

Page 80 sur 112

 ABIDI Mohamed Fadhel
Exemple d’utilisation :

html css
<div> div{
Div avec un ombre rouge width :200px ;
</div> border : 2px solid black ;
height :50px ;
box-shadow : 2px 2px 3px red ;
}

9. Opacity
La propriété opacity définit la transparence d’un élément. La valeur varie de 0 (entièrement
transparent) à 1 (entièrement opaque).

Exemple d’utilisation :

html css
<div> div{
Div opaque width :200px ;
</div> background-color :red ;
<div class= "t"> height :50px ;
Div transparente }
</div> .t{Opacity : 0.7 ;}

Page 81 sur 112

 ABIDI Mohamed Fadhel
XVII. Transformation

Les transformations CSS permettent de modifier l'apparence des éléments en les faisant pivoter,
déplacer, redimensionner ou déformer. Les fonctions principales utilisées pour ces transformations
sont : rotate, skew, scale, et translate. Voici les définitions et exemples pour chacune d'elles.

1. rotate() : Rotation d'un élément

La fonction rotate() permet de faire pivoter un élément autour de son point d'origine. La valeur est
exprimée en degrés (deg).
Exemple d’utilisation :

html css
<div> div{ border :4px solid red ;}
Une division div:hover{
</div> transform : rotate(45deg) ;
}

Sans passage de souris Lorsque le souris entre

Page 82 sur 112

 ABIDI Mohamed Fadhel

2. skew() : Inclinaison d'un élément

La fonction skew() permet d'incliner un élément le long de l'axe X ou Y. Les valeurs sont exprimées en
degrés.
Exemple d’utilisation :

html css
<div> div{ border :4px solid red ;}
Une division div:hover{
</div> transform : skew(20deg) ;
}

Sans passage de souris Lorsque le souris entre

3. scale() : Redimensionnement d'un élément

La fonction scale() modifie la taille d'un élément en fonction des facteurs de redimensionnement
donnés. Un facteur de 1 signifie que l'élément conserve sa taille d'origine.
Exemple d’utilisation :

html css
<div> div{ border :4px solid red ;}
Une division div:hover{
</div> transform : scale(1.5) ;
}

Sans passage de souris Lorsque le souris entre

4. translate() : Déplacement d'un élément

La fonction translate() déplace un élément sur l'axe X ou Y. Les valeurs sont exprimées en pixels (px)
ou en pourcentages (%).

Page 83 sur 112

 ABIDI Mohamed Fadhel

Exemple d’utilisation :

html css
<div> div{ border :4px solid red ;}
Une division div:hover{
</div> transform : translate(10px,50px) ;
}

Sans passage de souris Lorsque le souris entre

XVIII. Les transitions

Les transitions en CSS permettent d'ajouter des animations simples et fluides lorsque des
propriétés d'un élément changent d'état, par exemple lorsqu'un élément est survolé, cliqué, ou
lorsqu'une classe lui est ajoutée. Les transitions facilitent le passage progressif d'une propriété CSS à
une autre.

Page 84 sur 112

 ABIDI Mohamed Fadhel
Propriétés de transition :

Propriété Rôle Exemple

transition- Définit quelle(s) propriété(s) CSS vont être animées. transition-property:

property width;

transition- Définit la durée de la transition (combien de temps elle transition-duration: 2s;

duration dure).

transition-delay Définit le délai avant le début de la transition. transition-delay: 1s;

Syntaxe de propriété transition :

transition: <property> <duration> <delay>;

Exemple :
orsqu’on passe la souris sur le div, la couleur d’arrière-plan change vers le bleu. Ce changement
commence après 1 seconde de retard et la transition dure 3 secondes.
Méthode 1 :
div:hover {
background-color: blue;
transition-property: background-color;
transition-duration: 3s;
transition-delay: 1s;
}

Méthode 2 :
div:hover {
background-color: blue;
transition: background-color 3s 1s;
}

XIX. animations

Page 85 sur 112

 ABIDI Mohamed Fadhel
Les animations en CSS permettent de créer des mouvements complexes et dynamiques en
spécifiant une série d'étapes à travers les valeurs des propriétés CSS. Contrairement aux transitions
qui ne se produisent que lorsque l'état d'un élément change (comme lors d'un survol), les animations
peuvent être exécutées en continu ou selon un cycle défini. Voici une description détaillée des
principales propriétés d'animations CSS :

Propriété Rôle Exemple

@keyframes + Définit les étapes de l’animation (nom qu’on @keyframes slide { from { left:
nom réutilise dans animation-name). 0; } to { left: 100px; } }

animation-name Indique quel nom d’animation utiliser (défini animation-name: slide;

avec @keyframes).

animation- Durée de l’animation (obligatoire). animation-duration: 3s;

duration

animation-delay Délai avant le démarrage de l’animation. animation-delay: 1s;

animation- Nombre de répétitions de l’animation (1, 2, animation-iteration-count:

iteration-count infinite). infinite;

animation- Sens de l’animation : (normal, reverse, animation-direction: alternate;

direction alternate, alternate-reverse).

Syntaxe générale de propriété animation :

animation: <name> <duration> <delay> <iteration-count> <direction> ;
Exemple :
Créer un carré rouge qui change de couleur en 4 étapes. L’animation doit durer 4 secondes,
commencer après 1 seconde, se répéter à l’infini et aller dans les deux sens à chaque cycle.
Réponse :

div keyframes
div { @keyframes moveColor {
width: 100px; 0% { background-color: red; }
height: 100px; 33% { background-color: yellow;}
background-color: red; 66% { background-color: green;}
/* animation */ 100% { background-color: blue;}
animation-name: moveColor; }
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

Page 86 sur 112