Table des matières

CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
Utiliser les Cascading Style Sheets
1. Les objectifs du livre
13
2. L'évolution des CSS
14
2.1 Les modules CSS3
2.2 Les étapes dans la conception des CSS3
14
15
3. Les préfixes des navigateurs
19
4. Le site Can I use
21
5. Les propriétés CSS
23
6. La structure du livre
24
7. Les exemples à télécharger
26
Créer des feuilles de style CSS
1. L'objectif
27
2. La syntaxe
27
2.1 Les principes
2.2 Un exemple simple
2.3 Les règles d'écriture
2.4 Les règles de nommage
27
28
28
29
3. Où créer la feuille de style ?
29
3.1 Les différentes possibilités
3.2 Dans l'élément HTML
www.editions-eni.fr
29
29
© Editions ENI
1/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
3.3 Dans la page HTML
3.4 Dans un fichier CSS
3.5 La liaison avec <link>
3.6 La liaison avec @import
3.7 Création, liaisons et importations multiples de règles CSS
30
31
31
32
33
4. Les commentaires
34
5. Les sélecteurs
35
5.1 L'utilisation des sélecteurs
5.2 Le sélecteur universel
5.3 Les sélecteurs de type
5.4 Les sélecteurs d'attribut
5.5 Les sélecteurs d'identification
5.6 Les sélecteurs de classe
5.7 Les pseudo-classes dynamiques de lien
5.8 Les pseudo-classes dynamiques d'action
5.9 La pseudo-classe de cible
5.10 La pseudo-classe de langue
5.11 Les pseudo-classes d'état
5.12 La pseudo-classe de la racine
5.13 Les pseudo-classes de premier et dernier enfant
5.14 La pseudo-classe des premiers enfants
5.15 La pseudo-classe des derniers enfants
5.16 Les pseudo-classes du premier et du dernier enfant d'un type
5.17 Les pseudo-classes des premiers et des derniers enfants d'un type
5.18 La pseudo-classe des éléments sans frère
5.19 La pseudo-classe des éléments sans frère d'un type
5.20 La pseudo-classe des éléments vides
5.21 La pseudo-classe de négation
5.22 Les pseudo-éléments
6. Les combinaisons de sélecteurs
63
6.1 L'utilisation des combinaisons
6.2 Les sélecteurs descendants
www.editions-eni.fr
35
36
36
37
39
40
42
43
44
47
47
51
51
52
54
55
55
56
57
58
60
61
63
63
© Editions ENI
2/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
6.3 Le sélecteur d'enfants
6.4 Le sélecteur d'enfants adjacents
6.5 Le sélecteur d'enfant général
6.6 Les groupes de sélecteurs
64
65
66
67
7. L'héritage dans l'imbrication des éléments
68
8. La cascade dans l'application des propriétés
70
8.1 L'utilisation de la cascade
8.2 L'ordre de la cascade
8.3 Deuxième niveau : la règle d'importance
8.4 Troisième niveau : la spécificité des sélecteurs
8.5 Quatrième niveau : la proximité des sélecteurs
9. Les unités utilisées dans les CSS
70
71
72
73
74
75
9.1 L'utilisation des unités
9.2 Les unités numériques
9.3 Les unités de mesure absolues
9.4 Les unités de mesure relatives
9.5 D'autres unités
75
75
75
76
77
10. Les couleurs
77
10.1 L'utilisation des couleurs
10.2 La notation nominale
10.3 La notation hexadécimale
10.4 La notation RGB
10.5 La notation HSL
77
77
78
78
78
11. Les adresses Internet
79
Les polices
1. L'objectif
www.editions-eni.fr
81
© Editions ENI
3/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
2. L'application des polices de caractères
81
3. Les polices locales
82
4. Les polices embarquées
83
4.1 Les formats des polices
4.2 La règle @font-face
4.3 Le nom des polices
4.4 Les polices embarquées locales
4.5 Indiquer plusieurs formats
4.6 Les styles typographiques
83
85
86
87
87
88
5. Les polices en ligne
88
5.1 Les Google Fonts
88
6. La graisse des caractères
93
7. La largeur des caractères
95
8. Le style des caractères
95
9. La taille des caractères
96
10. Ajuster la taille des caractères
97
11. Les petites capitales
98
12. La propriété générique
99
13. La couleur des caractères
www.editions-eni.fr
101
© Editions ENI
4/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
14. Les décalages des caractères
102
15. D'autres propriétés à venir
103
Le texte
1. L'objectif
105
2. Les modes d'écriture
105
3. L'espacement entre les lettres
106
4. L'espacement entre les mots
107
5. La décoration
109
5.1 La propriété CSS 2.1
5.2 Les propriétés CSS 3
5.3 L'ombre portée
109
110
111
6. La casse du texte
112
7. L'alignement du texte
114
8. Le retrait de première ligne
114
9. L'interligne
116
10. Les espaces blancs
118
11. Les tabulations
120
www.editions-eni.fr
© Editions ENI
5/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
12. Les ruptures et la césure
121
12.1 Les ruptures de lignes
12.2 Les ruptures de mots
121
121
13. La césure
124
13.1 Définir les césures
13.2 Les exceptions de césure
124
126
14. Le contenu généré
129
14.1 Le contenu textuel avant et après
14.2 Les compteurs
14.3 Les CSS3
15. Le débordement du texte
129
130
133
134
Les listes
1. L'objectif
137
2. Les styles des marques
137
3. Les marques avec des images
139
4. La position des marques
140
5. La syntaxe courte
142
6. Les CCS3
143
Les tableaux et les formulaires
www.editions-eni.fr
© Editions ENI
6/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
1. L'objectif
145
2. Les tableaux
146
2.1 La largeur des tableaux
2.2 Les bordures des tableaux
2.3 L'espace entre les cellules
2.4 La gestion des cellules vides
146
147
149
151
3. Les formulaires
153
3.1 La mise en forme
3.2 Redimensionner un champ
3.3 Des pseudo-classes pour les formulaires
3.4 Les champs requis et optionnels
3.5 La mise en forme du focus
3.6 La validation des saisies
153
153
155
158
159
160
L'interface utilisateur
1. L'objectif
165
2. Les contours dynamiques
165
3. Les curseurs
168
4. Les propriétés à risques
171
Les boîtes
1. L'objectif
www.editions-eni.fr
173
© Editions ENI
7/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
2. Le modèle des boîtes
174
2.1 La structure des boîtes
2.2 Les différents types d'affichage
2.3 La propriété d'affichage des boîtes
174
174
177
3. L'affichage de la boîte
178
4. Les largeur et hauteur de la boîte
179
4.1 Les largeur et hauteur standards
4.2 Spécifier le calcul de la largeur
179
181
5. Le remplissage interne
184
6. Les marges externes
187
6.1 Les propriétés
6.2 La fusion des marges
6.3 Un exemple de marges fixes
6.4 Un exemple de marges en auto
187
188
188
189
7. Le débordement du contenu
190
8. Les bordures
193
8.1 Les propriétés
8.2 Les styles de la bordure
8.3 L'épaisseur de la bordure
8.4 La couleur de la bordure
8.5 La propriété générique des bordures
8.6 Les bordures fantaisistes
9. Les coins arrondis
199
9.1 Les coins avec des cercles
9.2 Les coins avec des ellipses
www.editions-eni.fr
193
193
194
195
195
197
199
201
© Editions ENI
8/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
10. Les arrière-plans
10.1
10.2
10.3
10.4
202
Les couleurs d'arrière-plan
Les dégradés d'arrière-plan
Les images d'arrière-plan
Les autres propriétés d’arrière-plan
202
203
205
207
11. Les ombres portées
208
12. Le positionnement des boîtes
211
13. Les boîtes flottantes
211
13.1 La propriété de flottement
13.2 Un exemple simple de flottement
13.3 Un exemple plus élaboré de flottement
13.4 Interdire le flottement
14. Les boîtes positionnées
211
212
213
214
216
14.1 La propriété de positionnement
14.2 La position relative
14.3 La position fixe
14.4 La position absolue
216
217
218
220
Le Responsive Web Design
1. L'objectif
223
2. Les requêtes de média
223
2.1 La recommandation du W3C
2.2 Les critères des requêtes de média
2.3 La syntaxe des requêtes de média
2.4 Les valeurs minimales et maximales
2.5 Les opérateurs logiques
www.editions-eni.fr
© Editions ENI
223
224
225
225
226
9/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
3. La taille des écrans
227
3.1 La taille physique et l'affichage
3.2 Les zooms à l’écran
3.3 Deux sites de référence pour la taille des écrans
4. Un exemple d’un site simple
227
228
229
230
4.1 La structure du site
4.2 Réaliser un design adaptatif simple
4.3 Les affichages
5. Des images adaptatives
230
236
239
242
Les modules CSS3 de mise en page
1. L'objectif
247
2. Le module Multi-column Layout
248
2.1 L'objectif du module
2.2 La mise en place des colonnes
2.3 La mise en place des gouttières
2.4 La mise en place des sauts de colonnes
2.5 La répartition sur plusieurs colonnes
3. Le module Flexible Box Layout
256
3.1 L'objectif du module
3.2 Les boîtes flexibles
3.3 L'orientation et le sens des boîtes
3.4 Le débordement des boîtes
3.5 L'alignement horizontal des boîtes
3.6 L'alignement vertical des boîtes
3.7 Les propriétés de flexibilité
www.editions-eni.fr
248
249
251
253
254
© Editions ENI
256
257
258
259
261
264
266
10/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
4. Le module Shapes
268
4.1 L'objectif du module
4.2 L'habillage par une forme
268
269
5. Le module Masking
271
5.1 L'objectif du module
5.2 Masquer une partie de l'image
271
272
Les modules CSS3 en travaux
1. L'objectif
275
2. Le module Animations
275
2.1 L'objectif du module
2.2 La construction des animations
2.3 Animer une forme
275
276
277
3. Le module Transforms
280
3.1 L'objectif du module
3.2 Des exemples de transformation
3.3 Un exemple de galerie de Polaroid
4. Le module Transitions
280
281
283
287
4.1 L'objectif du module
4.2 Mettre en place les transitions
4.3 Un exemple d’un menu interactif
287
288
290
Des exemples de mise en page
1. L'objectif
www.editions-eni.fr
293
© Editions ENI
11/12
CSS3
Adoptez les feuilles de style pour maîtriser les standards du web
2. La mise en page en boîtes flottantes
293
2.1 L'objectif
2.2 Le conteneur général
2.3 L'en-tête
2.4 Le logo, le slogan et le champ de recherche
2.5 La navigation
2.6 La zone centrale
2.7 Le pied de page
2.8 Le code complet de cet exemple
2.9 Les inconvénients
3. La mise en page en tableau
308
3.1 L'objectif
3.2 La structure du tableau
3.3 Les cellules du tableau
3.4 Les contenus du tableau
3.5 L'affichage et les avantages
308
309
310
311
315
4. La mise en page adaptative
316
4.1 L'objectif
4.2 Installer le framework
4.3 La grille de Kube
4.4 La grille de notre exemple
4.5 Les sélecteurs universels
4.6 Les sélecteurs des lignes
4.7 Les sélecteurs des blocs
4.8 L'adaptation aux petits écrans
316
317
317
319
322
322
322
323
Index
www.editions-eni.fr
293
294
295
296
300
301
304
305
308
327
© Editions ENI
12/12