Technologies Du WEB: Salah - Elhajla@usmba - Ac.ma

Technologies du WEB
CSS
Salah EL HAJLA
Salah.elhajla@usmba.ac.ma
Plan du cours
● Introduction
● Régles, éléments et propriétés
● Mise en forme
● Mise en page
2
Plan du cours
● Introduction
● Règles, éléments et propriétés
● Mise en forme
● Mise en page
3
Introduction
L’acronyme CSS
Cascading StyleSheets
HTML décrit la structure et le contenu.
CSS décrit :
- La mise en forme du texte.

- La mise en page des boîtes les unes par rapport aux
autres.
4
Plan du cours
● Introduction
● Mise en forme
● Mise en page
5
Règles, éléments et propriétés - Inclusion d’une CSS
- Trois possibilités d’inclusion :
● Directement dans les balises ( à éviter )
<h2 style="color : red"> Titre en rouge </h2>
● Définition de la CSS dans le fichier via la balise <style>

<head>
<style type="text/css">déclaration des styles</style>
</head>
● Déclaration d’un lien vers la CSS via la balise <link>
<head>
<link href="fichier.css" rel="stylesheet" type="text/css"/>
</head>
6
Styles en ligne :
- Manière la plus simple d’utiliser les CSS.
- Rajoutez un attribut style sur les balises HTML.
- On peut également utiliser <span> si on a besoin d’une balise supplémentaire.
- Encombrer notre code HTML avec des indications de mise en forme : Ce n’est pas ce qu’on
veut !!
Exemple :
- Ce mot en <em style="color : red"> emphase </em> est aussi en rouge.
<span style="text-decoration : underline"> Cette expression de

plusieurs mots </span> est soulignée.
7
Styles en en-tête :
- Intégration des propriétés de style à l’en-tête de la page avec la balise <style>.
- Utilisation des sélecteurs pour définir à quels élément les propriétés s’appliquent.
- Inconvénients :
○ Mélange HTML et CSS dans un même document.
○ Impossibilité de re-utilisation des propriétés CSS dans plusieurs documents.
Exemple : <!DOCTYPE html>
<html>
<head>
<style type="text/css">déclaration des styles</style>
</head>
<body>

</body>
</html> 8
Feuille de style liée :
- Mettre la feuille de style CSS dans un fichier à part.
- Utilisation de la même feuille de style pour plusieurs pages Web.
- Rajoutez une balise <link> dont l’attribut rel est positionné à “stylesheet” dans
l’en-tête du document.
Exemple :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="feuille.css" type="text/css">
</head>
<body>

</body>
</html>
9
Règles, éléments et propriétés - Déclaration d’une règle
sélecteur1 , sélecteur2 ... {
propriété1: valeur1;
…
propriétéN: valeurN;
}
- sélecteur :indique à quelles parties du documents la règle s’applique.

- propriété :L’effet que l’on va vouloir donner (ex couleur de texte, positionnement,
couleur de fond, etc.)
- valeur :La valeur de la propriété CSS (red, 10px, …)
- On peut faire autant de couples propriété/valeur que voulu, séparés par des “ ; ”.
- Commentaire : /* Ceci est un commentaire */
Exemple: h1 , h2 { color: red; } 10

Règles, éléments et propriétés - Déclaration d’une règle (suite)
Cascade :
Plusieurs feuilles de styles peuvent s’appliquer simultanément :
- Plusieurs balises <link rel=“stylesheet”>
- Directive @import d’une feuille de style. @import url(feuille_css.css);
Au sein même d’une feuille de style, plusieurs règles peuvent être en conflit.
Pour gérer ces conflits, les mécanismes Cascade sont utilisés.
- Si !important est précisé après la valeur, la règle sera prioritaire.
- Sinon, plus une règle est spécifique, plus elle est prioritaire.
- Sinon, la dernière règle s’applique.
11
Règles, éléments et propriétés - Sélecteurs
- Sélecteur de type : nom de balise, On peut ajouter plusieurs sélecteurs séparés par des “ , ”.
h1 , h2 { color: red; } : Met l’ensemble des titres de rubrique h1 et h2 en rouge
- Sélecteur universel : ‘ * ‘ , sélectionne tout.
• *{ color: black; } : Met tout en noir.
12
Règles, éléments et propriétés - Sélecteurs (suite)
Sélecteur de classe :
<p id=‘introduction’> <h1 class=‘comment’> <p class=‘personne’>
Nom d’une classe, préfixée d’un ‘ . ’ , tel qu’il apparaît dans un attribut class d’une balise HTML.
Example:
.personne { font-style: bold; } : Met l’ensemble des balises de classe
personne en gras.
p.comment { font-style: italic; } : Met l’ensemble des balises <p> de classe
comment en italique.
13
Sélecteurs d’identifiants :
- Identifiant : défini par l’attribut id d’une balise HTML. Similaire aux classes, mais il ne peut y
avoir qu’une seule balise ayant un id donné dans tout le document HTML.
- Sélecteur d’identifiant : nom d’un identifiant, préfixée d’un ‘#’, tel qu’il apparaît dans un
attribut id d’une balise HTML.
Exemple:
#introduction { font-size: 120%; } : Met la balise d’identifiant
introduction en plus gros.
p#introduction { font-size: 120%; } : Met la balise <p> d’identifiant
introduction en plus gros.
14
Sélecteurs contextuels :
- Sélecteur contextuel : Deux sélecteurs ou plus séparés par des espaces.

