Séance7 CoursWeb CSS

Cascading Style Sheets (CSS)
Mme. Fatima zahra SALMAM

salmam.f@ucd.ac.ma
2019/2020
• Les CSS (feuille de styles en français) sont des documents au

format texte, tout comme le HTML.
• Le rôle principale de HTML est de décrire le contenu: titre,
sous-titre, formulaire, champ, lien, ….
• Le rôle du CSS est de mettre en forme ce contenu: couleur,
image de fond, police de caractère, bordures, agencement …
• Feuille de style = ensemble de règles
2
HTML
(pas de CSS)
HTML+CSS
3
Outils nécessaires
• Mêmes outils que pour les documents HTML (Bloc-notes,

NotPad++ …)
• Vous n'avez besoin de rien pour les visualiser puisque ce n'est
pas l'objectif : leur utilité est d'être combinées aux documents
HTML.
• Le navigateur Web sait ce qu'il doit faire des CSS.
4
Ajouter du style à un document HTML
• Dans le document (interne)

<head>
<style type="text/css">

</style>
</head>
• Style Inline:
<body style="font-size:12px;…… ">
• Fichier externe : l’extension (suffixe) d’un fichier CSS est .css
<head>
<link href="URL_fichier_CSS" rel="stylesheet"
type="text/css">
</head>
5
REGLE CSS
• Chaque règle est constituée de 2 blocs:

 Un qui spécifie les éléments du document auxquels la règle
s’applique.
 Un bloc déclaration qui spécifie les valeurs des propriétés
h1 { color: blue;
font-size:12px; }
• Le bloc de déclaration contient une déclaration ou plus qui

sont séparé par point virgule (;).
• Chaque déclaration inclut un nom de propriété CSS et sa
valeur séparé par (:).
6
REGLE CSS
• Le bloc de déclaration est entouré par des accolades.

• Chaque déclaration spécifie les valeurs que peuvent prendre
les propriétés associées aux éléments du document
• Le sélecteur pointe sur l’élément HTML à l’aide du nom de
l’élément, id, class, ou bien attribut...
7
L’élément sélecteur
• L’élément sélecteur sélectionne l’élément en se basant sur son

nom.
<body> p{
<p> Cet paragraphe est affecté. </p> text-align: center;
<p id="para1">Cet paragraphe aussi</p> color: red;
<p>Moi aussi!</p> }
</body>
8
Sélecteur id
• Le sélecteur id utilise l’attribut id d’un élément HTML pour

sélectionner l’élément spécifique concerné par le style.
• Le sélecteur id est utilisé pour sélectionner un seul élément.
• L’id d’un élément doit être unique dans la page.
• Pour sélectionner un élément avec l’id, on écrit le
caractère(#), suivit par l’id de l’élément.
<body> #para1 {
<p id="para1">Cet paragraphe est affecté</p> text-align: center;
<p> Cet paragraphe n’est pas affecté. </p> color: red;
</body> }
9
Sélecteur class
• Le sélecteur class sélectionne l’élément qui a l’attribut class.

• Le sélecteur id est utilisé pour sélectionner un seul élément.
• L’id d’un élément doit être unique dans la page.
• Pour sélectionner un élément avec l’attribut class, on écrit le
caractère(.), suivit par le nom de la class.
<body> .center{
<h1 class="center">Titre1</h1> text-align: center;
<p class="center"> Cet paragraphe est affecté.</p> color: red;
</body> }
10
Autres format de Sélecteurs
• Descendant :
 .article p ( tout élément p à l’intérieur d’un élément avec
class article)
• Enfant :
 .article > p (tout élément p immédiatement à l’intérieur
d’un élément avec class "article")
• Attribut :
 p[name] (tout élément p avec l’attribut name, peu importe
la valeur).
 p[name="parag1"] (tout élément p dont l’attribut name, à
la valeur "parag1").
11
Autres format de Sélecteurs
• Pseudo-éléments:
 p:first-line (Première ligne de l’élément p)
 .article:first-child (Premier élément enfant à l’intérieur de
l’élément dont la classe est "article")
 p:first-letter (première lettre d’une paragraphe)
 .article:nth-child(6) (CSS3- 6éme élément à l’intérieur de
l’élément dont la classe est "article")
12
Regroupement des sélecteurs
• Si vous avez des éléments avec le même style, il sera mieux de

