Univ. Alger 1 - Dépt.

Maths-Info - L3 ISIL - 22/01/2019

Programmation Web Introduction

CSS
• Cascading Style Sheet
• Les Feuilles de Style en Cascade
• Objectif : séparation du contenu de la
présentation
Présenté par :
• Modifier l’apparence d’une page Web en
H. BENKAOUHA fonction du média (imprimante, écran, PDA, …)
Département Informatique • Actuellement CSS 3 qui n'est pas finalisée.
Faculté d’Électronique et Informatique • CSS 2 est supporté par tous les navigateurs
USTHB connus.
1 2

Le Style comme attribut dans une

Définition d’un Style
balise
• On définit un style de 3 manières différentes :
• On peut associer directement dans le code HTML
– Comme attribut dans une balise <balise style="…"> à une balise un style.
– A l’aide d’une balise spéciale dans l’en-tête <style
• Il sera appliqué directement seulement aux
type="text/css"> …</style>
éléments concernés par cette balise.
– Dans un fichier externe qu’on peut appeler dans l’en-
• l’attribut sera écrit :
tête de la page HTML: <link
rel="stylesheet" type="text/css" href="adresse- – style="ppté1=val1; ppté2 =val2; …"
fichier" /> • Exemple :
– <p style="color=blue; text-align=right">Ceci est un
exemple</p>
3 4

Style lié à une ou plusieurs Style lié à une ou plusieurs

balises (1)
• Sa définition se fait dans l’entête de la page ou
dans un fichier externe.
• La définition se fait comme suit :
– sélecteur {ppté1:val1; ppté2:val2; …}
• Le sélecteur permet de spécifier la ou les balises
concernées par ce style.
balises (2)
• A chaque apparition de du nom de la balise dans
le code, le style sera appliqué aux éléments de
cette balise.
• La propriété : comme par exemple la taille, la
couleur, le fond, la bordure, l’emplacement, …
• A chaque propriété, on affecte une valeur.

5 6

Enseignant : Dr. H. BENKAOUHA 1

Univ. Alger 1 - Dépt. Maths-Info - L3 ISIL - 22/01/2019

Les sélecteurs (1) Les sélecteurs (2)

• Sélecteur destiné à un type de balise :
– nom_balise{ ppté:val; ppté:val; …}
– Exemple : p {color=green; text-align=center;
background-color=yellow;}
• Le sélecteur universel :
– * {ppté=val; …}
– Destiné à toutes les balises.
• Sélecteur pour plusieurs types de balises en
même temps :
– nom_balise1, nom_balise2; …{ppté:val; …}
• Sélecteur destiné aux balises imbriquées :
– nom_balise1 nom_balise2 {ppté:val; …}
– Exemple : p strong{color:blue} Tout texte gras dans 1
paragraphe apparaîtra en bleu.

7 8

Définition d’une classe de style Définition d’une classe de style

(1) (2)

• Sa définition se fait dans l’entête de la page ou • Le sélecteur s’écrit :

dans un fichier externe. – .identificateur : classe applicable à toutes les balises
• Le sélecteur ici est un identificateur défini par – nom_balise.identificateur : classe applicable
l’utilisateur pour dissocier le style d’une balise. uniquement aux balises nom_balise
• Par exemple :
– .txt_bleu{color:blue;}
– p.txt_noir{color:black;}

9 10

Application d’une classe de style Application d’une classe de style

(1) (2)
• L’utilisation d’une classe de style dans une page • Exemple :
Web se fait dans les balises. – <h1 class="txt_bleu">…
• On rajoute l’attribut class à la balise concernée. – <p class="txt_noir">…la classe txt_noir ne peut être
appliquée qu’à des balises p (voir sa définition)
• On affecte à cet attribut le nom attribué lors de
la définition. • Pour l’appliquer à un bloc du code HTML, on
utilise la balise <div>
• Pour l’appliquer à des éléments sans balises, on
utilise la balise <span>

11 12

