CSS 2

Table des matières......Page 10
Avant-propos......Page 20
Première partie-Standards HTML et XHTML : quelle différence ?......Page 28
1-Le W3C et les standards du Web......Page 30
Ce qui fait tourner le Web en coulisses : les standards......Page 31
Les navigateurs parlent la même langue......Page 32
Pour un Web accessible à tous......Page 34
En résumé : avantages des standards et d’une sémantique sur le Web......Page 38
HTML ou XHTML ?......Page 40
Indiquer la grammaire au navigateur......Page 41
Indiquer la langue et l’encodage du document : lang et charset......Page 43
Valider son site avec le W3C......Page 44
Testez vos connaissances......Page 47
2-Séparer le fond et la forme avec HTML et CSS......Page 50
La base du HTML : les balises......Page 51
L’imbrication des éléments......Page 52
La structure des éléments......Page 53
Quelques exemples pratiques......Page 54
Contenus autorisés selon les types de balises......Page 55
Les éléments de type bloc......Page 56
Les principales balises en ligne......Page 57
Le principe des feuilles de styles......Page 60
Mise en situation......Page 62
Deuxième partie-Les feuilles de styles CSS......Page 66
Présentation......Page 68
La syntaxe de base des CSS......Page 70
Liaison par la balise ......Page 71
Utiliser la règle @import......Page 72
Incorporer les styles dans la balise......Page 74
Les classes......Page 75
Les pseudo-classes et les pseudo-éléments......Page 77
Regroupement des propriétés......Page 79
Les sélecteurs et l’arborescence......Page 80
Simplifier grâce à la hiérarchie......Page 81
Autres sélecteurs hiérarchiques......Page 82
Mise en situation......Page 86
4-Gestion de la couleur en CSS......Page 88
La couleur et le thème du site......Page 89
Influence du public ciblé......Page 90
La symbolique des couleurs......Page 92
L’espace de couleurs RGB......Page 93
La notation hexadécimale......Page 94
Les mots-clés de couleurs......Page 95
Quelques ressources sur le Web......Page 96
Application pratique......Page 97
Les polices de caractères......Page 100
Les polices standards......Page 101
Déclarer la police en CSS......Page 102
Affichage des polices exotiques......Page 103
Les unités de taille de polices......Page 105
Les unités de taille relative et pourcentages......Page 106
Permettre l’agrandissement des polices......Page 107
Définir et modifier la couleur de police......Page 108
Caractères soulignés, surlignés, barrés, clignotants......Page 109
La casse : minuscules et majuscules......Page 110
Interlignage de texte......Page 111
Définir la justification du texte......Page 112
La notation raccourcie......Page 113
Application pratique......Page 114
Les différents styles de bordures......Page 116
La couleur des bordures......Page 118
Supprimer la bordure d’une image......Page 119
Afficher un trait vertical......Page 120
Image de contenu ou image d’arrière-plan ?......Page 121
Insérer une image d’arrière-plan......Page 122
Positionner l’image à sa convenance......Page 123
Répéter l’image ou non......Page 124
Notation raccourcie......Page 125
Application pratique......Page 126
Introduction au positionnement en CSS......Page 128
Comprendre le modèle de boîte......Page 129
Différents modèles de boîtes......Page 130
Éléments ancêtres, parents, enfants et frères......Page 133
Comprendre la notion de flux du document......Page 134
Positionner dans le flux courant......Page 135
Le positionnement relatif......Page 138
Les positionnements absolu et fixe......Page 139
Le positionnement absolu......Page 140
Le positionnement fixe......Page 142
La profondeur : z-index......Page 143
Le positionnement flottant......Page 145
Quand positionner en relatif ?......Page 150
Quand positionner en flottant ?......Page 151
Application pratique......Page 152
Troisième partie-Travaux pratiques......Page 154
Centrage des éléments de contenu......Page 156
Centrage horizontal des éléments de contenu......Page 157
La méthode line-height......Page 158
Centrage dans le flux courant......Page 159
Centrage en positionnement absolu......Page 162
Centrage vertical des conteneurs......Page 163
Application pratique......Page 164
Principe et utilité......Page 166
Application à un ensemble d’images......Page 167
L’affichage hors de la zone de visualisation......Page 168
Accessibilité de ces techniques......Page 170
Application pratique......Page 171
Méthode standard : le pseudo-élément :first-letter......Page 172
Variante pour anciens navigateurs......Page 175
Application pratique......Page 178
Les comportements dynamiques en CSS......Page 180
Première application pratique......Page 181
Commenter le survol des menus......Page 184
Des infobulles personnalisées......Page 186
Légender le survol de photos......Page 187
Application pratique......Page 189
Les différents systèmes de navigation......Page 190
Utilisation de listes non ordonnées......Page 191
Créer un menu vertical......Page 192
Créer un menu sous forme de boutons......Page 195
Produire un effet de relief sur les boutons......Page 197
Créer un menu horizontal......Page 199
Alignement avec la propriété display......Page 200
Alignement avec la propriété float......Page 201
Puces graphiques personnalisées......Page 202
Recourir aux images d’arrière-plan......Page 203
Pour aller plus loin......Page 204
Application pratique......Page 205
Une image réactive : première méthode......Page 208
Accessibilité de cette technique......Page 209
Temps de latence et préchargement......Page 211
Une image réactive : seconde méthode......Page 212
Application à un menu graphique......Page 214
Application pratique......Page 219
Principe et méthodologie......Page 220
Cadre de largeur fixe......Page 221
Variante : habillage d’un menu......Page 223
Variante : emploi des pseudo-éléments before et after......Page 224
Cadre élastique dans les deux dimensions......Page 226
Application pratique......Page 229
Quatrième partie-Mise en œuvre dans un projet professionnel......Page 230
Un site compatible avec tous les navigateurs......Page 232
Un travail en trois étapes et tester sous tous les navigateurs......Page 233
Masquer les éléments un par un......Page 234
Internet Explorer et le Haslayout......Page 235
Les commentaires conditionnels......Page 236
Mise en page de base ou gabarit......Page 238
Présentation du projet professionnel......Page 239
Un astucieux décor......Page 242
Structure du document......Page 243
Structure de l’en-tête......Page 244
Style du conteneur général......Page 245
Style du titre général......Page 246
Style du slogan......Page 247
Les moyens de navigation......Page 248
Un fil d’Ariane......Page 249
Les liens internes, les ancres......Page 250
Réalisation pratique......Page 251
Le menu horizontal......Page 252
Le menu vertical......Page 253
Le formulaire de recherche......Page 256
Structure générale du contenu......Page 258
Encart des événements récents......Page 260
Bilan sur les codes utilisés......Page 263
Insérer du contenu dynamiquement......Page 270
Proposer des styles alternatifs......Page 271
Proposer une version imprimable......Page 272
Internet Explorer 7 et les CSS......Page 273
Internet Explorer 8 et les CSS......Page 274
Safari, Opéra et les autres ?......Page 275
Conclusion......Page 276
Annexes-Sites et ressources......Page 278
A-Liste des propriétés CSS......Page 280
B-Exemples de gabarits......Page 294
Gabarit à deux colonnes et de largeur fixe......Page 295
Gabarit à deux colonnes et de largeur adaptable......Page 298
Gabarit à trois colonnes et de largeur fixe......Page 300
Sites en français......Page 304
Sites en anglais......Page 306
Blogs, carnets et magazines web......Page 307
Galerie de sites en CSS......Page 309
Sites en français......Page 312
Sites en anglais......Page 314
Livres en français......Page 318
Livres en anglais......Page 319
Interprétation des tableaux......Page 320
Version détaillée......Page 321
HTML......Page 322
CSS......Page 325
DOM......Page 331
Divers......Page 335
Bilan......Page 337
Autres navigateurs......Page 338
Mentions légales......Page 339
B......Page 340
E......Page 341
M......Page 342
P......Page 343
U......Page 344
Z......Page 345