A B : sélectionne les B seulement s’ils sont contenus dans les A.
Exemple:
h1 em { color: blue; } : Met les mots en emphase à l’intérieur d’un h1 en bleu.
ul ol, ol ul, ul ul, ol ol { font-size: 80%; } : diminue la taille du texte
des listes imbriquées.
15
Quiz
En CSS, comment sélectionnez-vous toutes les balises <p> d'une page ?

Réponse:
- p { … } 🌟
- .p { … }
- #p { … }
- <p> { … }
16
Quiz
En CSS, comment sélectionnez-vous une image par son identifiant ?

<img id="imgprincipale" src="chat.png">
Réponse:
- .imgprincipale { … }
- #imgprincipale { … } 🌟
- img { … }
- imgprincipale { … }
17
Quiz
En CSS, comment sélectionnez-vous uniquement les paragraphes avec le nom de classe
"attention" ?
<p class="attention">Ne le faites pas !</p>
<p>Allez-y.</p>
<p class="attention">Nooon, surtout pas.</p>
Réponse:
- attention { … }
- #attention { … }
- p { … }
- .attention { … } 🌟
18
19
Qui est ciblé ?
div {
...
}
.first {
...
}
p.sugar {
...
}
h1#hautpage {
...
} 20
Qui est ciblé ?
.first a{
...
}
.first .sugar {
...
}
#important, #toffee {
...
}
21
Pseudo-éléments :
- Pseudo-élément: Permet de mettre une règle sur quelque chose qui n’est pas réellement une
balise HTML.
Exemple:
p:first-line { font-weight: bold; } : Met la première ligne de chaque
paragraphe en gras.
p:first-letter { font-weight:blod; } : Met la première lettre de chaque
paragraphe en gras.
22
Pseudo-classes :
- Pseudo-classe: Permet de faire une sélection d’un élément uniquement dans certains
contextes.
Exemple:
a:link : les <a> qui sont des liens.
a:visited : les <a> qui sont des liens vers des pages qui sont déjà visitées.
a:hover : les <a> qui sont des liens qu’on est en train de désigner.
a:active : les <a> qui sont des liens qu’on est en train d’activer.
23
Plan du cours
● Introduction
● Mise en forme
● Mise en page
24
Mise en forme - Propriété de longueur
Les propriétés admettent différentes unités de mesure se répartissant suivant trois types de valeurs :
✓ Sous forme de pourcentage % ( par rapport à la valeur courante )
✓ Les valeurs absolues N’ont aucun sens pour une page Web destinée à s’afficher sur un écran
d’ordinateur ! ) : mm, cm, in, pt, pc
✓ Les valeurs relatives :
- em : La valeur de la propriété font-size de la police utilisée (Hauteur du bloc dans
lequel s’inscrit naturellement un caractère).
- ex : La hauteur du caractère x dans la police utilisée.
Les valeurs relatives à l’écran ( à éviter pour avoir une conception de la page indépendante
de la résolution ! )
- px : Le nombre de pixels
25
Mise en forme - Polices
- Il existe différents moyens pour contrôler les polices de caractères.
- Les principales propriétés (font-family, font-size, font-weight et line-height)
sont responsables de l’aspect du texte.
Exemple:
p {
font-family: “Times New Roman”;
font-size: 130%;
font-weight: bold;
line-height: 150%;
}
26
- font-family : Spécifie la police ou la famille de police (serif, sans-serif, cursive,

fantasy, monospace) à utiliser par le navigateur. Il est recommandé de déclarer une famille
générique après les polices (séparer par une virgule) pour obliger le navigateur si la police n’est pas
trouvée à lui substituer une police similaire.
- font-size : Définit la taille de la police ( La plupart du temps exprimée en pourcentage de la taille
courante ).
- font-style : Définit le style de la police à utiliser à savoir italic, oblique ou normal.
- font-variant : Définit la casse des caractères normal ou small-caps (petites majuscules).
- font-weight : Définit la graisse des caractères normal, bold (gras).
27
- line-height : Définit l’espace interligne ou la hauteur intrinsèque de tout élément non

remplacé. Une bonne règle pour le texte dans le corps est de régler l’espace interligne à 1.2 fois la
taille de la police (1.2em ou 120%)
- text-decoration : Définit l’ornement du texte : none, underline (souligné), overline
(surligné), blink (clignotant) et line-through (barré)
28
- text-transform : Permet de transformer le texte en majuscule, minuscule

- Valeurs possibles :
h2 { text-transform: none; }
- none
du texte de titre h2
- capitalize
- uppercase h2 { text-transform: capitalize; }
- lowercase Du Texte De Titre H2
h2 { text-transform: uppercase; }
DU TEXTE DE TITRE H2
h2 { text-transform: lowercase; }
du texte à partir d’ici
29
Mise en forme - Espacement
- Les propriétés letter-spacing et word-spacing permettent de définir l’espacement entre les

