Scribd
Importer
10 vues31 pages

Introduction aux feuilles de style CSS

Le document présente l'importance des feuilles de style CSS pour la structuration et la présentation des pages web. Il explique comment CSS permet de séparer le contenu HTML de la mise en forme, facilitant ainsi la gestion et l'unification des styles sur un site. Les différentes méthodes d'intégration de CSS dans les documents HTML sont également abordées, avec un accent sur l'utilisation de fichiers CSS externes pour une meilleure maintenance et performance.

Transféré par

boudali.rayan04
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
10 vues31 pages

Introduction aux feuilles de style CSS

Le document présente l'importance des feuilles de style CSS pour la structuration et la présentation des pages web. Il explique comment CSS permet de séparer le contenu HTML de la mise en forme, facilitant ainsi la gestion et l'unification des styles sur un site. Les différentes méthodes d'intégration de CSS dans les documents HTML sont également abordées, avec un accent sur l'utilisation de fichiers CSS externes pour une meilleure maintenance et performance.

Transféré par

boudali.rayan04
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

11/02/2025

Intérêt des feuilles de style


 HTML :
Faculté de génie électrique et informatique
 Permet de structurer les différents éléments d'une page.
Département d’informatique Année : 2024/2025
Module : Développement d’Applications Web  La visualisation est réalisée par le navigateur après interprétation du code HTML.
 Pour chaque élément HTML, il existe un style standard (par défaut) qui permet d'obtenir un
rendu dans toutes les situations.

 CSS :
LES FEUILLES DE STYLES : CSS
 Les CSS permettent de définir une ou plusieurs apparences à différents éléments.
 Apporte une meilleure maîtrise de la présentation de la page.
 Facilite l'unification des styles de toutes les pages d'un site sans modification du contenu de
la page.
 Reste indépendant du code HTML et en simplifie l‘écriture.
Responsable du module : Mme Bousnina Lila 1 2

Exemple de page html sans CSS : [Link]


CSS :

 CSS Cascading Style Sheets ou en français feuilles de style en cascade est un langage qui
permet de donner du look à votre page Web et la rendre ainsi présentable. En appliquant du
design à son contenu.
 Il couvre tous les aspects visuels d'une page Web, commençant de la simple coloration des
objets et allant jusqu'aux et transformations complexes de ceux ci et le responsive design.

 La première version du CSS a vu le jour vers 1996.


 Actuellement, on est à la version 3 du CSS.

3 4
11/02/2025

Exemple de la même page html avec CSS :


Idée :

 Séparer la structure et le contenu d’un document de sa présentation :


 La structure d’un document et son contenu sont décrits en HTML;
 Sa présentation est gérée par les CSS.

Le CSS s’intéresse à la mise en forme et la mise en page du


contenu intégré avec du HTML.

 Mise en forme : souligner du texte, le mettre en gras, en rouge, encadrer...

 Mise en page : disposer les blocs les uns par rapport aux autres dans la page.

5 6

Et qu’est ce que la mise en forme ?


Principe :
 CSS permet d'appliquer des styles sur différents éléments sélectionnés dans un document  Puis on choisit quel(s) aspect(s) (ou “styles”) de l’élément HTML que l’on souhaite
HTML, pour mettre en forme une page web. modifier. On précise ainsi ce qu’on appelle la propriété (à modifier). Par exemple la
couleur.
Comment sélectionner un ou plusieurs éléments?

 On (cible) sélectionne un élément grâce à son nom de balise, ou en fonction de ses attributs
 À chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la couleur, il faut

ou même de son état. On écrit ainsi ce qu’on appelle le sélecteur. indiquer le nom de la couleur, par exemple « red » . Pour la taille, il faut indiquer quelle

 Le sélecteur détermine (sélectionne) les éléments sur lesquels s’appliquera le style. Par taille on veut etc...

exemple p, h1,…

7 8
11/02/2025

Règle CSS : Où écrire ces règles CSS ?


 Une règle CSS sert à définir un style à appliquer à des balises html.
 Nous avons trois possibilités pour écrire notre CSS. La première est préférable aux deux autres:
 Elle affecte une valeur à une propriété, ce qui définit définit une déclaration.
 Méthode A : en liant au document HTML, une feuille de style (fichier .css) externe (CSS externes).
 La ou les déclarations associées à un ou plusieurs sélecteurs définissent une règle de style.
• Une feuille de style CSS regroupe un ensemble de règles CSS.

déclarations : "propriete : valeur;".  Méthode B : en utilisant des balises <style>, dans l'en-tête (bloc <head>) du fichier html (CSS
propriétés internes ).

valeurs  Méthode C : directement dans les balises html (inline CSS).

sélecteur
déclarations

9 10

inline CSS : dans les balises (Méthode C) (fortement déconseillée)

Attribut de style local : Inconvénients :

 Elle consiste à ajouter un attribut style sur les balises pour leur appliquer un style particulier. 1. Mélange structure et présentation;

Exemple : 2. Le style ainsi défini ne s'applique qu'à la balise sur laquelle il est déclaré. Or, sur une
page Web, il existe plusieurs éléments qui se ressemblent (décrits par la même balise en
<html>
<head>
général). Il est donc judicieux que ces éléments aient le même style, et par conséquent on
<title>CSS</title> serait obligé de redéclarer le même style local autant de fois qu'il y a d'éléments similaires.
</head>
<body>
<p style="color: blue; font-size: 14px;">Lorem ipsum dolor
sit amet consectetur.</p>
</body>
</html>
11 12
11/02/2025

CSS interne : directement dans le header de la page HTML (Méthode B)


Inconvénients :
Style global à la page :
 Cette méthode peut être utile lorsqu'une page d'un site est un peu à part des autres et nécessite
 Il est aussi possible de taper du CSS directement à l'intérieur même du fichier HTML, entre les
une mise en forme particulière.
balises <head> </head>. Vous devrez y mettre une balise <style> </style> à l'intérieur, comme
ceci :  Pour harmoniser l'ensemble du site web, on serait obligé de redéclarer les mêmes balises style
<html>
Exemple : <head> autant de fois qu'il y a de pages constituant note site.
<title>CSS</title>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur.</p>
...
<p>Lorem, dolor sit consecteadipisicing elit.</p>
</body>
</html> 13 14

CSS externe : dans une feuille (fichier) .css (Méthode A) (à privilégier): Avantages :

La feuille de style en cascade : Avoir une feuille .css commune dans un fichier séparé du code html permet de :

 Il suffit de définir le style une seule fois dans la feuille css au lieu de le répéter sur chaque  Changer le design du site en un clin d'œil! sans toucher le document html;

page du site.  Faciliter la maintenance du site ;


 Harmoniser l'ensemble du site web;
 Le code CSS est écrit dans un fichier spécial ayant l'extension .css.
 Alléger la taille des fichiers .html, ce qui rendra le site plus rapide. Car le fichier .css ne
 C'est la méthode la plus pratique car elle vous permettra de faire changer le design du site
sera téléchargé qu'une seule fois pour toutes les pages du site, .
en un clin d'œil!

15 16
11/02/2025

Comment accèdent les pages .html à la feuille de style .css ? LES CSS IMPORTÉES :

 Il faut y ajouter une ligne entre les balises <head> </head> qui va permettre de dire au  Les CSS importées font référence à l'utilisation de la règle @import en CSS pour inclure le

fichier HTML quel fichier CSS doit être charger : contenu d'un autre fichier CSS dans un fichier CSS principal, ou dans la balise <style> du
<head> de l’html.
<link rel="stylesheet" type="text/css" href = "design .css" />
 Cela permet de diviser le style en plusieurs fichiers pour une meilleure organisation et
 La balise <link /> comporte plusieurs attributs :
modularité.
 rel="stylesheet" : indique que le fichier inclus est une feuille de style.
Syntaxe de l'importation CSS :
 type="text/css" : norme de styles, utilisée dans le fichier.
@import url('[Link]');
 href : c'est l'emplacement où se trouve votre feuille de style sous forme de lien relatif Exemple :
