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