lettres d’un mot et les mots dans une phrase.
- Cet espacement peut être positif ou négatif selon si on cherche à éloigner ou rapprocher ces
éléments.
30
Mise en forme - Alignement & Indentation
- text-align : Définit la justification et l’alignement d’un texte: left, right, center, justify
(aligne le texte sur les marges gauche et droite).
- vertical-align : Définit l’alignement vertical de la ligne de base d’un élément en fonction de
la propriété line-height : super (text en exposant), sub (text en indice), baseline (normal),
etc.
- text-indent : Permet de spécifier un décalage de la première ligne d’un texte.
p { text-indent: 10px; }
31
Mise en forme - Propriétés des listes
- list-style-image : définit l’image qui sera employée comme marqueur d’item de liste. Quand
l’image est indisponible, elle sera remplacer par le marqueur produit par la propriété list-style-
type.
- list-style-type : Définit l’apparence d’une liste numérotée ou non :
- disc (cercle plein)
- circle (cercle vide)
- square (carré)
- decimal (1.) decimal-leading-zero (01.)
- upper-alpha ou lower-alpha (lettres de l‘alphabet)
- upper-roman ou lower-roman (chiffres romains)
- none
32
Mise en forme - Propriétés des listes
ul { list-style-image: url("img/liste.png"); }
ul { list-style-type: none; }
33
Mise en forme - Couleurs
- Le rôle de la couleur est de différencier les éléments d’un texte en jouant sur la notion de contraste.
- Il existe différentes manières de spécifier les valeurs d’une couleur :
✓ En indiquant le nom d’une couleur prédéfinie parmi aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, yellow.
✓ En utilisant le code RGB pour (Red,Green,Blue) avec des valeurs de 0 à 255.
Exemple : rgb(0, 191, 255)
✓ En utilisant la valeur hexadécimale.
Exemple : #ff0000
34
Mise en forme - Couleurs
- La propriété couleur s’applique généralement au texte ( color ) ou à l’arrière-plan ( background-
color ).
- La propriété background-image définit l’image de l’arrière-plan d’un ou plusieurs éléments ou
encore de tous les éléments. Il est fortement recommandé de spécifier aussi une couleur
normale d’arrière-plan, qui sera utilisé en remplacement.
Exemple:
p { color: #ff0000;}
.Bloc1 {
background-image : url("images/monImage.jpg");
background-color : rgb(255,255,255);
35
}
Plan du cours
● Introduction
● Mise en forme
● Mise en page
36
Mise en page - Éléments block & inline
Il existe deux sortes d'éléments HTML :

● Eléments block : Prennent toute la largeur de leur parent, et sont suivis d’un retour à la ligne
<p>, <h1>, <ul>, …
<div> est un bloc générique.
● Éléments inline : Prennent la largeur de leur contenu, et ne sont pas suivis d’un retour à la
ligne <a>, <img>, <em>, …

<span> est un élément inline générique.
On s’intéresse ici principalement aux blocs et à la manière dont les placer les uns par rapport
aux autres.
37
Mise en page - Bordure des blocs
Les propriétés qui s’appliquent aux bordures ont entre 1 et 4 valeurs :

● Si une seule valeur est spécifiée : elle s’applique à tous les côtés.
● Si 2 valeurs sont spécifiées :
✓ La première s’applique aux bordures horizontales.
✓ La seconde aux bordures verticales.
● Si 3 valeurs sont spécifiées :
✓ La première s’applique à la bordure du haut.
✓ La deuxième aux bordures verticales.
✓ La troisième à la bordure du bas.
● Si 4 valeurs sont spécifiées : celles-ci s’appliquent respectivement aux bordures du haut, de
droite, du bas et de gauche.
38
La propriété border permet d'ajouter une bordure à un élément.

Elle a 3 «sous propriétés» possibles : style, color et width.
● border-style : Définit le style des bordures: none, dotted, dashed, solid, double,
groove, ridge, inset ou outset.
● border-color : Définit la couleur des côtés de la bordure.
● border-width : Spécifie l’épaisseur des bordures.
39
h2 { border: 2px solid #009860; }
40
- On peut décomposer les 4 bordures de la manière suivante :

border-top: ...;
border-bottom: ...;
border-left: ...;
border-right: ...;
- Si on ne précise pas à quelle bordure on applique la propriété, elle s’applique aux 4.
41
h2 { border-top: 1px solid gray; }
42
43
Mise en page - Exercice
Ecrire les règles CSS pour afficher cette page:
44
Mise en page - Exercice
Solution
p { border: 3px double

goldenrod; }
li { background-color:
aquamarine;
margin: 1em;
}
footer {
font-weight: bold;
color: white;
background-color: tomato;
} 45
- border-radius : valeur permet de faire des bords arrondis

- Valeur : une valeur en unité de mesure (px, em ou même %)
● Le même arrondi partout : border-radius : 10px;
● Un arrondi par angle (en haut à gauche, en haut à droite, en bas à droite, en bas à gauche )
: border-radius : 2px 20px 5px 10px;
- Exemple:
div { border-radius : 10px; }
div { border-radius : 2px 20px 5px 10px; }
46
Mise en page - Largeur & Hauteur
- Width : Largeur du contenu de l’élément: on spécifie la longueur ou la met à auto(Par défaut -

prend la taille maximale disponible).
- Height : Hauteur du contenu de l’élément: on spécifie la longueur ou la met à auto(Par défaut -
s’adapte à la taille du contenu).
Remarque:
width et height peuvent être également utilisés pour les éléments inline (comme <img> ).
47
Mise en page - Marges
Il existe deux types de marges : intérieure appelée padding, et extérieure appelée margin
s'il y a une bordure elle est aussi ajoutée à la largeur effective des éléments)
48
Mise en page - Marge extérieure - Margin
- La propriété margin détermine l’espace entre le bord de l’élément, et l’élément suivant.

- Par défaut margin: valeur applique la même valeur aux 4 côtés.
- Valeur possible : auto, valeur en unité de mesure, positive ou négative
49
- On peut la décomposer individuellement en :

● margin-top : marge extérieure haute
● margin-right : marge extérieure droite
● margin-bottom : marge extérieure basse
● margin-left : marge extérieure gauche
- Ou rassembler les 4 valeurs : margin: 10px 5px 8px 15px; (dans l’ordre : haut, droite, bas,
gauche)
50
Ajouter une marge sous un titre :

h2 { margin: 50px 0; }
Ici 50px correspondent à la marge haute

et basse et 0 aux marges gauches et
droites.
51
● Par défaut, une margin top ou bottom sur un élément inline ne fonctionnera pas (puisqu’il est
dans le flux de la page).
● Une marge left ou right fonctionnera par contre
52
Mise en page - Marge intérieure - Padding
- La propriété padding détermine un espacement entre le bord de la boite et son contenu .

- Par défaut padding : valeur applique la même valeur aux 4 côtés.
- Valeur possible : valeur en unité de mesure.
53
- On peut la décomposer individuellement en :

● padding-top : marge intérieure haute
● padding-right : marge intérieure droite
● padding-bottom : marge intérieure basse
● padding-left : marge intérieure gauche
- Ou rassembler les 4 valeurs : padding: 10px 5px 8px 15px; (dans l’ordre : haut, droite, bas,
gauche)
54
Ajouter du padding à un titre pour décoller la bordure :

h2 { padding-bottom: 10px; }
55
Ajouter du padding sur des éléments inline permet de « changer leur taille » sans passer
par un width / height.
a { padding: 10px 15px; } Pour agrandir le lien
56
Mise en page - Flottement
- La propriété float : valeur permet d’extraire des éléments du flux de la page, ce qui signifie
que le reste du contenu « coule » autour.
- Elle prend 3 valeurs : left, right et none (permet de remettre un élément dans le flux)
57
Un exemple de float : left sur une image :

img.floatleft { float: left;}
58
Un exemple de float : right sur une image :

img.floatright { float: right;}
59
Mise en page - Positionnement - Display
- La propriété display : valeur va permettre une mise en forme avancée.

- Quelques unes des valeurs possibles sont : block, inline, inline-block et none.
- Ces valeurs sont appliquées par défaut en fonction des éléments:
- p, div, h1 : display : block
- span, a, em, strong : display : inline
60
Mise en page - Positionnement - Display : Block
- Il est possible de transformer un élément inline en élément de bloc avec display: block
- Il a alors toutes les propriétés d’un élément de bloc : par défaut, il prend toute la largeur de son
parent, on peut en changer la dimension ET est suivi d’un retour à la ligne. On peut alors lui appliquer
des marges.
a { display:block; }
61
Mise en page - Positionnement - Display : Inline
- Nous connaissons déjà display:inline appliqué sur les éléments de type inline (span, a, em,
strong, etc.).
- Il permet aux éléments de rester sur une seule ligne ( on ne peut alors pas leur donner de largeur ).
p { background: rgb(255, 191, 203); display: inline; }
62
Mise en page - Positionnement - Display : Inline-block
- display:inline-block est une propriété hybride qui permet à un élément d’avoir les
propriétés d’un élément en ligne (pas de retour à la ligne après l’élément), mais avec les propriétés
d’un bloc (possibilité d’avoir une dimension et des marges)
.header li { display: inline-block; }

.header li a{ display: block; padding: 5px; }
display: inline-block sur une liste de liens permet par

exemple de créer une navigation horizontale.
63
Mise en page - Positionnement
Le principe du positionnement en CSS permet de définir l’emplacement des boites générées pour chaque élément de la page
Il existe trois mécanismes de positionnement de base en CSS :

1. Le flux normal : consiste à garder le flux normal des éléments selon leur ordre et leur type (bloc , inline)
2.La propriété « position »
• Relative
• Absolue
• Fixe
• Static
3.La propriété « float »
• Définit la position flottante d’un élément à droite (valeur right) ou à gauche (valeur left) dans un document (ou dans la
boîte conteneur).
• Nettoyer les flottants : propriété clear
64
Le positionnement absolu
Ce type de positionnement permet de placer un élément de la page exactement à l’emplacement souhaité.
• Une balise HTML avec une position absolue ne laisse aucun espace vide après qu’elle est positionnée
• On place une balise HTML en position absolue en fixant la valeur de la propriété position à “absolute”
• Les propriétés right, left, top et bottom sont alors utilisées pour définir l’emplacement de la balise HTML
Exemple :
65
Le positionnement relatif
On place une div en position relative avec la valeur de la propriété : relative.
La position relative d’un élément (div par exemple) est calculée d’après sa position originale dans la page (sa position dans le flux normal).
l’élément peut être déplacé vers la droite, la gauche, le haut ou le bas (top, left, bottom et right)
Le positionnement fixe
Pareil que le positionnement absolu, mais le block reste toujours visible, même si on défile la page
Le positionnement static
C’est de le comportement normal (par défaut) pour chaque élément de page. L’élément est alors positionné dans le flux avec sa position.
Les propriétés top, right, bottom, left et z-index ne s’appliquent pas.
• La valeur static est la valeur par défaut de la propriété position

• Un élément HTML positionné avec position : static sera positionné selon le flux normal de la page
66
Mise en page - Visibilité
La visibilité d’un élément peut être complètement contrôlée en utilisant la propriété visibility :
- visible : Permet de rendre visible l’élément.
- hidden : Permet de rendre invisible un élément
67
Mise en page - Transitions CSS
● Les transitions CSS vous permettent de modifier les valeurs des propriétés en douceur, sur
une durée donnée.
Dans ce chapitre, vous découvrirez les propriétés suivantes :
•transition
•transition-delay
•transition-duration
•transition-property
•transition-timing-function
68
Comment utiliser les transitions CSS ?

Pour créer un effet de transition, vous devez spécifier deux choses :
● la propriété CSS à laquelle vous souhaitez ajouter un effet
● la durée de l'effet
Remarque : Si la partie durée n'est pas spécifiée, la transition n'aura aucun effet, car la valeur
par défaut est 0.
L'exemple suivant montre un élément <div> rouge de 100px * 100px. L'élément <div> a
également spécifié un effet de transition pour la propriété width, d'une durée de 2 secondes :
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
69
L'effet de transition commencera lorsque la propriété CSS spécifiée (largeur) changera de valeur.
Maintenant, spécifions une nouvelle valeur pour la propriété width lorsqu'un utilisateur survole
l'élément <div> :
div:hower {
width: 300px;
}
lien de test (voir le dossier test_transition)

NB: Notez que lorsque le curseur sort de l'élément, il reviendra progressivement à son style d'origine.
70
Comment Modifier plusieurs valeurs de propriété ?

L'exemple suivant ajoute un effet de transition pour les propriétés width et height, avec une
durée de 2 secondes pour la largeur et de 4 secondes pour la hauteur :
div {
transition: width 2s, height 4s;
}
lien de test (voir le dossier test_transition)
71
Comment Spécifier la courbe de vitesse de la transition ?
La propriété transition-timing-function spécifie la courbe de vitesse de l'effet de transition.

La propriété transition-timing-function peut avoir les valeurs suivantes :
•ease- spécifie un effet de transition avec un démarrage lent, puis rapide, puis se
termine lentement (c'est la valeur par défaut)
•linear- spécifie un effet de transition avec la même vitesse du début à la fin
•ease-in- spécifie un effet de transition avec un démarrage lent
•ease-out- spécifie un effet de transition avec une fin lente
•ease-in-out- spécifie un effet de transition avec un début et une fin lents
•cubic-bezier(n,n,n,n)- vous permet de définir vos propres valeurs dans une
fonction cubique-bézier
72
L'exemple suivant montre quelques-unes des différentes courbes de vitesse qui peuvent être utilisées :
#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
73
Comment Retarder l'effet de transition ?

La propriété transition-delay spécifie un délai (en secondes) pour l'effet de transition.
L'exemple suivant a un délai de 1 seconde avant le démarrage :
div {
transition-delay: 1s;
}
74
Transition + Transformation
L'exemple suivant ajoute un effet de transition à la transformation :
div { div:hover {
width: 100px; width: 300px;
height: 100px; height: 300px;
background: red; transform: rotate(180deg);
transition: width 3s;
transition-delay: 1s; }
}
div {
transition: width 2s, height 2s, transform 2s;
}
75
Plus d'exemples de transition

Les propriétés de transition CSS peuvent être spécifiées une par une, comme ceci :
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
ou en utilisant la propriété abrégée transition:
div {
transition: width 2s linear 1s;
}
76
Exercice
Ajoutez un effet de transition de 2 secondes pour l'arrière-plan et transformez les changements de

l'élément <div>.
77
Propriétés de transition CSS
Propriété Description
transition Une propriété abrégée pour définir les quatre propriétés de transition en
une seule propriété
transition-delay Spécifie un délai (en secondes) pour l'effet de transition
transition-duration Spécifie le nombre de secondes ou de millisecondes qu'un effet de

transition prend pour se terminer
transition-property Spécifie le nom de la propriété CSS pour laquelle l'effet de transition est
appliqué
transition-timing-function Spécifie la courbe de vitesse de l'effet de transition
78
Mise en page - Introduction au Responsive Design
• Les pages Web peuvent être consultées à l'aide de nombreux types d’appareils :
ordinateurs de bureau, tablettes et téléphones. Ainsi, les pages Web ne doivent pas
omettre d'informations pour s'adapter aux appareils plus petits, mais plutôt adapter
leur contenu pour s’afficher correctement sur n'importe quel appareil utilisé.
• La conception Web réactive (Responsive Design) rend la page Web compatible et

adaptable à tous les appareils. Elle est basée uniquement sur HTML et CSS (elle n'est
pas un programme ou un code JavaScript)
• Le Responsive web design consiste à utiliser les langages CSS et HTML pour
redimensionner, masquer, réduire, agrandir ou déplacer le contenu d’une page pour
s’adapter à l’écran d’affichage
79
Mise en page - CSS Media Queries
Types de médias introduits par CSS2
La règle @media, introduite dans CSS2, a permis de

définir différentes règles de style pour différents types
de médias.
Exemples : vous pouvez avoir un ensemble de règles de
style pour les écrans d'ordinateur, un pour les
imprimantes, un pour les appareils portables, un pour
les appareils de type télévision, etc.
Malheureusement, ces types de supports n'ont jamais

été bien pris en charge par les appareils, autres que le
type de support d'impression.
80
CSS3 a introduit les requêtes multimédias
Les requêtes multimédias dans CSS3 ont étendu l'idée des types de médias CSS2 : au lieu de rechercher
un type d'appareil, elles examinent la capacité de l'appareil.
Les requêtes multimédias peuvent être utilisées pour vérifier de nombreux éléments, tels que :
➢ largeur et hauteur de la fenêtre

➢ largeur et hauteur de l'appareil
➢ orientation (la tablette/le téléphone est-il en mode paysage ou portrait ?)
➢ résolution
L'utilisation de requêtes multimédias est une technique populaire pour fournir une feuille de style
personnalisée aux ordinateurs de bureau, ordinateurs portables, tablettes et téléphones mobiles (tels
que les téléphones iPhone et Android).
81
Syntaxe de la requête multimédia
Une requête multimédia se compose d'un type de média et peut contenir une ou plusieurs expressions,
qui se résolvent en vrai ou en faux.
@media not|only mediatype and (expressions) {

CSS-Code;
}
Le résultat de la requête est vrai si le type de média spécifié correspond au type de périphérique sur
lequel le document est affiché et si toutes les expressions de la requête média sont vraies. Lorsqu'une
requête multimédia est vraie, la feuille de style ou les règles de style correspondantes sont appliquées,
en suivant les règles de cascade normales.
82
Types de média CSS3
Value Description
all Used for all media type devices

print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
83
Media Queries Exemples simples
Une façon d'utiliser les requêtes multimédias est d'avoir une section CSS alternative
directement dans votre feuille de style.
L'exemple suivant change la couleur d'arrière-plan en vert clair si la fenêtre d'affichage est
large de 480 pixels ou plus (si la fenêtre d'affichage est inférieure à 480 pixels, la couleur
d'arrière-plan sera rose) :
@media screen and (min-width: 480px) {

body {
background-color: lightgreen;
}
}
84
Requêtes multimédias pour les menus
Dans cet exemple, nous utilisons des requêtes multimédias pour créer un menu de navigation
réactif, dont la conception varie selon les différentes tailles d'écran.
85
86
87
Masquer les éléments avec les requêtes multimédias
Une autre utilisation courante des media queries consiste à masquer des éléments sur
différentes tailles d'écran :
88
Masquer les éléments avec les requêtes multimédias
89
Modifier la taille de la police avec les requêtes multimédias
Vous pouvez également utiliser des requêtes multimédias pour modifier la taille
de la police d'un élément sur différentes tailles d'écran :
90
Modifier la taille de la police avec les requêtes multimédias
91
92
CSS Flexbox
93
CSS Flexbox CSS Flexbox Layout Module
Avant le module Flexbox Layout, il y avait quatre modes de mise en page :
● Bloc, pour les sections d'une page Web

● En ligne, pour le texte
● Table, pour les données de table à deux dimensions
● Positionné, pour la position explicite d'un élément
Le module de mise en page de boîte flexible facilite la conception d'une structure de mise en
page flexible et réactive sans utiliser de flottement ou de positionnement.
94
CSS Flexbox Éléments Flexbox
Pour commencer à utiliser le modèle Flexbox, vous devez d'abord définir un

conteneur flexible.
L'élément ci-dessous représente un conteneur flexible (la zone bleue) avec trois
éléments flexibles.
95
CSS Flexbox Éléments Flexbox
Exemple
Un conteneur flexible avec trois éléments flexibles :
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
96
CSS Flexbox CSS Flex Container
Élément parent (conteneur)

Comme nous l'avons précisé dans la diapositive précédente, il s'agit d'un conteneur flexible (la zone
bleue) avec trois éléments flexibles :
.flex-container {
Le conteneur flexible devient flexible en définissant la propriété display sur flex. display: flex;
}
97
Les propriétés du conteneur flexible sont:
•flex-direction
•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content
98
La propriété flex-direction
La propriété flex-direction définit dans quelle direction le conteneur souhaite empiler

les éléments flexibles.
Exemple
La valeur column empile les éléments flexibles verticalement (de haut en bas):
.flex-container {
display: flex;
flex-direction: column;
}
99
row | column | row-reverse | column-reverse
100
101
La propriété flex-wrap
La propriété flex-wrap spécifie si les éléments flexibles doivent être renvoyés à la ligne ou non.
Les exemples ci-dessous ont 12 éléments flexibles, pour mieux démontrer la La propriété flex-wrap
.flex-container {
display: flex;
flex-wrap: wrap;
}
102
nowrap | wrap | wrap-reverse
THE MARKUP
<div id=“container”> THE STYLES .box {
<div class=“box box1”> 1</div> #container { width: 25%;
<!– more boxes here → display: flex; }
<div class=“box box10”> 10 </div> flex-direction: row;
</div>
flex-wrap: wrap;
}
nowrap | wrap | wrap-reverse
nowrap | wrap | wrap-reverse THE MARKUP
<div id=“container”>
<div class=“box box1”>
1</div>
<!– more boxes here →
<div class=“box box10”>
10 </div>
</div>
THE STYLES
#container {
display: flex;
height: 350px;
flex-wrap: wrap;
}
.box {
width: 25%;
}
La propriété flex-flow
La propriété flex-flow est une propriété abrégée permettant de définir à la fois les propriétés flex-
direction et flex-wrap
Using flex-direction & flex-wrap Using flex-flow

#container { #container {
display: flex; display: flex;
height: 350px; height: 350px;
flex-direction: column; flex-flow: column wrap;
flex-wrap: wrap; }
}
Flexbox Alignment Properties
La propriété justify-content
flex-start | flex-end | center | space-between | space-around
Les éléments flexibles sont,