(l’URL de la feuille de style). <style>
(Dans cet exemple le CSS se trouve dans le même dossier.) @import url([Link]
section {font-family: 'Montserrat', sans-serif;}
17 </style> 18

Les commentaires en CSS :


Considérations :
 Pour faire un commentaire, vous tapez /*, suivi de votre commentaire, puis */ pour terminer votre
commentaire.
 Il est important de noter que les règles @import doivent être placées au début du fichier CSS pour
être prises en compte correctement.  Les commentaires peuvent être sur une ou plusieurs lignes.

- Les fichiers CSS importés sont récupérés de manière synchrone, ce qui peut affecter le temps de Exemple:
chargement de la page. Par conséquent, pour une performance optimale, il est recommandé de minimiser body {
les importations et de regrouper les fichiers CSS lorsque cela est possible. font-family: verdana;
/* le type de police du texte du body comme times new reman*/
+ Avec l'avènement de nouveaux outils de construction et de bundling comme Webpack, l'utilisation de
background-color: #d8c5c2;
@import est devenue moins courante. Ces outils peuvent combiner automatiquement plusieurs fichiers
/* background c'est le fond du body, en ajoutant color ca sera la propriété couleur du
CSS en un seul, améliorant ainsi les performances du site. fond, si on ajoute image, alors ça sera l'image du fond de la page */

background-image: url(../images/[Link])
/* ici c'est la propriété fond avec image, on utilise le mot clé url(chemin vers l'image)*/
}
19 20
11/02/2025

Syntaxe (2) d’une règle CSS :


Syntaxe (1) d’une règle CSS :
1. Il est possible de regrouper plusieurs déclarations dans une règle,
selecteur { propriete : valeur ;}
les déclarations sont alors séparées par des points-virgules.
Exemple de règles de style :
Exemple :
« tous les éléments <h1> auront
h1 {
h1 { /* On modifie le style des titres */ leur texte en bleu et une taille
color : blue ;
color: red; /* Le texte sera écrit en rouge */
font-size : 12px; de police de 12px »
}
}
strong { /* On modifie le style des mots importants */
background-color: gold; /* Le texte sera écrit sur un fond doré */ 2. On peut factoriser les règles partagées par des sélecteurs,
} les sélecteurs sont alors séparés par des virgules.

Exemple : « les éléments <h1> et les éléments


h1 , h2 {
color : blue ; <h2> auront leur texte en bleu et
Note : Il existe plus de 300 propriétés en css3. font-size : 12px; une taille de police de 12px »
Tableau récapitulatif des propriétés }
[Link]
21 22

Les propriétés raccourcies : Avec 3 valeurs :

Certaines propriétés peuvent être définies de manière groupée en une seule propriété raccourcie.
p {margin:10px 20px 30px}
/* margin-top (margin-right et margin-left) margin-bottom */
Exemple :
Avec 4 valeurs: Si on ne renseigne que 3 valeurs pour cette même propriété:
Au lieu de :

p { La marge au haut sera de 10px, les deux marges latérales seront à 20px et la marge du
margin-top :10px; margin-right : 20px;
bas sera de 30px.
margin-bottom : 30px ; margin-left : 40px;
} Avec 2 valeurs :

On réunit dans margin dans cet ordre: p {margin:5px 10px}

p { /* (margin-top et margin-bottom) (margin-right et margin-left) */


margin:10px 20px 30px 40px;
} Les marges verticales seront de 5px, les deux marges latérales seront de 10px.
/* margin-top margin-right margin-bottom margin-left */
23 24
11/02/2025

La balise span :
Les éléments div et span (conteneurs génériques) :
 Nous allons faire appel à la balise inline <span>. On la met autour de Neil Armstrong, et on

• Il arrivera parfois que vous ayez besoin d'appliquer un style à certains mots qui ne sont pas écrit le CSS.

entourés par des balises. Code HTML :

• Par exemple, si je veux modifier uniquement "Neil Armstrong" dans le paragraphe suivant : <p>Comme l'a dit <span>Neil Amstrong</span> un certain 20 juillet 1969...</p>

 La mise en forme des éléments html de même attribut class sera faite ensuite
<p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969...</p>
par du code css.

Comme un style ne peut s’appliquer jusqu’au là que sur des balises, ça serait facile à faire s'il y avait span{
Code CSS :
color: blue;
une balise autour de "Neil Armstrong".
}
Mais, quelle est la balise qui peut répondre à un tel besoin ?
 L’élément span va servir de conteneur interne à un élément.
 La balise span est utilisée pour créer des propriétés CSS à un endroit précis.
25 26

Exemple :
La balise div :

Pour appliquer la même mise en forme à plusieurs éléments, nous allons simplement placer ces différents
 <div> est une balise de type bloc. Comme <p>, <h1> etc...
éléments à l’intérieur de nos balises <div> et </div> puis appliquer les styles CSS directement au div.
 <div> crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à
la ligne. C'est une balise très utilisée pour faire un design. <body>
div { <h1> Un titre de niveau 1</h1>
 <div> est un conteneur de différents éléments qui facilite l’application des mêmes styles color : yellowgreen; <div>
background-color: purple; <p>Un premier paragraphe</p>
CSS à tous les éléments contenus dans ce div par héritage. width: 80%; <p>Un autre paragraphe</p>
margin: 0 auto; <ul>
 L’élément div va servir de conteneur de plusieurs éléments. } <li>Un élément de liste</li>
<li>Un autre élément de liste</li>
 La balise div permet de regrouper plusieurs éléments HTML. </ul>
</div>
<p>Un troisième paragraphe</p>
Et si ces éléments <div>
<p>Un dernier paragraphe</p>
ne se suivent pas ? </div>
</body>
27 28
11/02/2025

Les attributs class et id : L’attribut class :


Soit l’exemple suivant : Utilisés en association avec des feuilles de style
CSS ou du Javascript via les attributs id, class  Les attributs id et class permettent de distinguer une ou des balises de même nature (des paragraphes par
• Css : ou style.
exemple) qui n'ont pas la même «finalité».
p{
color: red;
 Pour distinguer les éléments qui doivent êtres écrits d'une manière différente, il faut définir des groupes de
font-size: 16px;
} balises à l'aide de l'attribut class.
• html :
 Existe pour tous les éléments;
<p>Lorem d nam consequuntur?</p>
<p>Lorem ipsum dolor sit, amet consectetur</p>
 Permet de marquer des éléments d’un document comme appartenant à une même « classe »;

<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>  Ajoute une sémantique commune aux éléments de la même classe.
 Permet de définir un style personnalisé.
 TOUS les paragraphes de la page seront écrits en rouge, avec une taille de 18 pixels.
 Comment faire pour que seulement certains paragraphes (ou certains titres, ou certaines citations)
soient écrits d'une manière différente ?

29 30

Et l'attribut id ?
Exemple :

 Il fonctionne exactement de la même manière que class, à un détail près : il désigne un élément unique.
 Voici comment écrire en vert, 18px des paragraphes correspondants aux énoncés d'exercices :
 Par exemple si on veut atteindre un paragraphe bien précis d’une page à partir d’un lien d’une autre page,
• En html : Ajoutez l'attribut class= " enonce" à chacune des balises à lesquelles vous voulez appliquer ce
<!-- Partie html -->
ce paragraphe doit être identifié çad doit avoir un attribut id.
style.
<p class="enonce">
 Dans la CSS, ce n'est pas un point que vous devez mettre avant le nom de l'id, mais un dièse (#) :
• html : Un énoncé d'exercice.
</p>
<p class="solution">
Solution de l’exercice.
</p>
• En CSS, au lieu de mettre le nom de la balise avant les accolades (comme p ou encore h1), vous devez écrire
Balises div et span, attributs class et id :
un point suivi du nom de la class :
• CSS :  Les balises div et span sont utilisées en association avec des feuilles de style CSS ou du Javascript
.enonce { color : green; font-size : 18px; } via les attributs id, class ou style.
.solution { color : blue; font-style : italic;}

31 32
11/02/2025

Les différents types de Sélecteurs CSS : Sélecteur de classe :


 Les sélecteurs peuvent être regroupé selon 5 catégories :
 Possibilité d'appliquer à un même élément plusieurs classes de style différentes.
1. Sélecteurs simples :
Exemple :
 Sélectionnent des éléments selon leur type (balise), leur id ou leur classe. Code HTML :
Exemple : <h1>Le CSS</h1>
<p>Comme l'a dit <span>Neil Amstrong</span> un
<p class="second-p">Lorem d nam consequuntur?</p>
certain 20 juillet 1969...</p>
<div> <p class="second-p encadré">Lorem ipsum dolor sit, amet
<h2>Les règles CSS</h2>
<ul> consectetur</p>
<li>Syntaxe d'une règle CSS</li>
<li>Les propriétés raccourcies </li>
<ol> Code CSS :
<li id="first-li-ol">Avec 4 valeurs </li>
<li>Avec 3 valeurs </li>

</ul>
</ol> .second-p{
</div> color: red;
<p class="second-p encadré">Lorem ipsum d sunt amet }
similique asperiores,</p>
.encadré{
span{color: blue;} border : solid
p{color: green;} }
.second-p{color: red;}
#first-li-ol{color: rgb(243, 200, 30);} 33 34

Sélecteur de classe (suite): Groupement de sélecteurs :

 Possibilité de restreindre une classe à un type d'élément. Le nom de la classe est préfixé par  Forme : sélecteur1, sélecteur2,… { déclaration1 ; déclaration2; … }
le nom de la balise.  Le groupement de sélecteurs permet d'associer une même règle de style à plusieurs sélecteurs.
Exemple :
Code HTML :
Exemple :
<h1>Le CSS</h1> <h1>Le CSS</h1>
<p class="italique">Comme l'a dit <span>Neil Amstrong</span> un <p class="italique">Comme l'a dit <span>Neil
Amstrong</span> un certain 20 juillet 1969...</p>
certain 20 juillet 1969...</p> <div>
<div> <h2 class="italique">Les règles
<strong>CSS</strong></h2>
<h2 class="italique">Les règles CSS</h2> <ul>
…. <li>Syntaxe d'une règle CSS</li>
<li>Les propriétés raccourcies </li>
<ol>
Code CSS : <li id="first-li-ol">Avec 4 valeurs </li>
<li>Avec 3 valeurs </li>
.italique{ <li>... </li>
font-style: italic; </ol>
</ul>
color: green; </div>
}
[Link]{ strong,#first-li-ol,h1{
font-variant: small-caps; font-family: 'Courier New', Courier, monospace;
} 35 font-size: 24pt;} 36
11/02/2025