regrouper les sélecteurs pour minimiser le code.
13
Les commentaires CSS
• Un commentaire CSS commence par /* et finit par */

• Les commentaires peuvent être aussi en plusieurs lignes.
14
Tâche 1
• Ajouter les styles suivants à votre page.html, en utilisant la

balise <style type="text/css" >, puis dans un fichier externe.
• Soit id=“acceuil” l’identifiant de la première paragraphe, et
class="titre“ pour les titres Acceuil, Formation, Recherche.
header { color: red;
text-align:center;
}
#acceuil { color: blue;
text-align:justify;
}
.titre { color: brown;
}
15
Tâche 1
• Ajouter les styles suivant à votre page.html, en utilisant la

balise <style type="text/css" >, puis dans un fichier externe.
• Soit id=“acceuil” de la première paragraphe, et class="titre“
pour les titres Acceuil, Formation, Recherche.
header { color: red;
text-align:center;
}
#acceuil { color: blue;
text-align:justify;
}
.titre { color: brown;
}
16
Les backgrounds CSS
• Background-color : permet d'attribuer une couleur de fond à un

élément
• Background-image : Permet d'attribuer une image de fond à un
élément. L'indication de l'image se fait par son URL
• Background-repeat : Elle est utilisée pour la répétition d'une
image intégrée en background. 4 possibilités sont possibles :
repeat-x (répétition horizontale), repeat-y (répétition verticale),
repeat (par défaut, répétition sur les 2 axes), no-repeat (aucune
répétition).
• Background-attachement : Définit si une image de fond est fixe
ou défile avec le reste de la page. 2 valeurs : fixed ou scroll
17
Les backgrounds CSS
• Background-position : Définit un décalage de l'image de fond

dans l'élément concerné. Le point de référence est le coin
supérieur gauche de l'élément et les valeurs se définissent en
px ou en % ou par des désignations de position (left, center,
right, top et bottom).
Body {
background-image : url("ensaj.jpg");
background-repeat : no-repeat;
background-attachment :fixed;
background-position: center top;
}
18
Tâche 2
• Modifier l’image que vous avez insérer avec la balise <img>,

en utilisant cette fois-ci background-image.
header{
background-image : url("ensaj.jpg");
background-repeat : no-repeat;
background-attachment :fixed;
background-position: center top;
}
19
Modèle de boîtes
Background parent
Bordure
Background de l’élément 20
Bordure CSS
• Les propriétés CSS de la bordure permettent de spécifier le

style, l’épaisseur(width), et la couleur de la bordure d’un
élément.
 Border: Caractéristiques des bordures
 border-style : Style des bordures.
 border-width : Epaisseur des bordures.
 border-color : Couleur des bordures.
• Il ya aussi les propriétés pour les brodures (top, right, bottom,
and left).
21
Bordure CSS
<!doctype html>
<html>
<head>
<style> p { border-style: dotted solid;
border-color: red green blue gray;
border-width: 4px; }
</style>
</head>
<body>
<p>Ecole National des Sciences Appliquées</p>
</body>
</html>
22
Tâche 3
• Ajouter des bordures de 2px à votre entête (header).

• Puis à tout élément article de votre page.
header{
border-style: solid;
border-color: black;
border-width: 2px;
}
23
Tâche 3
• Ajouter des bordures de 2px à votre entête header.

• Puis à tout élément article à votre page.
header{
border-style: solid;
border-color: black;
border-width: 2px;
}
24
CSS Margin
• Cette propriété applique des marges extérieures à l'élément

concerné, c'est à dire un décalage de sa position par rapport
au conteneur selon des valeurs déterminées.
 margin: Marges extérieures de l'élément.
 margin-top: Marge extérieure du haut de l'élément.
 margin-right: Marge extérieure de droite de l'élément.
 margin-left: Marge extérieure de gauche de l'élément.
 margin-bottom: Marge extérieure du bas de l'élément.