par défaut, aussi larges qu'ils
doivent l'être pour contenir le
contenu de l'élément.
La propriété justifier-content
définit comment l'espace
supplémentaire est distribué
autour ou entre les éléments
La propriété justify-content
flex-start | flex-end | center | space-between | space-around
Les éléments flexibles sont,

par défaut, aussi larges qu'ils
doivent l'être pour contenir le
contenu de l'élément.
La propriété justifier-content
définit comment l'espace
supplémentaire est distribué
autour ou entre les éléments
Flexbox Alignment Properties

La propriété align-items
flex-start | flex-end | center | baseline | stretch
La propriété align-items vous permet

d'organiser les éléments sur l'axe
transversal (haut et bas lorsque la direction
est ligne, gauche et droite si la direction est
colonne)
*Remarque : vous devez spécifier une
hauteur de conteneur
La valeur baseline aligne les éléments flexibles

tels que leurs lignes de base s'alignent :
La propriété align-content
flex-start | flex-end | center | space-around | space-between | stretch
La propriété align-content s'applique uniquement lorsqu'il y a plusieurs lignes

flexibles enveloppées (wrapped)
Les propriétés du conteneur CSS Flexbox

align-content Modifie le comportement de la propriété flex-wrap. Il est similaire à align-items,

mais au lieu d'aligner les éléments flexibles, il aligne les lignes flexibles
align-items Aligne verticalement les éléments flexibles lorsque les éléments n'utilisent pas
tout l'espace disponible sur l'axe transversal
display Spécifie le type de boîte utilisé pour un élément HTML
flex-direction Spécifie la direction des éléments flexibles à l'intérieur d'un conteneur flexible
flex-flow Une propriété abrégée pour flex-direction et flex-wrap
flex-wrap Spécifie si les éléments flexibles doivent s'enrouler ou non, s'il n'y a pas assez
de place pour eux sur une ligne flexible
justify-content Aligne horizontalement les éléments flexibles lorsque les éléments n'utilisent
pas tout l'espace disponible sur l'axe principal
CSS Flexbox CSS Flex items
Éléments enfants (articles)

