Chapitre 3:
Feuilles de style CSS
ISGB 1
CSS3
• Les CSS (Cascading Style Sheets) (feuilles de styles en cascade),
servent généralement à mettre en forme des documents web de type
HTML et ceci par l'intermédiaire de propriétés d'apparence (couleurs,
bordures, polices, etc.) et de placement (largeur, hauteur, côte à côte,
dessus-dessous, etc.).
ISGB 2
Dans un fichier. CSS
ISGB 3
Dans un fichier. CSS
Exemple1
ISGB 4
Dans un fichier. CSS
Exemple1
ISGB 5
Dans l'en-tête <head> du fichier HTML
ISGB 6
Dans l'en-tête <head> du fichier HTML
Exemple 2
ISGB 7
Directement dans les balises
(Exemple 3)
ISGB 8
Quelle méthode choisir ?
ISGB 9
ISGB 10
ISGB 11
ISGB 12
ISGB 13
ISGB 14
ISGB 15
ISGB 16
ISGB 17
ISGB 18
ISGB 19
ISGB 20
ISGB 21
ISGB 22
ISGB 23
ISGB 24
ISGB 25
ISGB 26
Pseudo-classes
• Les pseudo-classes :link et :visited s'adressent
uniquement à des liens hypertextes (c'est-à-dire les
balises <a href=""> ..</a> en HTML). Le premier
permet de sélectionner les liens qui n'ont pas encore
été visités et le second ceux qui l'ont déjà été.
ISGB 27
Pseudo-classes
Intéraction avec l’utilisateur
ISGB 28
Pseudo-classes
ISGB 29
Pseudo-éléments
ISGB 30
Mise en forme du texte
‣ font-size: small | medium|large...| x pt
ISGB 31
Mise en forme du texte
‣ font-family: fontname1, fontname2 (si la première n’est pas
disponible),
ISGB 32
Mise en forme du texte
‣ font-style: italic, oblique
ISGB 33
Mise en forme du texte
‣ font-weight: bold |bolder|normal| lighter
ISGB 34
Mise en forme du texte
‣ text-decoration: underline, overline, etc
ISGB 35
Mise en forme du texte
‣ font-variant: small-caps
ISGB 36
Mise en forme du texte
‣color: red, blue, green, yellow, etc.
Exemple
P, h1 {color: red;}
ISGB 37
Mise en forme du texte
‣ text-transform: capitalize, uppercase, lowercase.
ISGB 38
Mise en forme du texte
‣ direction: lrt ou rtl
ISGB 39
Mise en forme du texte
‣ text-indent: (retrait de première ligne) % | 2 px
ISGB 40
Mise en forme du texte
‣line-height:
ISGB 41
Mise en forme du texte
‣text-align:
ISGB 42
Mise en forme du texte
‣ width, height: longueur et hauteur
ISGB 43
Mise en forme du texte
ISGB 44
Mise en forme des listes
ISGB 45
Mise en forme des listes
ISGB 46
Mise en forme des listes
ISGB 47
Arrière plan, bordure et ombre
ISGB 48
Arrière plan, bordure et ombre
ISGB 49
Arrière plan, bordure et ombre
ISGB 50
Arrière plan, bordure et ombre
Complément
• body { background-image : url([Link]) ;
• background-attachement: fixed ; /* le
fond restera fixe */ background-repeat
: no-repeat ; /* le fond ne sera pas
répété*/
• background-position:topright;/*le fond sera
placé en haut à droite.*/
}
ISGB 51
Arrière plan, bordure et ombre
ISGB 52
Arrière plan, bordure et ombre
• Epaisseur des bordures
Style des bordures
ISGB 53
Arrière plan, bordure et ombre
ISGB 54
Arrière plan, bordure et ombre
ISGB 55
Arrière plan, bordure et ombre
ISGB 56
Arrière plan, bordure et ombre
• Les ombres sur le texte
ISGB 57
Mise en forme des Tableaux
ISGB 58
Mise en forme des Tableaux
2. Position de la légende
ISGB 59
Le modèle de boîte
• L'élément boîte est une notion importante en CSS. Un tel
élément est appelé aussi conteneur ou un bloc (block).
• Le W3C définit un élément boîte comme une zone rectangulaire
constituée :
un contenu,
une marge intérieure (padding),
une bordure (border),
une marge extérieure (margin).
ISGB 60
Le modèle de boîte
Exemple:
p {width: 200px;
border: 10px solid rgb(125,165,205);
padding: 20px;
margin: 20px;
background-color: rgb(215,230,245);}
ISGB 61
Le modèle de boîte
ISGB 62
Le modèle de boîte
ISGB 63
Le modèle de boîte
ISGB 64
Le modèle de boîte
ISGB 65
Le modèle de boîte
Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
.bloc { border: 1px solid black;
margin: 20px 20px20px20px; text-align:
center;}
</style>
</head>
<body>
<div class="bloc"> marge
extérieure
</div>
</body>
</html>
ISGB 66
Le modèle de boîte
ISGB 67
Le modèle de boîte
Propriétés de marge interne:
padding-top, padding-right, padding-bottom et padding-left
ISGB 68
Le modèle de boîte
Exemple
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style
type="text/CSS">img{float:right;}
</head>
<body>
….
</div>
</body>
ISGB 69
</html>
Ordre d'interprétation des styles en cascade
ISGB 70
Ordre d'interprétation des styles en cascade
Priorité des styles:
ISGB 71
Priorité de style
ISGB 72