Limites des sélecteurs simple :


2. Sélecteurs combinés :
 Problème : comment associer un style à des éléments en fonction de leur situation dans  Sélectionnent des éléments selon leur situation dans l'arbre défini par l'imbrication des
l'arborescence ? éléments.
Par exemple : particulariser les liens hypertexte qui se trouvent dans une liste en leur donnant une Rappel : arbre des éléments et relations entre éléments
couleur de fond sans faire appel aux classes.
Exemple : <div>
<h1>Titre principal</h1>
<h2>Titre de <i>niveau</i> 2</h2>
<p>
<a href="#">un lien</a>
<p>Et là une petite <em>image</em>
<img src="./images/[Link]" width="100px"
alt="logo"></p>
</p>

37
</div> 38

Exemple (suite) :
2. Sélecteurs combinés (suite) :
Relation enfant de(child) :
Arbre DOM (Document Object Model)
h1 est enfant de div  Forme générale :
i est enfant de h2 selecteur1 combinateur selecteur2{ déclaration;...}
div
Relation descendant de:  Cible (sélectionne) parmi les éléments sélectionnés par sélecteur2 uniquement ceux qui ont une relation
un nœud x est descendant d'un nœud y si x est enfant de y ou est
h1 h2 p enfant d'un enfant de y
définie par le combinateur avec un élément sélectionné par selecteur.
h1 est descendant de div  4 combinateurs possibles :
Em est descendant de p et div
 (space) : descendant ;
i a p
Relation 1erfrère suivant (adjacent sibling):
 > : descendant direct ou enfant (child) ;
P est le 1erfrère suivant de h2
 ~ : frère suivant (general sibling).
Img est le 1erfrère suivant de em
 + : 1er frère suivant (adjacent sibling) ;
em img Relation frère suivant (generalsibling):
un nœud x est frère suivant d'un nœud y si x est
1erfrère de y ou est 1erfrère d'un frère suivant de y

P est le frère suivant de h1et h2


Img est le frère suivant de em 39 40
11/02/2025

a. Combinateur descendant (space) : b. Sélecteur de nœuds enfants


 Possibilité de combiner des sélecteurs descendants ;  Forme : sélecteur1 > sélecteur2 { déclaration ; déclaration }
 Forme : sélecteur1 sélecteur2 { déclaration ; déclaration }  S'applique à tout élément désigné par sélecteur2 dont le parent direct est un
 S'applique à tout élément désigné par sélecteurn qui descend (directement ou indirectement) d'un élément désigné par sélecteur1
élément désigné par sélecteurn-1… qui descend d'un élément désigné par sélecteur2 qui descend d'un Exemple :
header > a{
<header>
élément désigné par sélecteur1 color: green;
<a href="#">Je suis un enfant direct du
header, j'ai pris le style vert italic </a> font-style: italic;
Exemple : <h1>Balises <a }
header a {
<header> color: green; href="#">sémantiques</a></h1>
<a href="#">Je suis un enfant direct du header, j'ai font-style: italic; <h3>Découvrez les balises sémantiques
pris le style vert italic </a> } </h3>
<h1>Balises <a href="#">sémantiques (enfant indirect du <button><a href="#">Commencez maintenant,
header)</a></h1> (comme header est mon grand père je suis ni vert,
<h3>Découvrez les balises sémantiques </h3> ni italic)</a></button>
<button><a href="#">Vous voyez, on est tous (liens
</header>
descendant de header) vert italic</a></button>
</header>

41 42

c. Sélecteur de nœuds adjacents : d. Sélecteur de nœuds frères :

 Forme : sélecteur1+sélecteur2{ déclaration ; déclaration }  Forme : sélecteur1 ~ sélecteur2 { déclaration ; déclaration }

 S'applique à tout élément désigné par sélecteur2 dont le frère directement précédent dans le flux du  S'applique à tout élément désigné par sélecteur2 dont un frère précédent dans le flux du balisage de la

balisage de la page HTML est un élément désigné par sélecteur1 page HTML est un élément désigné par sélecteur1

Exemple : Exemple :
<header>
<header>
<h1>Balises <a href="#">sémantiques</a></h1> <h1>Balises <a href="#">sémantiques</a></h1>
<h3>Découvrez les balises sémantiques en HTML5</h3> <h3>Découvrez les balises sémantiques en HTML5</h3> H1~h3{
<button><a href="#">Commencez maintenant</a></button> h1+h3{ <button><a href="#">Commencez maintenant</a></button>
<h3>Un autre titre h3 qui n'est pas adjacent à h1, la <h3>Un autre titre h3, malgré que je ne suis pas adjacent à h1,
color: green;
preuve je ne suis pas vert</h3> color: green; je suis vert</h3> }
</header> } </header>

43 44
11/02/2025

3. Sélecteurs de pseudo-classes :
Sélecteurs de pseudo-classes Structurelles :
 Sélectionnent des éléments en fonction de l'état dans lequel ils se Les pseudo-classe Structurelles permettent de cibler un élément fils (premier, dernier, nième,…) par
trouvent. rapport à son élément parent.
 Une pseudo-classe est un mot clé préfixé par deux points (:) qui s'ajoute à un sélecteur CSS
Note : il est nécessaire que l'élément sélectionné ait un élément parent.
pour appliquer un style à un élément dans un cas particulier.
Exemple1 Sélecteurs de pseudo-classes Structurelles :
 Forme : sélecteur:pseudoClasse { declaration1; declaration2;...}
.item:first-child {
 On peut accéder aux éléments sélectionnés par le sélecteur et répondant à des <ul>
color: red;
caractéristiques : } <li class="item">Premier élément</li>
<li class="item">Deuxième élément</li>
.item:last-child { <li class="item">Troisième élément</li>
Structurelles: :first-child, :last-child, :nth-child(n) …. color: blue; </ul>
D’ancres: :link et :visited }

Dynamiques: :hover, :active et :focus .item:nth-child(2){


color: green;
45 } 46

Exemple2 Sélecteurs de pseudo-classes Structurelles : Liste des pseudo-classes d’ancres et dynamiques les plus utilisées en CSS :
:active
Colorier les lignes paires et impaires d’une table (par exemple la table de l’exo de la série 1) avec deux
La pseudo-classe :active désigne un lien hypertexte sélectionné. Il s'agit de l'instant où le visiteur clique sur le
couleurs différentes.
lien, si celui-ci reste affiché sur la page (cas où la page est figée après le clic, ou le lien est ouvert dans une
tr:nth-child(2n){
background-color: orange; nouvelle fenêtre) on peut voir l'effet de cette pseudo-classe.
} :hover

tr:nth-child(2n+1){ La pseudo-classe :hover désigne un objet survolé par le curseur de la souris, il peut être un hyperlien ou n'importe
/* ou bien tr:nth-child(odd){ */ quel autre objet.
background-color: rgb(255, 0, 34);
} :link
La pseudo-classe :link désigne un lien hypertexte dont la page cible (celle spécifiée dans son attribut href) n'a pas
encore été visitée. Elle peut aider les internautes à distinguer les liens qu'ils n'ont pas encore exploré.
:visited
A l'inverse de link, la pseudo-classe :visited désigne un lien hypertexte dont la page cible a déjà été visitée. C'est un
genre d'historique en quelque sorte.