Les éléments enfants directs d'un conteneur flex deviennent automatiquement des éléments flexibles
(flex)
L'élément ci-dessus représente quatre éléments

flexibles bleus à l'intérieur d'un conteneur flexible
gris.
CSS Flexbox CSS Flex items
Les propriétés de l'élément flexible sont :
•order
•flex-grow
•flex-shrink
•flex-basis
•flex
•align-self
113
CSS Flexbox CSS Flex item
La propriété order
Valeur: length Default: 0
La propriété order donne la possibilité d'afficher les éléments dans un ordre différent de
l'ordre dans le code source HTML.
Si les articles ont la même valeur de commande = disposés dans l'ordre dans lequel ils
apparaissent dans le code
Si les articles ont des valeurs de commande différentes = classés de la valeur de
commande la plus basse à la plus élevée.
La propriété order
Valeur: length Default: 0
Propriétés - Flex item

les propriétés de l'élément flexible déterminent comment l'espace est distribué dans
les éléments.
La propriété flex
None | ‘flex-grow flex-shrink flex-basis’
Flex: flex-grow flex-shrink flex-basis
Exemple Exemple
li { Cet élément de liste commence à 200 pixels de large
flex: 1 0 200px est autorisé à grandir pour remplir l'espace supplémentaire
} n'est PAS autorisé à rétrécir(shrink) en dessous de 200px
Les valeurs de 1 et 0 fonctionnent comme un interrupteur marche/arrêt

