CSS 2 – Pratique du design web
© Groupe Eyrolles, 2005
X
Les principales balises HTML standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Les principales balises en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Séparer le contenu de la mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
La structuration logique des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Le principe des feuilles de styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Mise en situation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
DEUXIÈME PARTIE
Les feuilles de styles CSS ............................................ 37
CHAPITRE 3
Introduction aux feuilles de styles CSS ..................................... 39
Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
La syntaxe de base des CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Appliquer les styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Insérer des styles dans l’en-tête du document . . . . . . . . . . . . . . . . . . . . . . . . . 42
Lier les styles à partir d’une feuille séparée . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Liaison par la balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Utiliser la règle @import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
MÉTHODE link ou @import ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Incorporer les styles dans la balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Les sélecteurs de styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Les balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Les classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Les identificateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Les pseudo-classes et les pseudo-éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Syntaxes de regroupements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Regroupement des sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Regroupement des propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Les sélecteurs et l’arborescence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Simplifier grâce à la hiérarchie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Autres sélecteurs hiérarchiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
CARICATURE Maladies exotiques des CSS ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Mise en situation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
CHAPITRE 4
Gestion de la couleur en CSS ...................................................... 59
Harmonie des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
La couleur et le thème du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
© Groupe Eyrolles, 2005
X
Les principales balises HTML standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Les principales balises en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Séparer le contenu de la mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
La structuration logique des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Le principe des feuilles de styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Mise en situation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
DEUXIÈME PARTIE
Les feuilles de styles CSS ............................................ 37
CHAPITRE 3
Introduction aux feuilles de styles CSS ..................................... 39
Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
La syntaxe de base des CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Appliquer les styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Insérer des styles dans l’en-tête du document . . . . . . . . . . . . . . . . . . . . . . . . . 42
Lier les styles à partir d’une feuille séparée . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Liaison par la balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Utiliser la règle @import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
MÉTHODE link ou @import ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Incorporer les styles dans la balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Les sélecteurs de styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Les balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Les classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Les identificateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Les pseudo-classes et les pseudo-éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Syntaxes de regroupements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Regroupement des sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Regroupement des propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Les sélecteurs et l’arborescence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Simplifier grâce à la hiérarchie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Autres sélecteurs hiérarchiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
CARICATURE Maladies exotiques des CSS ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Mise en situation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
CHAPITRE 4
Gestion de la couleur en CSS ...................................................... 59
Harmonie des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
La couleur et le thème du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60