Scribd
Importer
45 vues47 pages

Programmation Web Ch3

Transféré par

moustaphasaleck
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
45 vues47 pages

Programmation Web Ch3

Transféré par

moustaphasaleck
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
Vous êtes sur la page 1/ 47

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.

Vous aimerez peut-être aussi