1 "s'allume" ou permet à un élément de grossir ou de rétrécir
0 "s'éteint" empêche l'élément de grandir ou de rétrécir
THE MARKUP
La propriété flex-grow <div id=“container”>
Valeur: nombre Default: 0 <div class=“box box1”> 1</div>
<div class=“box box2”> 2</div>
<div class=“box box5”> 5 </div>
</div>
THE STYLES
.box {
…
flex: 1 1 auto;
}
La propriété flex-grow spécifie la croissance d'un élément flexible par rapport au reste des éléments
flexibles .
La propriété flex-grow Attribuer un nombre entier supérieur à un

Valeur: nombre Default: 0 élément - applique plus d'espace dans cet
élément.
Une valeur flex-grow de "3" signifie que l'élément

reçoit trois fois plus d'espace que les éléments
restants définis sur flex-grow : 1
La propriété flex-shrink Lorsque flex-shrink vaut 0, les éléments ne sont

Valeur: nombre Default: 1 pas autorisés à rétrécir et peuvent sortir de leur
élément conteneur.
Les éléments flexibles cessent de rétrécir
lorsqu'ils atteignent leur taille minimale (définie
par min-width/min-height).
La propriété flex-shrink spécifie de combien un

élément flexible rétrécira par rapport au reste des
éléments flexibles .
<div>1</div> Ne laissez pas le troisième élément flexible
<div>2</div> rétrécir autant que les autres éléments
<div style="flex-shrink: 0">3</div> flexibles :
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div> 120
<div>1</div> Fait rétrécir le troisième élément flexible 2 fois
<div>2</div> moins que les autres éléments flexibles :
<div style="flex-shrink: 2">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div> 121
La propriété flex-basis
Valeur: length | percentage | content | auto
Flex-basis définit la taille de départ d'un élément