25
CSS Margin
• Toutes les propriétés margin peuvent avoir les valeurs

suivantes:
 auto – le navigateur se charge de calculer la marge
 length – spécifie la marge en px, pt, cm, in etc.
(1in = 2.54cm = 72pt)
 % - spécifie la marge en pourcentage.
 inherit – spécifie que la marge n’hérite pas de l’élément
parent.
26
CSS Margin
<!doctype html>
<html>
<head>
<style> div {
width:300px;
margin: auto;
border: 1px solid red; }
</style>
</head>
<body>
<h1>Utilisation de la valeur auto</h1>
<div>Cet div sera centré parceque la valeur de margin
est auto</div>
</body>
</html>
27
Tâche 4
• Donnez une valeur à la propriété « margin », pour laisser un

espace entre les éléments articles.
28
CSS Padding
• Cette propriété est identique à la précédente, margin, mais

cette fois les marges sont appliquées à l'intérieur de l'élément
concerné.
• Ce style est très souvent utilisé pour permettre un décalage
du contenu (texte, tableau, ...) avec les bords de l'élément
concerné.
 Padding: Marges intérieures de l'élément
 padding-top: Marge intérieure haute de l'élément
 padding-left: Marge intérieure gauche de l'élément
 padding-right : Marge intérieure droite de l'élément
 padding-bottom: Marge intérieure basse de l'élément
29
CSS Padding
• Toutes les propriétés padding peuvent avoir les valeurs

suivantes:
 auto – le navigateur se charge de calculer la marge
 longueur– spécifie la marge en px, pt, cm,in etc.
 % - spécifie la marge en pourcentage.
 inherit – spécifie que la marge n’hérite pas de l’élément
parent.
30
CSS padding
<!doctype html>
<html>
<head>
<style> p.one {
border: 1px solid red;
background-color: cyan;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px; }
</style> </head>
<body> <h2>Utilisation de la propriété padding</h2>
<p>Cet paragraphe n’a pas de marge interne(padding)</p>
<p class="one">Cet paragraphe a une marge interne haute et
bas égaux à 50px, une marge gauche égal à 80px, et droite
égale à 30px.</p> </body>
</html>
31
CSS padding
<!doctype html>
<html>
<head>
<style> p.one {
background-color: cyan;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px; }
</style> </head>
<body> <h2>Utilisation de la propriété padding</h2>
<p>Cet paragraphe n’a pas de marge interne(padding)</p>
<p class="one">Cet paragraphe a une marge interne haute et
bas égaux à 50px, une marge gauche égal à 80px, et droite
égale à 30px.</p> </body>
</html>
32
Tâche 5
• Donnez une valeur à la propriété « padding », pour laisser un

espace entre la bordure et le contenu des éléments
« article ».
33
Tache 5
34
Les dimensions CSS Height et Width
• Les propriétés hauteur (height) et largueur(width) sont utilisé

pour modifié la hauteur et la largeur d’un élément.
• height et width peuvent avoir comme valeur:
 auto – Par défaut, le navigateur se charge de calculer la
hauteur et la largueur.
 longueur– en px, cm, etc.
 % - spécifie la hauteur ou bien la largeur en pourcentage.
35
Les dimensions CSS Height et Width
<!doctype html>
<html>
<head>
<style>
div { width: 400px;
height: 100px;
border: 3px solid #73AD21; }
</style> </head>
<body> <h2> height et width d’un élément:</h2>
<div> cet élément div a comme hauteur 100px, et
largueur 400px. </div>
</body>
</html>
36
Propriété Float
• Défini le positionnement d'un élément dans le conteneur.

 float: = right, left, none
• La valeur left placera l'élément à gauche dans le conteneur, la
valeur right à droite, la valeur none annule ce
positionnement.
• Pour la gestion de l'habillage (en relation avec la propriété
"float"), on utilise:
 Clear:margin