Enseignant : Dr. H. BENKAOUHA 2

Univ. Alger 1 - Dépt. Maths-Info - L3 ISIL - 22/01/2019

Définition d’une classe de style Application d’une classe de style

id (2) id (1)
• On rajoute l’attribut id à la balise concernée.
• Le sélecteur s’écrit :
• On affecte à cet attribut le nom attribué lors de
– #identificateur : applicable à toutes les balises
la définition.
– nom_balise#identificateur : applicable uniquement
aux balises nom_balise • Exemple :
– <h1 id="txt_bleu">…
• Par exemple :
– #txt_bleu{color:blue;}

13 14

Application d’une classe de style Propriétés des couleurs

id (2) • color
• Il ne peut pas y avoir 2 éléments avec le même id – couleur d'un élément.
dans le document. • background-color
– couleur de fond d'un élément.
• Chaque id doit être unique.
• Les valeurs de ces propriétés peuvent être :
• Dans le cas contraire, il faudrait utiliser l'attribut
– En hexadécimal #RRGGBB
class à la place. – En noms de couleurs : black, white, green, red, …
– En valeurs RGB décimales : rgb(x,y,z) où x, y et z sont
dans {0, …, 255}
– En pourcentage RGB : rgb(a%,b%,c%)

15 16

Propriétés liées au fond (1) Propriétés liées au fond (2)

• background-position
– Positionner une image d'arrière-plan.
• background-image
– La valeur est combinaison de 2 valeurs sous la forme :
– Définit une image de fond d’un élément.
val1 val2
• background-repeat
– val1 représente le positionnement horizontal de l'image
– Répéter l'image d'arrière-plan. de fond à partir de l'extrémité gauche.
– 4 valeurs possibles :
– val2 représente le positionnement vertical de l'image de
– repeat : L'image se répète. fond à partir de l'extrémité du haut.
– no-repeat : L'image ne se répète pas .
– val1 et val2 peuvent être en pixel : 50px, en centimètres
– repeat-x : L'image se répète horizontalement. : 2cm ou en pourcentage : 10%
– repeat-y : L'image se répète verticalement.
– val1 peut être une valeur constante : left, center ou
17
right. 18

– Même chose pour val2 : top, center ou bottom.

Enseignant : Dr. H. BENKAOUHA 3

Univ. Alger 1 - Dépt. Maths-Info - L3 ISIL - 22/01/2019

Propriétés liées au fond (3) Propriétés de la police de