avant tout emballage(wrapping), croissance ou
réduction. Elle peut être utilisée à la place de la
propriété width (ou height pour les colonnes) pour
les éléments flexibles.
Par défaut, flex-basis est défini sur auto (valeur

largeur/hauteur de la taille de l'élément)Si la taille
de l'élément n'est pas définie ou définie sur auto,
flex-basis utilise la largeur du contenu..
THE STYLES
Exemple
Définissez la longueur initiale du troisième élément
flexible sur 200 pixels :
THE MARKUP
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div> 123
La propriété align-self
La propriété align-self spécifie l'alignement de l'élément sélectionné à l'intérieur du
conteneur flexible.
La propriété align-self remplace l'alignement par défaut défini par la align-items
propriété du conteneur.
Dans ces exemples, nous utilisons un conteneur de 200 pixels de haut, pour mieux
démontrer la propriété align-self:
Exemple 1:
Alignez le troisième élément flexible au milieu du conteneur :
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
Exemple 2:
Alignez le deuxième élément flexible en haut du conteneur et le troisième élément
flexible en bas du conteneur :
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
Les propriétés des éléments CSS Flexbox

align-self Spécifie l'alignement d'un élément flexible (remplace la propriété align-items

du conteneur flexible)
flex Une propriété abrégée pour les propriétés flex-grow, flex-shrink et flex-basis
flex-basis Spécifie la longueur initiale d'un élément flexible
flex-grow Spécifie la croissance d'un élément flexible par rapport au reste des éléments
flexibles à l'intérieur du même conteneur
flex-shrink Spécifie de combien un élément flexible rétrécira par rapport au reste des
éléments flexibles à l'intérieur du même conteneur
order Spécifie l'ordre des éléments flexibles à l'intérieur du même conteneur

CSS Flexbox Responsive Flexbox
Vous avez appris dans le chapitre CSS Media Queries que vous pouvez utiliser des
requêtes multimédias pour créer différentes mises en page pour différentes tailles d'écran
et appareils.
CSS Flexbox Responsive Flexbox
Par exemple,
si vous souhaitez créer une disposition à deux colonnes pour la plupart des tailles d'écran
et une disposition à une colonne pour les petites tailles d'écran (telles que les téléphones
et les tablettes), vous pouvez modifier flex-directionde row à column à un point d'arrêt
spécifique (600px dans le exemple ci-dessous) :
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column layout */