47 48
11/02/2025

Exemple Sélecteurs de pseudo-classes d’ancres : 4. Sélecteurs de pseudo-élément :

<nav>  Sélectionnent et stylent une partie d'un élément.


<ul>
<li><a href="[Link]">Accueil</a></li>  Permettent d'agir sur une partie ou une position de l’élément sélectionné (premier caractère, après
<li><a href="[Link]">Balises sémantiques</a></li>
<li><a href="[Link]">L'importance du HTML sémantique</a></li> l'élément...).
<li><a href="[Link]">Quiz !</a></li>
<li><a href="[Link]">Ressources</a></li>  Forme :sélecteur::pseudoElt { déclaration; ... }
</ul>
</nav> Exemples
 ::first-line
a:hover{
color: rgb(13, 204, 42);  ::first-letter
}
a:visited{  ::before
color: yellow;
 ::after
}
a:active{  ::selection
color: orangered;
}  …
L’effet de hover et L’effet de active et
visited visited
49 50

Exemple : 5. Sélecteurs d'attributs :


<a href="">Je suis un lien</a>
a::after {
content: " >>>> "; <p class="selection">Quand tu me sélectionne je
background-color: aqua; deviens rouge, et je me fais un fond jaune.</p>  Sélectionnent un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.
}
a::before { <p>Pas moi. Sélectionne moi pour voir que je n'ai
content: " <<<< "; pas changer par apport à d'habitude ! </p> Exemple :particulariser les liens selon leur destination.
background-color: coral;
}
<p>Je suis un paragraphe. Je suis <ul>
un paragraphe. Je suis un <li><a href="[Link] 1</a></li>
p::first-letter {
font-size: 2em; paragraphe. Je suis un <li><a href="[Link] 2</a></li>
background-color: aqua; paragraphe. Je suis un <li><a href="[Link] 3</a></li>
} paragraphe. p> </ul>
.selection::selection { a[href^="[Link] {
background-color: yellow; color: green;
color: red; font-size: 16pt;
} }
p::first-line { a[href="[Link] {
font-weight: bold;
background-color:
font-size: 18pt;
coral; Le chapeau (^) dans le sélecteur a[href^="[Link]
}
} est utilisé pour sélectionner les éléments <a> qui ont
un attribut href commençant par une certaine valeur.
51 52
11/02/2025

Résumé des sélecteurs CSS : Propagation (cascade) des styles dans l'arbre des éléments (l’héritage) :
Motif Signification  Propagation des propriétés d'un élément parent aux éléments descendants.
* Sélecteur universel, sélectionne toutes les balises sans exception.

.val Sélecteur de classe, les éléments dont l’attribut class ="val"


Remarque : Cela ne concerne pas toutes les propriétés
#mon_id Sélecteur d’id, les éléments dont l’id est mon_id.
(ex. border pour les boites, pas de propagation)
E Sélecteur de balise, la balise E (un élément de type E).

[Link] La balise E dont l’attribut class ="val“. <div >


E#mon_id La balise E dont l’id est mon_id. <h2>Les règles CSS</h2>
<ul>
E, F Groupement de balises, sélectionne la balise E et F. div{
<li>Syntaxe d'une règle CSS</li>
color:purple;
EF Sélecteurs descendants, la balise F descendant de la balise E. <li>Les propriétés raccourcies </li>
}
E>F Sélecteur enfant, la balise F descendant direct de la balise E. <ol>
<li>Avec 4 valeurs </li>
E~F Sélecteur de nœuds frères, la balise F précédé par la balise E.
<li>Avec 3 valeurs </li>
E+F Sélecteur de nœuds adjacents, la balise F immédiatement précédé par la balise E. </ol>
.item:first-child Sélecteurs de pseudo-classes, le premier enfant de l’élément dont la class="item“. </ul>
Sélecteurs de pseudo-élément, sélectionne une partie d'un élément, la première ligne d’un </div>
p::first-line
paragraphe.
E[att] Sélecteur d’attribut, la balise E qui contient l’attribut att (peu importe la valeur).

E[att="val"] Sélecteur d’attribut, la balise E qui contient l’attribut att à la valeur val.
53 54

L’héritage en CSS : Remarques :

 Que se passe-t-il lorsque l’on donne des ordres contradictoires à un élément en CSS ??  Un inline style est plus prioritaire qu’un style interne,

Exemple :  La priorité entre un style interne et un style externe défini dans un fichier CSS lié via une

<p class="rouge" id="premier" style="color: pink;">Lorem ipsum balise <link>, depend de la position de la balise <link> dans le code.
dolor sit amet.</p>
 Un style d’id est plus prioritaire qu’ un style de classe qui à son tour plus prioritaire qu’ un
.rouge{font-size: 18px;
color: red; style de balise.
Au final, quel est le style qui sera appliqué font-weight: bold;}
au paragraphe?? Quelle couleur? Quelle  On utilise le terme «spécificité» plus élevée au lieu de plus «prioritaire»
#premier{font-size: 26px;
taille? Quelle font-style? Quelle font-weight? color: orangered;}
Lorsqu'il y a un conflit entre plusieurs règles CSS, le navigateur utilise la
p{font-size: 14px;
font-style: italic; règle avec la spécificité la plus élevée. Si la spécificité est la même, la
color:rgb(41, 140, 151)}
règle qui apparaît en dernier dans le code CSS est appliquée.
Remarque : Les conflits sont résolus propriété par propriété.
55 56
11/02/2025

Le calcul de la spécificité des sélecteurs CSS :