Où margin =right, left, both, none
37
Propriété Float
38
Tâche 6
• Modifiez votre page HTML ( les propriétés de bordure et de

positionnement) pour avoir la page suivante.
39
Tâche 6
• Modifiez votre page HTML ( les propriétés de bordure et de

positionnement) pour avoir la page suivante.
40
Les fonts CSS
• Dans CSS, il y a deux types de fonts family names:

• Generic family – un groupe de fonts family avec une
apparence similaire comme("Serif“, "sans-serif" ou bien
"Monospace")
• Font family - un font family spécifique comme ("Times New

Roman", "Arial" ou bien"Courier New")
41
Les fonts CSS
Generic family Font family Description
Times New Roman Les polices Serif ont des petites lignes aux
Serif
Georgia extrémités de certains caractères
Arial Les polices Sans serif n’ont pas des petites

Sans-serif
Verdana lignes aux extrémités des caractères
Courier New Tous les caractères monospace ont la même

Monospace
Lucida Console largeur
42
Les fonts CSS
 Font: Ensemble des propriétés concernant les caractères.

 font-family: Police de caractères.
 font-size: Taille des caractères.
 font-style: Spécifie le style (normal, italic ou bien oblique)
 font-variant: Affichage des caractères en petites capitales ou
normal (small-caps ou normal ). Les petites capitales ont la
forme des lettres majucules mais avec la hauteur des
minuscules.
 font-weight: Mise en gras ou extra-gras (extra-bold).
43
Les fonts CSS
• La propriété de feuille de style font-family CSS peut prendre la

valeur de un ou plusieurs noms de police séparés par une ",".
p{
font-family: Verdana, Arial , Georgia;
}
• Le navigateur essaiera d'abord d'utiliser la police Verdana. S'il

ne l'a pas, il essaiera Arial . S'il ne l'a pas, il passera à Georgia,
et ainsi de suite.
44
Les Texts CSS
Propriétés Description
color Modifie la couleur du texte
direction Spécifie la direction du texte / écriture (rtl: right-to-left)
Letter-spacing Augmente ou diminue l'espace entre les caractères dans un texte
text-align Modifie l'alignement horizontal du texte( center,left,right,justify)

text- la décoration du texte( overline, underline, line-through, none)
decoration
text-indent Espace avant la première ligne de texte
text-shadow permet d'ajouter une ombre au texte.
text-transform Modifie la casse du texte(uppercase, lowercase, capitalize)
vertical-align Modifie l'alignement vertical du texte(top,middle,bottom)
white-space controler les espaces blancs dans un texte(pre,nowrap,normal)
word-spacing Espace entre les mots (normal, ou bien la valeur en px)
45
Mise en forme des liens hypertextes
• Pour supprimer le style de soulignement du lien hypertexte,

utilisez :
 a {text-decoration:none}
• 4 types de liens hypertextes peuvent être modifiés :
 a:link - un lien normal, non visité
 a:visited - un lien que l'utilisateur a visité
 a:hover - un lien lorsque l'utilisateur passe la souris dessus
 a:active - un lien au moment où l'on clique dessus
• Lorsque vous définissez le style pour plusieurs états de lien, il
existe certaines règles d'ordre :
 a:hover DOIT venir après a:link et a:visited
 a:active DOIT venir après a:hover
46
Les listes CSS
• En HTML, il existe deux grands types de listes :

 les listes non ordonnées (<ul>): les éléments de la liste sont marqués
par des puces.
 listes ordonnées (<ol>): les éléments de la liste sont marqués par des
chiffres ou des lettres.
• Les propriétés des listes CSS permettent:
 de définir différents marqueurs d'éléments de liste pour les listes
ordonnées
 de définir différents marqueurs d'éléments de liste pour les listes non
ordonnées
 de définir une image comme marqueur d'élément de liste
 ajouter des couleurs de fond aux listes et aux éléments de liste.
47
Propriétés des listes CSS
Propriétés Description
list-style Définit toutes les propriétés d'une liste dans une
seule déclaration
list-style-image Spécifie une image comme marqueur de liste
list-style-position Précise si les marqueurs des éléments de la liste
doivent apparaître à l'intérieur ou à l'extérieur du
flux de contenu
list-style-type Précise le type de marqueur de liste (disque, carré,
cercle, aucun, décimal, lettres ascii minuscules, etc.)
48
Tâche 7
• Ecrivez le code HTML de cette page et définissez le style des

listes suivantes :
• Les couleurs utilisées sont

 ol : #ff9999 and #ffe5e5
 ul : #3399ff and #cce5ff 49
Les Formulaires CSS
• Le style d'un formulaire HTML peut être amélioré avec le CSS.

 Utilisez la propriété width pour déterminer la largeur du champ de
saisie.
Exemple : input { width: 100%;}
• Pour attribuer un style seulement à un champ spécifique,
vous pouvez utiliser les sélecteurs d'attributs :
 input[type=text] : sélectionnera uniquement les champs de texte
 input[type=password] : sélectionnera uniquement les champs du mot
de passe
 input[type=number] : ne sélectionnera que les champs numériques
 etc..
Exemple : input[type=text] { width: 100%;}
50
Les Formulaires CSS
• Utilisez la propriété border pour modifier la taille et la couleur

de la bordure, et utilisez la propriété border-radius pour
ajouter des coins arrondis :
Exemple : input[type=text] {
border-radius: 4px;
}
Résultat:
51

Séance7 CoursWeb CSS

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Séance7 CoursWeb CSS

Hochgeladen von

Copyright:

Verfügbare Formate

Cascading Style Sheets (CSS)

Mme. Fatima zahra SALMAM

• Les CSS (feuille de styles en français) sont des documents au

• Mêmes outils que pour les documents HTML (Bloc-notes,

• Dans le document (interne)

• Chaque règle est constituée de 2 blocs:

• Le bloc de déclaration contient une déclaration ou plus qui

• Le bloc de déclaration est entouré par des accolades.

• L’élément sélecteur sélectionne l’élément en se basant sur son

• Le sélecteur id utilise l’attribut id d’un élément HTML pour

• Le sélecteur class sélectionne l’élément qui a l’attribut class.

• Si vous avez des éléments avec le même style, il sera mieux de

• Un commentaire CSS commence par /* et finit par */

• Ajouter les styles suivants à votre page.html, en utilisant la

• Ajouter les styles suivant à votre page.html, en utilisant la

• Background-color : permet d'attribuer une couleur de fond à un

• Background-position : Définit un décalage de l'image de fond

• Modifier l’image que vous avez insérer avec la balise <img>,

• Les propriétés CSS de la bordure permettent de spécifier le

• Ajouter des bordures de 2px à votre entête (header).

• Ajouter des bordures de 2px à votre entête header.

• Cette propriété applique des marges extérieures à l'élément

• Toutes les propriétés margin peuvent avoir les valeurs

• Donnez une valeur à la propriété « margin », pour laisser un

• Cette propriété est identique à la précédente, margin, mais

• Toutes les propriétés padding peuvent avoir les valeurs

• Donnez une valeur à la propriété « padding », pour laisser un

• Les propriétés hauteur (height) et largueur(width) sont utilisé

• Défini le positionnement d'un élément dans le conteneur.

• Modifiez votre page HTML ( les propriétés de bordure et de

• Modifiez votre page HTML ( les propriétés de bordure et de

• Dans CSS, il y a deux types de fonts family names:

• Font family - un font family spécifique comme ("Times New

Generic family Font family Description

Arial Les polices Sans serif n’ont pas des petites

Courier New Tous les caractères monospace ont la même

 Font: Ensemble des propriétés concernant les caractères.

• La propriété de feuille de style font-family CSS peut prendre la

• Le navigateur essaiera d'abord d'utiliser la police Verdana. S'il

text-align Modifie l'alignement horizontal du texte( center,left,right,justify)

• Pour supprimer le style de soulignement du lien hypertexte,

• En HTML, il existe deux grands types de listes :

• Ecrivez le code HTML de cette page et définissez le style des

• Les couleurs utilisées sont

• Le style d'un formulaire HTML peut être amélioré avec le CSS.

• Utilisez la propriété border pour modifier la taille et la couleur

Das könnte Ihnen auch gefallen