@media (max-width: 800px) {
.flex-container {
}
}
Exercice

Technologies Du WEB: Salah - Elhajla@usmba - Ac.ma

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Technologies Du WEB: Salah - Elhajla@usmba - Ac.ma

Transféré par

Droits d'auteur :

Formats disponibles

Technologies du WEB

● Régles, éléments et propriétés

● Règles, éléments et propriétés

HTML décrit la structure et le contenu.

- La mise en forme du texte.

● Règles, éléments et propriétés

● Définition de la CSS dans le fichier via la balise <style>

● Déclaration d’un lien vers la CSS via la balise <link>

- Ce mot en <em style="color : red"> emphase </em> est aussi en rouge.

<span style="text-decoration : underline"> Cette expression de

- sélecteur :indique à quelles parties du documents la règle s’applique.

Exemple: h1 , h2 { color: red; } 10

h1 , h2 { color: red; } : Met l’ensemble des titres de rubrique h1 et h2 en rouge

- Sélecteur universel : ‘ * ‘ , sélectionne tout.

• *{ color: black; } : Met tout en noir.

- Sélecteur contextuel : Deux sélecteurs ou plus séparés par des espaces.

En CSS, comment sélectionnez-vous toutes les balises <p> d'une page ?

En CSS, comment sélectionnez-vous une image par son identifiant ?

Qui est ciblé ?

● Règles, éléments et propriétés

- font-family : Spécifie la police ou la famille de police (serif, sans-serif, cursive,

- line-height : Définit l’espace interligne ou la hauteur intrinsèque de tout élément non

- text-transform : Permet de transformer le texte en majuscule, minuscule

- lowercase Du Texte De Titre H2

- Les propriétés letter-spacing et word-spacing permettent de définir l’espacement entre les

● Règles, éléments et propriétés

Il existe deux sortes d'éléments HTML :

ligne <a>, <img>, <em>, …

Les propriétés qui s’appliquent aux bordures ont entre 1 et 4 valeurs :

La propriété border permet d'ajouter une bordure à un élément.

h2 { border: 2px solid #009860; }

- On peut décomposer les 4 bordures de la manière suivante :

- Si on ne précise pas à quelle bordure on applique la propriété, elle s’applique aux 4.

h2 { border-top: 1px solid gray; }

Ecrire les règles CSS pour afficher cette page:

p { border: 3px double

- border-radius : valeur permet de faire des bords arrondis

div { border-radius : 2px 20px 5px 10px; }

- Width : Largeur du contenu de l’élément: on spécifie la longueur ou la met à auto(Par défaut -

- La propriété margin détermine l’espace entre le bord de l’élément, et l’élément suivant.

- On peut la décomposer individuellement en :

Ajouter une marge sous un titre :

Ici 50px correspondent à la marge haute

● Une marge left ou right fonctionnera par contre

- La propriété padding détermine un espacement entre le bord de la boite et son contenu .

- On peut la décomposer individuellement en :

Ajouter du padding à un titre pour décoller la bordure :

Un exemple de float : left sur une image :

Un exemple de float : right sur une image :

- La propriété display : valeur va permettre une mise en forme avancée.

- p, div, h1 : display : block

- span, a, em, strong : display : inline

.header li { display: inline-block; }

display: inline-block sur une liste de liens permet par

Il existe trois mécanismes de positionnement de base en CSS :

• La valeur static est la valeur par défaut de la propriété position

Comment utiliser les transitions CSS ?

lien de test (voir le dossier test_transition)

Comment Modifier plusieurs valeurs de propriété ?

lien de test (voir le dossier test_transition)

Comment Spécifier la courbe de vitesse de la transition ?

La propriété transition-timing-function spécifie la courbe de vitesse de l'effet de transition.

#div1 {transition-timing-function: linear;}