• background-attachment caractères (1)
– Fixer ou non l'image d'arrière-plan.
• font-family
– 2 valeurs possibles :
– Indique la liste prioritaire des polices à utiliser pour
– scroll : L'image défile avec la page. l'affichage d'un élément
– fixed : L'image est bloquée. – 2 types de noms pour catégoriser les polices : les
• background noms de familles et les familles génériques.
– Raccourci pour toutes les propriétés de fond. – Comme exemples de noms de familles (souvent
– Permet d'écrire une feuille de style plus courte. appelées « polices »), on trouve "Arial", "Times New
Roman" ou "Courier New".
– Par exemple : background: #FFFFFF url("image.gif") no-
repeat fixed right bottom;
19 20

Propriétés de la police de Propriétés de la police de

caractères (2) caractères (3)
– Les familles génériques sont des groupes de noms de
familles : serif, sans-serif ou monospace. • font-style
– On commence par la police préférée suivie par des – Le style de la police concernée doit être en italique
polices de remplacement. ou non.
– Il est recommandé de terminer la liste par une famille – 2 valeurs possibles : normal, italic.
générique. • font-variant
– Par exemple : h1 {font-family: arial, verdana, sans-serif;} – Pour choisir entre : normal ou small-caps.
– Si le nom contient des espaces, il faut le mettre entre – La valeur small-caps affiche tous les caractères en
guillemets comme "Times New Roman". minuscules en majuscules mais avec une taille
légèrement plus petite.
21 22

Propriétés de la police de Propriétés de la police de

caractères (4) caractères (5)
• font-weight
– Pour choisir entre : normal ou bold. • font
– La valeur bold affiche les caractères concernés par le – Raccourci pour toutes les propriétés de police.
style en gras.
– Permet d'écrire une feuille de style plus courte.
• font-size
– Par exemple : font: italic bold 30px arial, sans-serif;
– Permet de définir la taille des caractères.
– L'ordre des valeurs est : font-style, font-variant, font-
– Sa valeur est un nombre suivi de l’unité.
weight, font-size, font-family.
– Unité absolue : pt, px, in, cm, mm, pc.
– Unité relative : %, em, ex => Possibilité de réajuster le
texte dans le navigateur.
23 24

Enseignant : Dr. H. BENKAOUHA 4

Univ. Alger 1 - Dépt. Maths-Info - L3 ISIL - 22/01/2019

Propriétés du texte (1) Propriétés du texte (2)

• text-align
• text-indent – Définit l'alignement du texte.
– Définit un retrait du texte de la première ligne du – Le texte peut être aligné à gauche (left), à droite
paragraphe. (right) ou centré (center).
– Par exemple : p {text-indent: 30px;} – De plus, la valeur justify étirera chaque ligne de sorte
– Tous les paragraphe auront un retrait gauche de 30 que les marges à gauche et à droite soient droites.
pixels sur la première ligne.

25 26

Propriétés du texte (3) Propriétés du texte (4)

• text-decoration • text-transform
– Permet d'ajouter différents effets au texte. – Elle a 4 valeurs possibles
– Par exemple, on peut souligner le texte, le barrer, – capitalize : Elle affiche en majuscule la première lettre
tracer un trait au-dessus, etc.
de chaque mot.
– underline, overline, line-through, none
– uppercase : Elle convertit toutes les lettres en
• letter-spacing majuscules.
– Pour définir l'espacement entre les caractères du texte – lowercase : Elle convertit toutes les lettres en
.
minuscules.
– h1 {letter-spacing: 6px;}
– none : Aucune transformation, et le texte se présente
– Définit un espacement de 6 pixels entre les caractères
tel qu'il apparaît dans le code.
des éléments de h1.
27 28

Notion de boites Les marges

• Un élément a quatre côtés : droit ("right"), gauche
("left"), supérieur ("top") et inférieur ("bottom").
• La marge est la distance entre chaque côté et
l'élément avoisinant (ou les bordures du
document).
• Pour les fixer on a 2 façons .
• On a l’exemple suivant :
– body {margin-top: 100px; margin-right: 40px; margin-
bottom: 10px; margin-left: 70px;}
– body {margin: 100px 40px 10px 70px;}

29 30

Enseignant : Dr. H. BENKAOUHA 5

Univ. Alger 1 - Dépt. Maths-Info - L3 ISIL - 22/01/2019

La marge interne d'un élément :

padding
• C'àd. fixer l'espacement dans un élément.
• Définit la distance interne entre la bordure et le
contenu de l'élément.
• Pour les fixer on a 2 façons .
• On a l’exemple suivant :
– p {padding-top: 100px; padding-right: 40px; padding-
bottom: 10px; padding-left: 70px;}
– p {padding: 100px 40px 10px 70px;}
Les bordures (1)
• border-width
– Définit l'épaisseur des bordures
– Les valeurs peuvent être "thin", "medium" et "thick",
– Ou une valeur numérique en pixels.
• border-color
– Définit la couleur d'une bordure.
– Les valeurs sont des couleurs.

31 32

Les bordures (2) Hauteur et Largeur

• border-style • Par défaut : la largeur et la hauteur d'une boîte
– On a plusieurs valeurs possible :
– "none" ou "hidden" : pas de style. sont fixées par son contenu.
– dotted : pointillets. • Il est possible de les modifier.
– dashed : trait discontinu.
– solid : trait continu. • Par exemple :
– double – div.box { height: 500px; width: 200px;}
– groove : effet d'ombre, creux.
– ridge : effet 3D, cadre.
– inset : entrant, bouton appuyé.
– outset : sortant, vers l'extérieur.
• border
– p {border: 1px solid blue;}

