Programmation web
A.U. 2020-2021
(Support de cours)
CSCI361A
Université Libanaise Internationale
Pr. Moustapha Mohamed Saleck
2
1. Introduction
CSS signifie :
o Cascading Style Sheets : feuilles de style en cascade.
Rôle principal :
o Définir l’aspect graphique des pages Web (le design) :
Gestion des couleurs;
Typographie des caractères;
Bordures, arrière-plans et images;
Menus graphiques et images réactives;
…etc.
3
1. Introduction
Avantages :
o Séparer la structure (le contenu) de la présentation
(la forme) des pages Web.
o Réduire la taille du code HTML et sa complexité.
o Simplifier la maintenance (correction, évolution)
des documents Web.
o Avoir un affichage des pages plus rapide,
puisqu’une feuille CSS est toujours conservée dans
la mémoire cache de l’ordinateur client après la
première connexion.
4
2. Syntaxe CSS
Syntaxe de base des règles CSS :
• sélecteur { propriété: valeur; … }
Un sélecteur, tout d’abord, va servir à déterminer à
quel(s) élément(s) HTML ou à quel type d’éléments on
souhaite appliquer un style particulier. Si l’on souhaite
appliquer un style particulier à tous nos paragraphes,
par exemple, on utilisera le sélecteur « p ».
À l’intérieur des accolades, on trouve des déclarations
sous forme de couples « propriété - valeur ».
Le point-virgule est utilisé comme un séparateur entre
5
les déclarations.
2. Syntaxe CSS
Exemples :
• h1 { color : blue; }
o Le sélecteur s’applique ici à la balise <h1>.
o il y a une seule déclaration qui associe la
valeur « blue » à la propriété « color ».
• h1 {
color : blue;
text-aling : center
}
o N.B : le point-virgule après la dernière
6
déclaration est facultatif.
2. Syntaxe CSS
Commentaires CSS :
• /* … */
o On peut insérer des commentaires dans un
fichier contenant des règles de styles.
o Un commentaire CSS est similaire à celui du
langage C ou C++ :
/* Ceci est un commentaire */
7
3. Application des styles CSS
Insertion des styles dans l’en-tête du document :
• Balise <style> … </style>
On peut placer des styles dans la section
<HEAD> d’un document HTML.
Le style sera applicable à tout le document.
Exemple :
<style type = "text/css">
h1 { color : blue }
</style>
Résultat attendu : appliquer une couleur « blue » à
8
chaque élément <h1> dans le document courant.
3. Application des styles CSS
Liaison des styles à partir d’une feuille de styles
séparée :
• Fichiers CSS :
o Ce sont des fichiers textes enregistrés sous
l’extension « .css ».
o Un fichier CSS contient des définitions de styles
respectant la syntaxe du langage CSS.
• Liaison des styles aux contenus :
o Pour cela, on utilise une balise <link> dans la
section <head> du document HTML.
9
3. Application des styles CSS
Exemple de liaison d’un style externe :
<html>
<head>
<title>Fichiers CSS externes</title>
<link rel = "stylesheet" type = "text/css"
href = "styles.css" />
</head>
h1 {
<body> color : blue
<h1>Titre de la page</h1> font-size = 16px
</body> }
10
</html> Styles.css
3. Application des styles CSS
Les styles à l’intérieur des balises :
• Exemple :
<h1 style = "color : blue"> Titre de la
page</h1>
• Utilisation de cette forme :
- Cette technique est réservée uniquement :
Aux essais ponctuels temporaires (test des règles).
Cas de force majeure.
- Elle est en fait contradictoire aux avantages des
feuilles CSS. 11
4. Les sélecteurs des styles
Les sélecteurs de styles CSS :
• Le langage CSS fournit 4 types de sélecteurs de
styles :
Sélecteurs de balises;
Sélecteurs de classes;
Sélecteurs d’identifiants;
Sélecteurs de pseudo-classes et de pseudo-
éléments.
12
4. Les sélecteurs des styles
Sélecteurs de balises :
• Règle :
o Toute balise HTML peut intervenir dans un
sélecteur.
o Le nom du sélecteur est dans ce cas est celui de
la balise, sans "<" et ">".
• Exemples :
h1 {color : red; background : yellow;}
// style applicable à toutes les balises <h1>
a { color : gray; } 13
// style applicable à toutes les balises <a>
4. Les sélecteurs des styles
Sélecteurs de classes :
• Règle :
o Une classe est un nom que l’on choisit et dont on
indique les éléments concernés.
o Le nom du sélecteur est le nom de la classe préfixé
par un point « . ».
o Une classe permet de définir des exceptions dans
les règles de styles.
o Par exemple, si on défini une règle pour les
paragraphes par laquelle la couleur de texte est 14
rouge, elle sera applicable à tous les paragraphes
4. Les sélecteurs des styles
o On doit alors écrire la règle : p {color : red;}
o En suite, on veut qu’un paragraphe spécifique aura
un texte de couleur bleu sur un fond jaune. La
solution consiste à définir une classe réalisant cette
exception :
.para {color : blue; background : yellow;}
o Pour appliquer ce style particulier, on rattache la
balise <p> avec la classe "para", par :
<p class = "para">. . . </p>
15
4. Les sélecteurs des styles
Exemple de sélecteurs de classes :
/* Fichier : styles_1.css */
/* Précisons le comportement par défaut pour
toutes les balises <a> */
a { color: green; }
/* Appelons « .sommaire » la classe des liens
spécifiques */
.sommaire { color: red; }
/* remarque : le nom d’une classe est formé par des
lettres et/ou des chiffres, et doit commencer par une
16
lettre */
4. Les sélecteurs des styles
<html>
<head> <title>Test CSS 1</title>
<link rel = "stylesheet" type = "text/css" href =
"styles_1.css" />
</head>
<body>
<a href = "http://www.google.fr">Vers google</a><br>
<a href = "http://www.yahoo.fr" class =
"sommaire">Vers yahoo</a>
</body> 17
</html>
4. Les sélecteurs des styles
Sélecteurs de classes :
• Remarque 2 :
Le nombre de classes utilisées est libre, ainsi que
le nombre d’éléments auxquels elles
s’appliquent.
Un même élément peut aussi recevoir plusieurs
classes.
• Exemple :
.sommaire { color: red; }
.titre2 { text-align: center; }
18
<h2 class = "sommaire titre2">Un titre de
niveau 2 en rouge et centré</h2>
4. Les sélecteurs des styles
Sélecteurs d’identifiants :
• Règle :
o Un identificateur (identifiant ou id) est :
- un nom choisi librement;
- formé à partir de lettres et/ou chiffres et doit
commencer par une lettre.
- préfixé d’un symbole « # ».
o Il diffère de la classe en ce qu’il ne peut porter
qu’au plus sur un objet du document.
o Lorsque les caractéristiques choisies ne peuvent
19
s’appliquer qu’à un seul élément sur une page, on
utilise alors un identificateur au lieu d’une classe.
4. Les sélecteurs des styles
• En pratique :
o Attribuer un identificateur aux objets uniques de la
page Web.
o Par exemple, un bloc d’en-tête du document, un bloc
publicité, un bloc rubriques annexes, …etc.
o Pour ces objets, il est fortement conseillé d’utiliser
des identificateurs.
o Pour les objets multiples comme les paragraphes et
les listes de menus, on utilisera des classes.
20
4. Les sélecteurs des styles
• Exemple :
/* Dans cet exemple, les indications de position ne
pourront s’appliquer qu’une seule fois, à l’image du logo : */
#imglogo {
position: absolute;
top: 20px;
left: 10px;
z-index: 1; /* Empilement */
}
/* Dans le code HTML, on écrira : */
21
<img src = "logo1.jpg " id = "imglogo" width = "100"
height = "90 " alt = "logo de la Faculté" >
4. Les sélecteurs des styles
Sélecteurs de pseudo-classes et de pseudo éléments :
• Définition :
o Les pseudo-classes et les pseudo éléments créent des
mécanismes ou des relations qui ne sont pas
réalisables en HTML.
o CSS crée en effet des éléments spécifiques à certaines
actions (comme le survol d’un lien) ou à certaines
arborescences (comme le premier paragraphe d’un
bloc).
• Exemples de pseudo-classes : 22
o x:link : état d'un lien non visité;
4. Les sélecteurs des styles
o x:visited : état d'un lien visité;
o x:hover : état d'un élément survolé avec la souris;
o x:focus : état d'un élément qui a le focus;
o x:active : état d'un élément qui est activé;
o x:lang : élément dont la langue est par exemple fr ->
lang(fr);
o x:first-child : premier fils d'un élément.
• Exemples de pseudo-éléments :
o x:first-line : première ligne d'un élément x;
o x:first-letter : première lettre d'un élément x;
23
o x:after : insérer du contenu généré après un élément x;
o x:before : insérer du contenu généré avant un élément x.
4. Les sélecteurs des styles
Sélecteurs de pseudo-classes et de pseudo éléments:
• Exemples :
/* Première ligne d’un paragraphe */
p:first-line { font-size: medium;
color: red; background: yellow; }
/* états des liens */
a:link { color: green; }
a:visited { color: red; }
a:hover { color: magenta; }
a:active { color: black; } 24
4. Les sélecteurs des styles
D’autres règles pour les sélecteurs de styles :
• Regroupement des sélecteurs :
o Il est possible de regrouper plusieurs sélecteurs
ayant la même règle.
o Ainsi, les trois règles :
p { margin-left: 0; }
h1 { margin-left: 0; }
h2 { margin-left: 0; }
o peuvent être combinées en une seule :
p, h1, h2 { margin-left: 0; } 25
4. Les sélecteurs des styles
• Regroupement des propriétés :
o Certaines propriétés génériques prévoient une
version raccourcie, permettant l’application de
plusieurs valeurs en une seule déclaration. Ainsi,
la règle :
p { font-family: Arial, sans-serif;
font-style: italic; fontweight:
bold; font-size: 120%;
font-height: 140%; }
o pourra s’écrire :
26
p { font: italic bold 120%/140%
Arial, sans-serif; }
5. Liste de propriétés CSS
Police, taille et décorations :
• font-family
Nom de la police.
Valeurs : triplet de noms.
• font-size
Taille de texte.
Valeurs : en (px), en (%), taille relative (em) ou
taille relative à la hauteur de la lettre x (xx-
small, x-smal, small, medium, large, x-large, xx-
large). 27
5. Liste de propriétés CSS
• font-weight
Style gras.
Valeurs : bold, bolder, lighter, normal.
• font-style
Style italique.
Valeurs : itaic, oblique, normal.
• text-decoration
Style de décoration.
Valeurs : underline, overline, linethrough,
blink, none. 28
5. Liste de propriétés CSS
• font-variant
Style petites capitales.
Valeurs : small-caps, normal.
• text-transform
Style capitales.
Valeurs : uppercase, lowercase, capitalize, none.
• font
Méga-propriété de police.
29
5. Liste de propriétés CSS
Alignement :
• Text-align
Alignement horizontal.
Valeurs : left, center, right, justify.
• vertical-align
o Alignement vertical.
o Valeurs : top, middle, bottom.
• Text-indent
Alinéa de paragraphes.
Valeur en pixels (px).
30
5. Liste de propriétés CSS
• line-height
Hauteur de ligne.
Valeur en (px) ou en (%).
• white-space
Césure.
Valeurs : normal, nowrap, pre.
31
5. Liste de propriétés CSS
Couleur et fond :
• color
Couleur de texte.
Valeurs : noms (white, black, red, blue, green,
yellow, magenta, gray, olive, orange, …), en
rgb(0…255, 0…255, 0…255) ou en hexadécimal
(#0aff00).
• backround-color
Couleur de fond.
Valeurs : idem que les valeurs de color.
32
5. Liste de propriétés CSS
Image de fond :
• background-image
Image de fond.
Valeurs : url("….").
• background-attachment
Style de fond (fixé ou défilant).
Valeurs : fixed, scroll.
• background-repeat
Style de répétition de fond.
Valeurs : repeat, repeat-x, repeat-y, no-repeat.
33
5. Liste de propriétés CSS
• background-position
Style de position de fond.
Valeurs : en (px), en (%) ou top, center, bottom,
left, right.
• background
Méga-propriété de fond.
34
5. Liste de propriétés CSS
Boîtes :
• width
Largeur de la boîte.
Valeurs : en (px), en (%) ou auto.
• height
Hauteur de la boîte.
Valeurs : idem que width.
• min-width, max-width, min-height, max-height
Largeurs et hauteurs minimales et
maximales de la boîte. 35
Valeurs : idem que width.
5. Liste de propriétés CSS
Marges extérieurs :
• margin-top
Marge en haut.
Valeurs : en (px), en (em), …etc.
• margin-left, margin-right, margin-bottom
Marge à gauche, à droite et en bas.
Valeurs : idem que margin-top.
• margin
Méga-propriété de marge extérieure.
36
5. Liste de propriétés CSS
Marges intérieurs :
• padding-top
Marge intérieure en haut.
Valeurs : en (px), en (em), …etc.
• padding-left, padding-right, padding-bottom
Marge intérieur à gauche, à droite et en bas.
Valeurs : idem que padding-top.
• padding
Méga-propriété de marge intérieure.
37
5. Liste de propriétés CSS
Bordures :
• border-width
Épaisseur de la bordure.
Valeurs : en (px).
• border-color
Couleur de la bordure.
Valeurs : une couleur (idem à color).
• border-style
Style de la bordure.
Valeurs : nonet, hidden, solid, double, dashed, 38
dotted, inset, outset, ridge.
5. Liste de propriétés CSS
• border-left
Caractéristiques de la bordure à gauche.
Valeurs : vecteur (épaisseur, couleur, style).
L’ordre des valeurs n’a pas d’importance.
• border-top
Caractéristiques de la bordure en haut.
Valeurs : idem que border-left.
• border-right
Caractéristiques de la bordure à droite.
Valeurs : idem que border-left. 39
5. Liste de propriétés CSS
• border-bottom
Caractéristiques de la bordure en bas.
Valeurs : idem que border-left.
• Border
Méga-propriété de bordure.
40
5. Liste de propriétés CSS
Curseur de souris :
• cursor
Styles de curseur de la souris.
Valeurs : auto, default, pointer, text, wait,
progress, help, move, n-resize, ne-resize, e-
resize, se-resize, sresize, sw-resize, w-resize,
nwresize, url.
41
5. Liste de propriétés CSS
Propriété de tableaux :
• border-collapse
Type de bordure.
Valeurs : collapse, separate.
• empty-cells
Cellules vides.
Valeurs : collapse, show.
• caption-side
Position du titre du tableau.
Valeurs : top, bottom, left, right. 42
5. Liste de propriétés CSS
Propriété de listes :
• list-style-type
Type de liste.
Valeurs : disc, square, circle, none, decimal,
decimal-leading-zero, upper-roman, lower-roman,
upperalpha, lower-alpha, lower-greek.
• list-style-position
Position en retrait.
Valeurs : inside, ouside.
43
5. Liste de propriétés CSS
• list-style-image
Position personnalisée.
Valeurs : url("….").
• list-style
Méga-propriété de liste.
44
5. Liste de propriétés CSS
Propriétés d’affichage :
• display
Type d’élément. Valeurs : none, block, inline, list-
item.
• visibility
Affichage. Valeurs : hidden, visible.
• clip
Affichage partielle. Valeurs : rect(val1, val2, val3,
val4).
• overflow
45
Limiter les dimensions. Valeurs : visible, hidden,
scroll, auto.
5. Liste de propriétés CSS
Propriétés de positionnement :
float
Flottant. Valeurs : left, right, none.
• clear
Stopper un flottant. Valeurs : left, right, both,
none.
• position
Type de positionnement. Valeurs : absolute,
fixed, relative, static.
• top
46
Position par rapport au haut. Valeurs : en (px),
en (%), en (em), …
5. Liste de propriétés CSS
• bottom
Position par rapport au bas. Valeurs : idem au top.
• left
Position par rapport à la gauche. Valeurs : idem au
top.
• right
Position par rapport à la droite. Valeurs : idem au
top.
• z-index
Ordre d’affichage (couches de présentation). Valeurs :
47
des entiers.