Exemples :

 La spécificité est une sorte de poids qui détermine quelle règle est la plus spécifique et donc
 p .special aurait une spécificité de 0-0-1-1 (1 pour la classe, 1 pour l'élément p).
laquelle prévaut lorsque plusieurs règles s'appliquent à un même élément.

 La spécificité est souvent représentée par une séquence de quatre nombres, par exemple : 0-  div p aurait une spécificité de 0-0-0-2 (Additionnez 1 pour div et 1 pour p).

0-0-0. Chaque partie de ce nombre a un rôle dans la spécificité globale :  .special aurait une spécificité de 0-0-1-0 (1 pour la classe special).
 Les règles inline ont une spécificité de 1-0-0-0.
 div aurait une spécificité de 0-0-0-1 (1 pour l'élément div).
 Un sélecteur d'ID a une spécificité de 0-1-0-0.
 Un sélecteur de classe, d'attribut ou de pseudo-classe a une spécificité de 0-0-1-0.  #important a une spécificité de 0-1-0-0 (1 pour l’id important)

 Un sélecteur d'élément ou de pseudo-élément a une spécificité de 0-0-0-1.  p .special #important aurait une spécificité de 0-1-1-1 (1 pour la classe, 1 pour

l'élément p).

57 58

Spécificité d’une propriété avec !important :

 Une propriété avec !important est plus spécifique que toutes les autres.
Note :
Exemples :

<p class="rouge" id="premier" style="color: pink;">Lorem ipsum  Il est important de noter que l'utilisation excessive d'IDs pour
dolor sit amet.</p>
augmenter la spécificité n'est pas une bonne pratique de
développement front-end, car cela peut rendre le code difficile à
.rouge{font-size: 18px;
color: red; maintenir et à modifier. Il est généralement préférable d'utiliser des
font-weight: bold;}
sélecteurs de classe pour la stylisation, sauf si un ciblage très
#premier{font-size: 26px;
color: orangered;}
spécifique est nécessaire.

p{font-size: 14px;
font-style: italic;
color:rgb(41, 140, 151) !important}
59 60
11/02/2025

Les couleur en CSS (2) :


La mise en forme :
 Canal alpha (opacité) rgba(r,g,b,a) avec transparence, a est une valeur entre 0 (transparent)
Les couleur en CSS : et 1 opaque.
Pour décrire une couleur en CSS, il existe plusieurs méthodes: Par exemple : color:rgba(255,255,0, 0.6);

1. Par son nom (en anglais) : Ce n'est pas très pratique comme méthode car peu de couleurs ont 3. hsl est l'abréviation de "Hue, Saturation, Lightness" soit en français "Teinte, Saturation, Luminosité".
réellement de noms, alors qu'ils en existent plus de 16 millions en tout.  accepte 3 valeurs entières dans l'ordre cité :
2. Synthèse additive à partir des couleurs primaires (Rouge, Vert, Bleu) - Hue, comprise entre 0 et 360.
 Notation hexadécimale : #rrggbb - Saturation, comprise entre 0 et 100 %.
Par exemple : color:#af6307; - Ligthness, comprise entre 0 et 100 %.
 Notation décimale rgb : accepte 3 valeurs entières comprises entre 0 et 255 ou 3 valeurs  hsla accepte les 3 valeurs ci-dessus et une valeur comprise entre 0 (totalement transparent) et 1
entières en pourcentage. (totalement opaque).
Par exemple : color: rgb(210, 48, 65); Par exemple : color: hsl(240, 100%, 50%)
61 color: hsl(140, 20%, 40%, 0.9) 62

Les unités de mesures en CSS : Types des unités EN CSS :

Unités absolues :
 Les feuilles de style CSS permettent d’utiliser de nombreuses unités de mesure soit en
pouces (inches), en centimètres, en millimètres, en points, en picas, en pixels, en  Toutes les unités absolues sont équivalentes selon le rapport suivant :

pourcentage,…. 1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc.


 px le pixel : Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage.

ATTENTION : si vous spécifiez des valeurs décimales, vous devez utiliser la notation anglaise (un
point à la place de la virgule). Exemple : "1.4em" et non pas "1,4em".

63 64
11/02/2025

Unités relatives : Propriétés et techniques spécifiques à différentes tailles d'écrans :

 ex représente un pourcentage de la hauteur de la lettre "x" minuscule dans la police de l'élément, utilisée [Link]-width et Min-width : Ces propriétés permettent de définir la largeur maximale et minimale d'un élément. En les
pour adapter les espacements et alignements aux petites tailles de texte. combinant avec d'autres unités, comme les pourcentages, vous pouvez créer des mises en page qui s'adaptent de manière
 Pourcentage (%) : définit la taille d'un élément par rapport à la taille de son conteneur parent et est l'une fluide à différentes tailles d'écrans.

des techniques les plus courantes pour créer des mises en page responsives. [Link] Queries : Bien qu'ils ne soient pas des unités de mesure en tant que tels, les media queries sont un outil essentiel
pour créer des mises en page responsives en CSS. Ils permettent d'appliquer des styles différents en fonction des
 Viewport Width (vw), Viewport Height (vh) : Cette unité représente un pourcentage de la largeur (resp la
caractéristiques de l'appareil, telles que la largeur de l'écran, l'orientation, etc.
hauteur) de la fenêtre d'affichage (viewport). Par exemple, 1vw (resp 1vh) correspond à 1% de la largeur
En combinant judicieusement ces unités et techniques, vous pouvez créer des mises en page CSS qui s'adaptent de manière
(resp la hauteur) de la fenêtre.
dynamique à une variété de périphériques et de tailles d'écrans.
 Rem, Em : Ces unités sont relatives à la taille de la police de l'élément parent. Em est relatif à la taille de la
police de l'élément lui-même, tandis que Rem est relatif à la taille de la police de l'élément racine (<html>).
Ils sont souvent utilisés pour créer des mises en page responsives basées sur la taille de la police.

65 66

Les propriétés CSS liées à la police :


Note : Il est possible de réunir plusieurs de ces propriétés (style, graisse, taille puis famille) en utilisant le
Les propriétés CSS de type font- (police en français) vont nous permettre de modifier l’apparence des raccourci font.
caractères de notre police d’écriture.  Les valeurs de ces propriétés peuvent êtres spécifiées dans n'importe quel ordre.
 Si vous ne spécifiez pas une valeur, CSS utilisera sa valeur par défaut.
• font-size : pour modifier la taille de notre police d’écriture. Cette propriété accepte des valeurs absolues
Exemple :
et des valeurs relatives. p
{
• font-weight (normal | bold) : définit le poids d’une police, c’est-à-dire son épaisseur. font : italic bold 12pt Times, serif;
}

• font-style (normal | italic) : défini le poids d’une police, c’est-à-dire son épaisseur.

• La propriété font-family permet de définir une liste, ordonnée par priorité,


• font-family : le type de police utilisée pour le contenu.
de polices à utiliser pour mettre en forme le texte de l'élément ciblé.
• font-variant (normal | small-caps) : normale | petites capitales.
67 68
11/02/2025

LES PROPRIÉTÉS CSS POUR LE TEXTE : LES PROPRIÉTÉS CSS POUR LES LISTES :

• text-align: left | right | center | justify : aligné à gauche | aligné à droite | centré | texte justifié  list-style-type: disc | circle| square| decimal | decimal-leading-zero | upper-roman |lower-
• text-decoration: none | underline | overline | line-through : rien | souligné | surligné | rayé roman | upper-alpha | lower-alpha : permet de déterminer l’apparence de la puce ou le
• text-transform: none | capitalize | uppercase | lowercase : met en majuscule la 1ère lettre des mots | met style de numérotation de la liste.
en majuscules | met en minuscules
 list-style-position: outside | inside : permet de déterminer la position de la seconde ligne
• text-indent : permet de spécifier quelle indentation (ou retrait de première ligne) appliquer à la première
(et les suivantes) d’un élément de liste par rapport à la puce ou la numérotation.
ligne du texte.
• word-spacing : permet de spécifier l'espacement entre les mots du texte.  list-style-image: url(votre_puce.gif) |none : permet de remplacer les puces par une
• letter-spacing : permet de spécifier l'espacement entre les lettres du texte. image.
• line-height: permet de modifier les interlignes.  list-style : permet de reprendre dans une seule déclaration de style les valeurs
• white-space : pre | nowrap | normal : permet de contrôler les espaces vides.
précédentes (list-style-type, list-style-image, list-style-position).
• text-shadow : x y z :permet d’appliquer une ombre portée au texte.
• Il existe aussi des propriétés qui permettent de créer des blocs de texte avec des colonnes.
69 70

LES PROPRIÉTÉS CSS POUR LES TABLEAUX : LA MISE EN FORME DES BORDURES DE BOÎTES :

 border-style : solid |dashed | dotted | double | groove | ridge | inset | outset | hidden | none
 border-spacing : définit la distance qu'il y a entre les bordures de cellules adjacentes d'un : permet d’apporter une variété de bordures.
tableau.  border-width : permet de définir l’épaisseur des quatre bordures.
 border-collapse : collapse | separate :  border-color : permet de définir la couleur de la bordure.
 La valeur collapse fusionne les deux bordures adjacentes, ce qui donne l’aspect d’une  border : permet de noter de façon raccourcie les différentes propriétés permettant de définir
bordure unique. les bordures d’un élément, soit border-color, border-style et border-width.
 La valeur separate affiche les deux bordures séparément, ce qui est la situation par  border-radius : x y : permet d’arrondir les quatre extrémités de la bordure de la boite.
défaut.
 caption-side : bottom | top : permet de positionner la légende du tableau.

71 72
11/02/2025

Exemple : <style> LA MISE EN FORME DES BOÎTES (2) :


#round1 { width: 70px;
Code CSS : height: 70px;  background-image : url(fichier_image) | none : permet d’insérer une image de fond disposée de
background-color: rgb(185,205,225);
border: 1px solid gray; façon classique, soit en mosaïque.
border-radius: 35px; }
 background-repeat : repeat | repeat-x | repeat-y |no-repeat : permet de donner le contrôle au
#round2 { width: 12em;
height: 4em; concepteur quant à la répétition de l’image qui ne sera ainsi plus nécessairement disposée en
background-color: rgb(185,205,225);
border: 1px solid gray; mosaïque.
border-radius: 1em 4em 1em 4em;}
</style>  background-attachment : scroll |fixed : permet de fixer une image de fond qui ne défile pas avec
Code html : le reste de la page.

<body>
 box-shadow : x y z : permet de définir les ombres portées des boîtes.
<p></p>
<div id="round1"></div>
Rendu :  resize : none | both | horizontal | vertical : permet de redimensionner un élément.
<p></p>
<div id="round2"></div>
 background-position : valeur1 valeur2 :
</body>
o valeur1 position horizontale par rapport au bord gauche left, right ou pourcentage.
o valeur2 si présente, position verticale par rapport au bord supérieur top, bottom ou pourcentage.
73 74

La mise en page :
Modèle de boite (2)
Modèle de boite :
Un élément html est matérialisé par une boîte rectangulaire composée de 3 parties :
 La taille du contenu, la bordure et la marge externe d'une boîte peuvent être contrôlés par des