33 34

Positionnement des éléments Positionnement des éléments

(1)
• Le positionnement absolu :
– On place un élément en position absolue en fixant la
valeur de la propriété position à "absolute".
– Elle est calculée par rapport aux extrémités du
document.
– On peut alors utiliser les propriétés (left ou right) et
(top ou bottom) pour placer la boîte.
– Par exemple : #box1 { position:absolute; top: 50px;
left: 50px;}
(2)
• Le positionnement relatif :
– On place un élément en position absolue en fixant la
valeur de la propriété position à "relative".
– Elle est calculée d'après sa position originale dans le
document.
– On peut alors utiliser les propriétés (left ou right) et
(top ou bottom) pour placer la boîte.
– Par exemple : #box2 { position:relative; bottom: 50px;
left: 50px;}

35 36

Enseignant : Dr. H. BENKAOUHA 6

Univ. Alger 1 - Dépt. Maths-Info - L3 ISIL - 22/01/2019

Les couches Propriété d’affichage

• CSS agit dans 3 dimensions : la hauteur, la largeur • Grâce à l’attribut display.
et la profondeur. • Permet de modifier l’apparence des éléments.
• Pour la profondeur, il s'agit de ranger les éléments
en couches. • Les valeurs les plus fréquentes sont :
• C'est l'ordre dans lequel les éléments recouvrent • block
les autres. – Saut de ligne avant et après l’élément
• Il suffit d'affecter un numéro à la propriété z-index • inline (valeur par défaut)
de chaque élément. – Pas de retour à la ligne avant et après l’élément
• Un élément de numéro supérieur recouvre ceux • none
de numéro inférieur. – L'élément sera masqué
37 38

Les styles de liens (1) Les styles de liens (2)

• Ils sont particuliers car le lien est affecté par • a:hover
certains événements comme : – Si la souris est sur l’hyperliens
– Son survol par la souris – a:hover {text-decoration: underline; color: green;}
– Le clic • a:active
– Déjà visité ou jamais – Si la souris est enfoncé sur le lien
–… – a:active {text-decoration: underline; color: orange;}
• La notion de pseudo classe : • a:visited
– On écrit dans la définition comme sélecteur le nom de
la balise suivi de : puis l’état. – Si le lien a déjà été visité
– On a 5 pseudo classes. – a:visited {text-decoration: underline; color: #660099;}

39 40

Les styles de liens (3) Priorités de styles (1)

• a:link
• En cas de conflit, application de celui qui a le plus
– Si le lien n’a pas été visité
de poids.
– a:link {text-decoration: underline; color: #0000ff;}
• a:focus Type exemple Poids
– Si le TAB est sur l’hyperlien hérité 0
– a:active {font-weight: bold; color: orange;}
simple h1 {color: yelllow;} 1
classe .classe1 {color: red;} 10
id #id21 {color: blue;} 100

41 42

Enseignant : Dr. H. BENKAOUHA 7

Univ. Alger 1 - Dépt. Maths-Info - L3 ISIL - 22/01/2019

Priorités de styles (2)

• Exemple :
Priorités de styles (3)
• Code CSS
– h1{color: brown;}
• Si le conflit persiste
– h1.classe1{color: blue;}
– h1#id21{color: yellow;}
• La dernière dans la définition (fichier CSS) qui
sera appliquée
• Code XHTML
– <h1 class="classe1">Titre </h1>
• => Le titre sera bleu

43 44

Priorités de styles (4)

• Pour changer l’ordre de priorité: Déclaration
« !important »
• Permet de donner une priorité maximale.
• CSS
– p.dark { color: blue !important;}
– p#spec{ color: green;}
• Code XHTML
– <p class="dark" id="spec">Le text du paragraphe</p>.
• => en bleu

45

Enseignant : Dr. H. BENKAOUHA 8