1. Son contenu (contenu de l'élément : texte, image… autres éléments…)
propriétés CSS.
2. Un cadre
 Une bordure ;
 Un marge interne (marge entre le contenu et la bordure).
3. Une marge externe
 Marge entre le cadre et les boîtes matérialisant les éléments adjacents dans le flux.

75 76
11/02/2025

Affichage des éléments HTML Exemple : flux normal


Flux du document
<body>
 Chaque élément HTML considéré comme une boîte rectangulaire. <nav>
<ul>
 Flux du document : ordre dans lequel le navigateur affiche ces boîtes. <li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Balises sémantiques</a></li>
Flux normal (par défaut) : </ul>
</nav>
 Un élément père est un conteneur
<header class="header1">
 Un élément fils s'affiche dans son conteneur <p><a href="#">Lorem ipsum dolor sit amet. </a></p>
<h1>Balises <a href="#">sémantiques </a></h1>
 Élément bloc <h3>Découvrez les balises sémantiques </h3>
<button><a href="#">Ok!!!</a></button>
 S'affiche en dessous de son frère précédent. </header>
</body>
 Occupe toute la largeur disponible dans son conteneur.
 Élément en ligne
 S'affiche à côté de son frère précédent.
 Retour à la ligne quand il n'y a plus de place dans le conteneur.
 Flux personnalisé
 Certaines propriétés CSS permettent de sortir des éléments du flux normal 77 78

LA MISE EN PAGE DES BOÎTES : 1. Marges externes :

 La mise en page des boîtes en CSS fait référence à la façon dont les éléments HTML sont  Les marges externes en CSS sont un outil essentiel pour la mise en page des boîtes. Les marges
disposés et présentés sur une page web. externes contrôlent l'espace entre les éléments et leur environnement extérieur, ce qui peut

TECHNIQUES DE MISE EN PAGE DES BOÎTES : grandement influencer la mise en page globale d'une page web.

1. Marges internes externes ;


2. Positionnement (propriété position) ;  La plupart des navigateurs appliquent des marges par défaut aux éléments html. Ces marges par

3. Floats (display: float) ; défaut peuvent varier légèrement d'un navigateur à l'autre.

4. Flexbox (display: flex) ;  Pour avoir un meilleur contrôle sur la mise en page, les développeurs Web utilisent souvent une

5. CSS Grid. "réinitialisation CSS" (CSS reset) ou une "normalisation CSS" (CSS normalize) au début de
leur feuille de style.

79 80
11/02/2025

Exemple de marges externes, avec css par défaut :


Exemple 2 avec marges internes et externes par défaut :

<div>
<h1>Définition d'une marge externe autour d'un bloc</h1>
<p> Les marges extérieures
servent généralement à éloigner un élément d'un autre.</p>
</div>

p {
Même exemple avec css reset : border: solid 2px red;
background-color: yellow;
* { }
margin: 0; h1{
padding: 0; border: dashed 3px green;
background-color: purple;
box-sizing: border-box; }
} div{
background-color: orangered;
border: dotted 2px blue;
}

81 82

Même exemple avec des marges internes et externes définies : 2. Positionnement (propriété position) ;
p { div{
border: solid 2px red; background-color: orangered;
background-color: yellow; border: dotted 2px blue;
 position : static | relative | absolute | fixed : permet de positionner un élément.
width:500px; width: 450px; Types de position :
padding: 20px; margin: 30px;
} }
h1{ static Le concepteur n’a donc pas le contrôle. L’élément ne peut être positionné ou repositionné et sa
border: dashed 3px green;
background-color: purple; visibilité ne peut être modifiée. Il n’est également pas possible d’utiliser du JavaScript pour
margin: 50px;
} changer la position de l’élément.

30px relative C’est le positionnement d’un élément par rapport à sa position normale ou statique ( en
30px 50px utilisant left, right, top et bottom). (voir exemple_relative)

absolute 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 par apport au premier
500px;
20px parent positionné. (voir exemple_absolue)
20px
fixed Le positionnement fixe crée aussi un élément indépendant dont on peut définir la position. Ici
450px;
83
l’élément reste fixe même lorsque l’on fait défiler la page. (voir exemple_fixe) 84
11/02/2025

Exemple_ relative : .normale { width: 180px;


border: 2px solid gray;
text-align: center;} Remarques sur le positionnement relatif d'un élément :
<div class="container"> .container{
<div class="boite">Position normale statique</div> display: inline-block;
<p>. . . . . . . .. . . . . . .</p> width: 300px;
<div class="boite">Position relative</div>
height: 200px;  L'élément est décalé à l'aide des propriétés top, right, left, bottom par rapport à sa position
border: 2px solid rgb(146, 7, 7);}
</div> .relative{
<div class="container"> position: relative; normale dans le flux courant.
<div class="boite">Position normale statique</div> top: 30px;
<p>. . . . .. . . . . . . . .</p> left: 60px;}
<div class="boite relative">Position relative</div> .boite {  L'élément peut prendre place au dessus de ses éléments frères.
</div> width: 180px;
border: 2px solid gray;
text-align: center;}  L'élément reste dans le flux normal du document, donc il prend toujours de la place dans le

flux des autres éléments. Çàd, il laisse un espace vide à l'endroit où il aurait dû être, s'il n'avait
Remarque : Si on ne met pas la position
à relative, le décalage ne fera pas effet. pas été déplacé.

30 px

60 px

85 86

Code CSS :
Exemple_ absolue : Remarques sur le positionnement absolute d'un élément :
<style>
.absolu {
position: absolute;
left: 50px;
top: 50px;
 Lorsqu'un élément est positionné en absolute, il est positionné par rapport à son premier
width: 180px;
border: 2px solid black; ancêtre positionné. Si aucun parent n'a une position spécifiée (relative, absolute, ou fixed),
text-align: center;
} alors l'élément est positionné par rapport au corps de la page.
</style>
 L'élément est retiré du flux normal du document, ce qui signifie qu'il ne prendra pas de place
Code html :
<p>. . . . . . . . . . . . . . . . . . . . .</p> dans le flux des autres éléments.
<p>Hi boite absolue, tu m'écrase!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
<div class="absolu">  Les autres éléments ne tiendront pas compte de cet élément lorsqu'ils seront positionnés, donc ils
Position absolue
</div> pourraient se chevaucher avec l'élément absolute.
Rendu :  Un élément absolute peut être placé n'importe où par rapport à son parent positionné, en utilisant
50px
les propriétés top, right, bottom, et left.
50px

87 88
11/02/2025

La propriété z-index :
Exemple_ fixe : Code CSS : <style>
.fixe {position: fixed;
top: 50%;  La propriété z-index est utilisée pour contrôler l'empilement des éléments positionnés les uns par
left: 50px;
width: 180px;
border: 2px solid black; rapport aux autres sur l'axe Z (la profondeur) de la page web. Cela signifie que z-index détermine
text-align: center;}
}
</style> quel élément sera affiché par-dessus un autre lorsque des éléments se chevauchent sur la page.

Code html :  Plus la valeur z-index est élevée, plus l'élément est affiché au-dessus des autres.
<p>. . . . . . . . . . . . . . . . . . . . .</p>
<div class="fixe">  Si aucun z-index n'est spécifié, l'ordre dans le code HTML détermine l'empilement : les éléments
Position fixe
</div>
<img src="./images1/[Link]" alt=""> qui apparaissent en dernier dans le code HTML seront affichés "au-dessus" des éléments qui
<img src="./images1/[Link]" alt="">
<img src="./images1/[Link]" alt=""> apparaissent avant.
<img src="./images1/[Link]" alt="">

 z-index ne fonctionne que sur des éléments positionnés (position: relative, position: absolute, ou
Rendu : Pour voir l’effet de position, faites défiler la page.
position: fixed). Si z-index est appliqué à un élément sans positionnement, il n'aura aucun effet.
89 90

Exemple_ z-index :
.boite3 {
Code css : position: absolute;
2. Modifier l'affichage et le comportement d'un élément HTML avec la propriété display :
left: 60px;
<style> top: 80px;
.boite1 { width: 80px;
position: absolute; height: 40px;
left: 20px; padding: 4px;  La propriété CSS display est une propriété qui change le mode d'affichage par défaut
top: 20px; border: 2px solid gray;
width: 80px; background-color: white;
Rendu :
height: 40px; z-index: 3; d'un élément HTML.
padding: 4px; }
border: 2px solid gray; </style>
background-color: rgb(125, 165, 205);
z-index: 1;
 Elle peut par exemple transformer un élément en bloc en élément en ligne, convertir un
}
.boite2 {
position: absolute; titre en élément de liste ou encore organiser des paragraphes sous forme de tableau,…
left: 40px; Code html :
top: 50px;
width: 80px;
height: 40px;
<div class="boite1">  Le code HTML ne change pas, seul le code CSS est modifié.
z-index 1
padding: 4px; </div>
border: 2px solid gray; <div class="boite2">
background-color: rgb(215, 230, 245); z-index 2
z-index: 2; </div>
} <div class="boite3">
z-index 3
</div> 91 92
11/02/2025

Exemple 2 :
Exemple 1 : h1 h2
p { span { { {
display: inline display: block display: list-item; display: list-item;
} } list-style-type: decimal; list-style-type: disc;
list-style-position: inside; list-style-position: inside;
<p>Dans cette phrase, le <span>mot 1</span> et le <span>mot 2</span> deviennent } }

des éléments de bloc.</p>

<p>Avec la propriété CSS display: inline, les paragraphes s'affichent en


<h1>Titre 1</h1>
ligne.</p>
<p>Paragraphe de texte.</p>
<h1>Titre 2</h1>
<p>Deuxième paragraphe de texte.</p>
<h2>Sous-titre</h2>
<h2>Sous-titre 2</h2>
93 94

li {
Exemple 3.1: display: inline-block; Exemple 3.2: <h2>display : inline-block </h2> .boite{
<div class="boite">Boite flottante</div> width:200px;
<ol> padding: 10px 20px; <div class="boite">Boite flottante</div>
<li> <a href="#">Lien 1</a> </li> background-color: #007bff; <div class="boite">Boite flottante</div>
height:80px;
<li> <a href="#">Lien 2</a> </li> color: #ffffff; <div class="boite">Boite flottante</div> border: red solid 2px;
<li> <a href="#">Lien 3</a> </li> text-decoration: none; <div class="boite">Boite flottante</div> display: inline-block;
<li> <a href="#">Lien 4</a> </li> border-radius: 5px; <div class="boite">Boite flottante</div> margin: 10px;
} <div class="boite">Boite flottante</div>
<li> <a href="#">Lien 5</a> </li>
<div class="boite">Boite flottante</div>
}
<li> <a href="#">Lien 6</a> </li> a {
<div class="boite">Boite flottante</div>
<li> <a href="#">Lien 7</a> </li> /* display: inline-block; */
</ol> width: 70px;
}

a:hover{
background-color: #0056b3;
}

 Les éléments inline-block se comportent comme des éléments en ligne mais peuvent avoir une largeur
et hauteur. 95 96
11/02/2025

Exemple1_ float :
3. Positionnement flottant : Code : Rendu :
<div>
 Possibilité de faire flotter des éléments sur la ligne. <img src="./images1/[Link]">
</div>
<p>Lorem ipsum dolor sit amet,
 float: right| left| none : permet de retirer un élément ″boîte ″ du flux normal pour le placer consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus <p>
le plus à droite ou le plus gauche possible dans son élément parent, soit son conteneur. (voir
Exemple1_ float et Exemple2_ float ) Rendu si on rajoute le style float : "right"
au div conteneur de l’image :
 clear: right | left | both : permet d’annuler le flottement introduit par la propriété float.

[Link] est la conséquence de flotter un élément à gauche ou à droite ?


2.a) L'élément sera positionné à l'extrémité opposée du flot
3.b) L'élément se déplacera vers le haut de la page
4.c) Le reste du contenu sera repoussé autour de l'élément flottant
5.d) L'élément sera centré sur la page

97 98

Exemple2_ float : Code css : <style>


#conteneur {
Code html : width: 940px;
margin: 0 auto; Autres propriétés :
<div id="conteneur"> }
<div id="boite-gauche"> #boite-gauche {
<h3>Mollis Nullam</h3> width: 300px;
padding: 0;
<p>Maecenas sed diam...</p>
margin-right: 20px;  overflow: hidden | scroll | visible | auto : permet de déterminer ce que le navigateur doit faire
</div> float: left;
<div id="boite-centre"> }
<h3>Porta Ornare</h3> #boite-centre { lorsqu’un élément est plus grand que l’élément parent qui le contient.
<p>Cras mattis consectetur...</p> width: 300px;
</div> padding: 0;
<div id="boite-droite"> margin: 0;  clip : rect(sup_gauche sup_droit inf_droit inf_gauche) | auto : est utilisée pour définir une
float: left;
<h3>Parturient Magna</h3>
}
<p>Morbi leo risus...</p>
</div>
#boite-droite { zone rectangulaire à l'intérieur de laquelle un élément doit être coupé çàd déterminer la
width: 300px;
</div> padding: 0;
margin-left: 20px; partie visible de l’élément, généralement une image.
float: left;
Rendu : }
</style>
 visibility : visible | hidden : permet de déterminer si un élément est visible ou caché.

99 100
11/02/2025

4. Positionnement Flexbox (display: flex) :


Différence entre "display : none" et "visibility : hidden" :
 Les flexbox, ou "Flexible Box Layout", sont un module CSS qui permet de créer des mises en page
 Il est important de noter que visibility : hidden; rend l'élément invisible tout en occupant complexes et flexibles de manière efficace.
 Les flexbox sont particulièrement utiles pour créer des designs réactifs et dynamiques, en permettant aux
l'espace dans la disposition de la page,
éléments enfants d'un conteneur flex de s'adapter automatiquement à différentes tailles d'écran et de
 Tandis que display: none; rend l'élément invisible et le retire complètement du flux de la résolutions.
 Les principales fonctionnalités offertes par flexbox :
page, il ne prend donc pas de place.
 Distribution des éléments enfants horizontale ou verticale, avec passage à la ligne autorisé ou non,
 Alignements et centrages horizontaux et verticaux, justifiés, répartis.
 Gestion des espaces disponibles (fluidité).

101 102

Exemple :
.container { Principes de base des flexbox:
border: 2px solid red;
width: 400px;
padding: 10px; 1. Conteneur flex (display: flex;) : Pour créer une flexbox, vous devez définir un conteneur en utilisant
}
display: flex; ou display: inline-flex;. Cela transforme tous les éléments enfants directs du conteneur en
.item { éléments flexibles.
border: 2px solid blue;
width: 100px; 2. Axe principal et axe transversal : Une flexbox a un axe principal (par défaut, horizontal - de gauche à
height: 70px;
droite) et un axe transversal (vertical - de haut en bas).
margin: 10px;
}

display: flex;
Comment faire, pour avoir ce rendu ? Il suffit de rajouter display: flex; au container.

<div class="container">
<div class="item">Elémént 1</div>
<div class="item">Elémént 2</div>
<div class="item">Elémént 3</div>
</div>
103 [Link] 104
11/02/2025

Les alignments :
Propriétés sur le conteneur flex :
 flex-direction : Définit la direction principale des éléments enfants flexibles dans le conteneur (row, row- 1. Sur l’axe horizontal :

reverse, column, column-reverse).  justify-content : Contrôle l'alignement des éléments sur l'axe principal (flex-start, flex-end, center,
space-between, space-around, space-evenly).

flex-direction: row;

justify-content: space-between; justify-content: space-around;

flex-direction: flex-direction:
column-reverse; column;
flex-direction: row-reverse;

105 justify-content: center; justify-content: flex-end; 106

2. Sur l’axe vertical :


Si flex-direction: row; éttirement en vertical c’est le height des items qui
n’ont pas de height qui vont grandir par contre ceux qui ont un height, leur
 align-items : Dans la même lignée que justify-content, align-items définit comment les éléments sont align-items : stretch height prime.
alignés le long de l'axe transversal (flex-start, flex-end, center, baseline, stretch).
Si flex-direction: column; éttirement en horizontal c’est le width des items
qui n’ont pas de width qui vont grandir par contre ceux qui ont un width, leur
width prime.

Si la somme des widths des éléments enfants dépasse le width du conteneur, le width des enfants est ignore,

align-items: flex-end; align-items: center;

107 108
11/02/2025

Propriétés sur le conteneur flex (suite) : Exemple :


<style>
 flex-wrap : définit si le contenu sera distribué sur une seule ligne (ou colonne selon l’axe principal) ou sur .container {
display: flex;
plusieurs lignes ( flex-wrap: wrap; ). flex-wrap: wrap; /* Permet de renvoyer les éléments sur une nouvelle ligne */
flex-direction: row; /* Axe principal : horizontal */
Si le contenu sera distribué sur plusieurs lignes : align-content: flex-start; /* Espacement entre les lignes verticalement */
 align-content : Contrôle l'espacement entre les lignes dans un conteneur lorsque les éléments sont height: 300px; /* Nécessaire pour observer align-content */
/* overflow: scroll; */
wrap (renvoyés sur plusieurs lignes grâce à flex-wrap: wrap; ). border: 2px solid black;
} <div class="container">
• Les valeurs possibles pour align-content sont flex-start, flex-end, center, space-between,
<div class="item">1</div>
space-around, space-evenly. .item { <div class="item">2</div>
width: 200px; /*Taille fixe pour chaque boîte*/ <div class="item">3</div>
height: 100px;
<div class="item">4</div>
background-color: lightblue;
<div class="item">5</div>
margin: 5px;
text-align: center; <div class="item">6</div>
line-height: 100px; </div>
}
</style>
109 110

Exemple : 3. Propriété de flex-item :

 align-self (propriété de flex-item) : permet de définir un alignement spécifique pour un item particulier, les
valeurs de cette propriété sont identiques à celles de align-items (la valeur de align-self de cet élément sera
<div class="container">
<div class="item">Elémént 1</div> bien sûr différente de align-items du container) . .container {
display: flex;
Si on rajoute : flex-wrap: wrap; <div class="item">Elémént 2</div> flex-direction: column;
<div class="item">Elémént 3</div> border: 2px solid red;
<div class="item">Elémént 4</div> Exemple : <div class="container"> width: 250px;
<div class="item">Elémént 5</div> <div class="item1">Elémént 1</div> padding: 10px;
<div class="item">Elémént 6</div> }
<div class="item">Elémént 7</div> <div class="item2">Elémént 2</div>
.item1 {
<div class="item">Elémént 8</div> <div class="item3">Elémént 3</div> border: 2px solid blue;
<div class="item">Elémént 9</div> width: 90px;
<div class="item">Elémént 10</div> </div> margin: 10px;
<div class="item">Elémént 11</div> }
<div class="item">Elémént 12</div> .item2 {
border: 2px solid red;
</div>
width: 120px;
height: 50px;
margin: 10px;
}
.item3 {
border: 2px solid green;
width: 100px;
height: 90px;
align-self: flex-end;
margin: 10px;
111 } 112
11/02/2025

3. Propriété de flex-item (suite) : 3. Propriété de flex-item (suite) :


 order : Par défaut, les éléments flexitems sont affichés selon leur ordre d'apparition dans le code source de la  flex-grow : cette propriété accepte une valeur sans unité (bref, un chiffre) indiquant à l'élément qu'il peut
page. grandir, quitte à dépasser son width, afin de remplir l'espace vacant dans son parent.
• La propriété order offre la possibilité de contrôler cet ordre élément par élément (de plus petit au plus
grand). .item1 {  La valeur par défaut de flex-grow est 0. Cela signifie qu'un élément ne grandit pas pour occuper
border: 2px solid blue;
• La valeur par défaut de la propriété order est 0. width: 90px; l'espace disponible, même s'il y en a dans le conteneur.
order:4;
margin: 10px;
}
• Si tous les éléments ont un flex-grow de 0, chaque élément occupe seulement l'espace
Exemple : .item2 {
nécessaire pour son contenu ou sa taille définie (via width ou height).
border: 2px solid red;
width: 120px;
height: 50px; •Si au moins un élément a un flex-grow supérieur à 0, cet élément (ou ces éléments) grandiront
margin: 10px;
} pour remplir l'espace disponible dans le conteneur.
.item3 {
border: 2px solid green; •Un flex-grow autre que 1 a un impact significatif uniquement lorsqu'il y a au moins un autre
width: 100px;
order:1; élément ayant un flex-grow différent ou lorsqu'il y a de l'espace disponible à partager.
height: 90px;
align-self: flex-end;
margin: 10px;
}
113 114

3. Propriété de flex-item (suite) :


Avantages des Flexbox :

 flex-shrink : Cette propriété accepte une valeur sans unité (bref, un chiffre) indiquant la proportion avec
 Disposition facile : Les flexbox simplifient la création de mises en page complexes qui nécessitaient
laquelle l'élément devrait rétrécir en cas de besoin (si l'espace est insuffisant dans le parent). Bref, elle agit à
auparavant des techniques de positionnement plus complexes en CSS.
l'inverse de flex-grow;
 Mise en page réactive : Les éléments flexibles peuvent réorganiser dynamiquement leur disposition en

 flex-basis : cette propriété accepte n'importe quelle unité de mesure CSS afin d'indiquer la dimension idéale fonction de l'espace disponible et de la taille de l'écran.

d'un élément. La dimension attribuée constitue un point de départ avant qu'un flex-grow ou un flex-  Alignement et centrage facile : Les propriétés comme justify-content et align-items facilitent

shrink n'intervienne. Dans le contexte d'un parent en flex-direction: row, c'est en quelque sorte l'équivalent de l'alignement et le centrage des éléments.

la propriété width, tandis qu'en flex-direction: column; c'est l'équivalent du height.  Contrôle individuel : Les propriétés sur les éléments flexibles (flex, order, etc.) permettent un contrôle
fin de chaque élément.
 flex : cette propriété permet de définir le flex-grow, flex-shrink et flex-basis d'un élément en une seule
propriété. Il s'agit en fait d'une propriété raccourcis.

115 116
11/02/2025

5. CSS Grid : Responsive Web Design : Media queries

 But : Le CSS Grid est un système de disposition bidimensionnel qui permet de créer des mises en page  Le Responsive Web Design (RWD) est une approche de conception de sites web qui permet à ceux-ci
complexes en définissant des lignes et des colonnes. de s'adapter automatiquement à la taille de l'écran et au périphérique utilisé.
 Flexibilité : Il offre une flexibilité considérable pour positionner les éléments dans une grille en fonction  Les media queries jouent un rôle central dans cette méthode.
des lignes et des colonnes définies.
Qu'est-ce qu'une Media Query ?
 Adaptabilité : Il est bien adapté aux mises en page responsives, où les éléments peuvent se réorganiser
 Une media query est une fonctionnalité de CSS qui permet d'appliquer des styles en fonction des
facilement en fonction de la taille de l'écran.
caractéristiques du périphérique utilisé pour afficher le contenu, qu'il s'agisse d'un écran (comme la
 Usage : Idéal pour les mises en page modernes et complexes, telles que les designs de pages web avec des
largeur ou la hauteur de l'écran, sa résolution, son orientation, etc.) ou d'une imprimante, exprimées sous
zones de contenu variées et dynamiques.
forme de conditions logiques.
 Elle ajuste l'apparence des pages pour une meilleure lisibilité et convivialité.

117 118

Où les utiliser
Syntaxe de base des Media Queries : Les opérateurs logiques qu’on peut utiliser dans la condition :  Dans un fichier CSS externe :
@media (condition) {  and : et logique  Lier un fichier CSS différent dans la balise <link> avec l'attribut media.
/* Règles CSS */  , (virgule) : ou logique
} ex: les styles contenu dans le fichier [Link] ne devraient s'appliquer que lorsque l'utilisateur
 not : Inverse imprime la page et non lorsque celle-ci est affichée à l'écran:
Exemple :
<link href="[Link]" rel="stylesheet" media="print">
/* Styles par défaut */
body {  Dans une balise <style> (fortement déconseillé )
font-size: 16px;
}
Types de média
/* Styles pour les écrans dont la largeur est inférieure ou égale à 768px */ Le type de média est optionnel. Il correspond au contexte utilisé pour consulter à la page.
@media (max-width: 768px) {
body {  all : couvre tous les types de médias de cette liste (par défaut).
font-size: 10px;
}  screen : Si quelqu'un consulte la page via un écran 📱/💻.
}  print : Si quelqu'un décide d'imprimer la page 🖨 .
 speech : Si quelqu'un utilise un outil de synthèse vocale 🔊.
119 120
11/02/2025

Bonnes pratiques : 1. Mobile First


Caractéristiques de média :
2. Évitez les tailles fixes
 Dimensions de l'écran : max-width, min-width
3. Testez sur plusieurs appareils
 Orientation : portrait, landscape
Exemple : [Link]
 Résolution : min-resolution et max-resolution

Utilisation typique dans le Responsive Web Design

Les media queries sont souvent utilisées pour :


 Adapter la disposition : Par exemple, passer d'un layout en grille à une disposition en colonne pour
les écrans plus petits.
 Modifier les tailles de police : Ajuster la lisibilité sur différents appareils.
 Cacher ou afficher des éléments : Montrer ou cacher certaines fonctionnalités selon le périphérique.

121 122

Vous aimerez peut-être aussi