[EYROLLES] Premiers pas en CSS et XHTML

Codeéditeur:G12390 ISBN:978-2-212-12390-6 15 € Choisissez la simplicité et l’élégance du couple XHTML et CSS pour créer vos sites web avec style et pa...

19 downloads 875 Views 6MB Size

Cette deuxième édition tient compte de l’évolution des standards et des navigateurs. Elle rappelle l’emploi des balises XHTML et l’insertion de vidéos et d’animations Flash. En annexes : Codage des principales couleurs • Spécificités des navigateurs Mozilla Firefox, Internet Explorer, Opéra • Aide-mémoire des principales propriétés CSS.

Illustration Ayo (Alexis Younes, www.73lab.com)

Conception : Nord Compo

pour créer vos sites web avec style et panache ! § Séparez mise en forme CSS et contenu XHTML pour plus de simplicité et de souplesse ; § Changez sans peine la charte graphique de votre site ; § Apprenez à écrire une feuille de style CSS pour une présentation homogène ; § Comprenez la hiérarchie des éléments et des balises ; § Enrichissez votre texte : taille, couleur, police, interligne... ; § Embellissez vos tableaux : bordures, marges et arrière-plans ; § Positionnez vos paragraphes, images et autres éléments blocs : centrés, justifiés, flottants... ;

9 782212 123906

Francis Draillard est ingénieur EFREI et a travaillé dans l’industrie, la recherche, puis dans l’enseignement supérieur et la formation continue. Il enseigne en tant que professeur associé à l’EIGSI et Sup de Co La Rochelle. Concepteur web indépendant, il exerce une activité de conseil en entreprise et contribue au site collaboratif Framasoft dédié aux logiciels libres sous Windows, Linux et Mac OS X.

Choisissez la simplicité et l’élégance du couple XHTML et CSS

Code éditeur : G12390

L’auteur

XHTML

ISBN : 978-2-212-12390-6

L’informatique libre à la portée de tous !

et

15 €

§

CSS

§

Premiers pas en

Francis Draillard

Page 1

Francis Draillard

9:53

2e éd.

10/09/08

CSS et XHTML

12390_CSS_HTML_2

Premiers pas en et

CSS XHTML e

2 on

éditi

Premiers pas en et

CSS XHTML � 2eédition

Collection « Accès libre » Pour que l’informatique soit un outil, pas un ennemi ! Réussir son site web avec XHTML et CSS. M. Nebra. N°12307, 2e édition, 2008, 306 pages.

Gimp 2.4 efficace. Dessin et retouche photo. C. Gémy. N°12152, 2008, 402 pages avec CD-Rom.

Ergonomie web. Pour des sites web efficaces. A. Boucher. N°12158, 2007, 426 pages.

La 3D libre avec Blender. O. Saraja. N°12196, 2e édition, 2007, 420 pages avec CD-Rom.

Réussir un site web d’association… avec des outils libres ! A.-L. Quatravaux et D. Quatravaux. N°12000, 2e édition, 2007, 372 pages.

Mise en page avec OpenOffice.org Writer. I. Barzilai. N°12149, 2007, 338 pages.

Réussir un projet de site web. N. Chu. N°11974, 4e édition, 2006, 230 pages.

OpenOffice.org 2.2 efficace. S. Gautier, C. Hardy, F. Labbe, M. Pinquier. N°12166, 2007, 420 pages avec CD-Rom.

Réussir son site e-commerce avec osCommerce. D. Mercer. N°11932, 2007, 446 pages.

Ubuntu efficace. L. Dricot, avec la contribution de R. Mas. N°12003, 2e édition, 2006, 360 pages avec CD-Rom.

Scenari – La chaîne éditoriale libre. S. Crozat. N°12150, 2007, 200 pages.

PGP/GPG – Assurer la confidentialité de ses mails et fichiers. M. Lucas, ad. par D. Garance , contrib. J.-M. Thomas. N°12001, 2006, 248 pages.

Tiny ERP/Open ERP. Pour une gestion d’entreprise efficace et intégrée. F. Pinckaers et G. Gardiner. N°12261, 2008, 287 pages.

Monter son serveur de mails sous Linux M. Bäck et al., adapté par P. Tonnerre. N°11931, 2006, 360 pages.

Collection « Poche Accès libre » Gimp 2.4. Débuter en retouche photo et graphisme libre. D. Robert. N°12295, 2e édition, 2008, 300 pages environ.

Mozilla Thunderbird. Le mail sûr et sans spam. D. Garance, A.-L. et D. Quatravaux. N°11609, 2005, 300 pages avec CD-Rom.

SPIP 1.9. Créer son site avec des outils libres. M.-M. Maudet. A.-L. Quatravaux, D. Quatravaux., avec la contribution de Perline. N°12002, 2007, 376 pages.

Firefox. Retrouvez votre efficacité sur le Web ! T. Trubacz, préface de T. Nitot. N°11604, 2005, 250 pages.

OpenOffice.org 2 Writer. S. Gautier, avec la contribution de G. Veyssière. N°11668, 2005, 248 pages.

OpenOffice.org 2 Calc. S. Gautier, avec la contribution de J.-M. Thomas. N°11667, 2006, 220 pages.

Chez le même éditeur É. Sloïm. – Sites web. Les bonnes pratiques. N°12101, 2007, 14 pages. C. Porteneuve, préface de T. Nitot. – Bien développer pour le Web 2.0 – Bonnes pratiques Ajax. N°12028, 2007, 580 pages. R. Goetter. – CSS 2 : pratique du design web . N°11976, 2e édition, 2007, 324 pages. R. Goetter. – Mémento CSS. N°11726, 2006, 14 pages. R. Goetter. – Mémento XHTML. N°11955, 2006, 14 pages. A. Andrieu. – Réussir son référencement web. N°12264, 2008, 302 pages. J.-M. Defrance. – Premières applications Web 2.0 avec Ajax et PHP. N°12090, 2008, 450 pages. A. Clarke. – Transcender CSS. Sublimez le design web ! N°12107, 2007, 370 pages. G. Davis. – 500 grilles et feuilles de styles pour l’imprimé et le Web. N°12267, 2008, 160 pages avec CD-Rom. D. Tardiveau. – 150 scripts pour Flash CS3. N°12112, 2007, 520 pages. Laboratoire SUPINFO des technologies Apple. – Mac OS X Leopard. N°12272, à paraître, 2008. G. Gete. – Mémento Mac OS X. N°11935, 2006, 14 pages. I. Hurbain, E. Dreyfus. – Mémento Unix/Linux. N°11954, 2006, 14 pages. R. Hertzog, R. Mas. – Debian Etch. Gnu/Linux. N°12062, 2007, 428 pages avec DVD. É. Daspet et C. Pierre de Geyer. – PHP5 avancé. N°12167, 4e édition, 2007, 792 pages. C. Pierre de Geyer et G. Ponçon. – Mémento PHP et SQL. N°11785, 2006, 14 pages. R. Rimelé. – Mémento MySQL. N°12012, 2007, 14 pages.

Francis Draillard

Premiers pas en et

CSS XHTML � 2eédition

ÉDITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com

Remerciements à Jean-Baka Domelevo-Entfellner

Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet expressément la photocopie à usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui menacée. En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du Droit de Copie, 20, rue des GrandsAugustins, 75006 Paris. © Groupe Eyrolles, 2006, 2008, ISBN : 978-2-212-12390-6

Avant-propos Des pages web ? Oui, mais avec du style ! Si les pages que nous concevons ont belle allure, c’est bien ; mais qu’y a-t-il derrière, comment sont codées ces magnifiques pages ? Sera-t-il facile de changer la charte graphique du site ? Ou de modifier la structure d’une page ? Sera-t-il possible de créer de nouvelles pages en réutilisant le travail de mise en forme déjà effectué ? Bref, à quoi sert d’avoir une voiture rutilante, avec toit ouvrant, jantes alliage, rétroviseurs électriques et tout le tralala, s’il faut démonter le moteur pour faire la vidange ? C’est une comparaison exagérée, certes, mais qui a le mérite de poser clairement le problème. Vous avez donc compris qu’au-delà du résultat affiché d’un site web, il faut penser à sa maintenance : rectifications, mises à jour, changements de mise en page doivent pouvoir s’effectuer facilement. Alors, existe-t-il une technique pour améliorer les pages HTML classiques, souvent pleines à craquer d’attributs de mise en forme et de tableaux pour obtenir du côte à côte ? Bien sûr ! Et vous avez de la chance, c’est justement l’objet de l’ouvrage qui se trouve entre vos mains ! Une méthode moderne, pour créer des sites web de bonne qualité et faciles à maintenir, consiste à écrire les pages en XHTML, langage clair et efficace, en association avec des feuilles de style ou CSS, pour Cascading Style Sheets. Les feuilles de style sont utilisées depuis longtemps dans les traitements de texte. Elles facilitent la mise en forme, tout en rendant plus homogènes les différentes pages d’un long document. En ce qui concerne les pages web, © Groupe Eyrolles, 2005

P O C H E S A C C È S L I B R E - P R E M I E R S P A S A V E C XHTML E T CSS

les premières normes pour les feuilles de style, CSS 1, ont été publiées fin 1996, suivies des normes CSS 2 en 1998. Il a fallu que les logiciels de navigation web les prennent en compte pour que les concepteurs puissent enfin les utiliser, d’où un certain « retard à l’allumage » que nous retrouverons de la même façon avec les normes CSS 3 à venir. Les CSS 2 sont disponibles, profitons-en ! Et découvrons ensemble dans cet ouvrage tout le bénéfice qu’elles nous apportent : une façon différente d’appréhender la conception des pages web. Il suffit de s’y aventurer pour être conquis... Bonne lecture !

Structure de l’ouvrage Le premier chapitre est une introduction qui nous présente le principe général du XHTML, des feuilles de style et d’une bonne écriture XHTML/CSS. Le deuxième chapitre présente de façon concrète les bases du XHTML. À partir d’exemples, il détaille l’utilisation des principales balises XHTML, présente leur classement par types de balise et leur hiérarchie dans une page web. Il fournit les quelques mots de vocabulaire qui seront utilisés par la suite pour expliquer la conception d’une feuille de style. Au troisième chapitre apparaissent les feuilles de style. À partir d’exemples, nous verrons de quelle façon et à quel endroit les écrire, quelles unités de mesure utiliser, etc. Les propriétés CSS sont détaillées dans les quatrième et cinquième chapitres, qui expliquent respectivement les propriétés de mise en forme et celles liées au positionnement des éléments dans la page. Des exemples illustrent chaque propriété, dont toutes les valeurs possibles sont détaillées. Le sixième chapitre nous parle des autres médias pour lesquels des propriétés de style existent et le septième chapitre présente des astuces très pratiques, pour adapter les feuilles de style aux différents navigateurs, en particulier pour remplacer quelques propriétés mal interprétées par la version 6 de Internet Explorer.

VI

© Groupe Eyrolles, 2005

Avant-propos

En annexes se trouvent les noms et codes des couleurs de base, ainsi qu’un tableau de synthèse sur le comportement des principaux navigateurs. Suivent un index des propriétés, en guise de formulaire, puis une liste de références bibliographiques et de sites web utiles. Les fichiers qui servent d’exemples dans le livre peuvent être téléchargés à l’adresse http://www.antevox.fr/livre.

Crédits des photographies et illustrations Tous droits réservés pour toutes les photographies et illustrations publiées dans cet ouvrage. Les crédits qui ne figurent pas dans les légendes des illustrations sont mentionnés ci-après. Pages de garde des chapitres 1 et 5 : extraits du site ZenGarden http://www.csszengarden.com/tr/francais/, respectivement les versions « Tranquille » par Dave Shea (http://www.mezzoblue.com) et « Like the Sea » par Lars Daum (http://www.redrotate.de/). Figures 1-3, 3-4 à 3-11, 6-2, B-1, pages de garde des chapitres 3, 4 et 6, ainsi que des annexes A, C et D : copyright 2006 Francis Draillard, Micro Application et ses concédants. Figures 1-1, 1-2, 2-1 à 2-8, 2-1, 2-12 à 2-16, 3-1, 3-2, 3-12 à 3-14, 4-1 à 4-15, 5-1 à 5-16, 6-1, 7-7 à 7-9, A-1, B-2, B-3, pages de garde du chapitre 7 et de l’annexe B : Francis Draillard. Page de garde du chapitre 2 : dessin d’Alice Draillard. Figure 3-3 : extraite du site http://www.wikipedia.fr, photo d’Éric Pouhier (décembre 2005). Figures 5-9, 5-12 à 5-14, 7-7 et 7-9 : utilisation d’illustrations provenant du site http://www.wikipedia.fr

© Groupe Eyrolles, 2005

VII

P O C H E S A C C È S L I B R E - P R E M I E R S P A S A V E C XHTML E T CSS

Remerciements Je tiens à remercier Muriel Shan Sei Fan, éditrice informatique des Éditions Eyrolles. C’est grâce à elle que la publication de ce livre a été possible et ses conseils m’ont été précieux pour la rédaction finale. Merci aussi à Dimitri Robert : auteur d’un excellent livre sur le logiciel Gimp, dans cette même collection, il m’a aiguillé vers Muriel pour lui proposer mon manuscrit. Merci encore à Eliza Gapenne et Anne Bougnoux pour la relecture de ce livre, à Gaël Thomas et Jean-Marie Thomas pour sa mise en page. Pour cette deuxième édition, je tiens à remercier Jean-Baka Domelevo Entfellner pour la relecture, Muriel Shan Sei Fan et Karine Joly pour leurs conseils et la coordination, Gaël Thomas pour la mise en page. Je remercie beaucoup pour leur contribution : • Alain Beyrand (http://www.pressibus.org) : son classement des couleurs est très intéressant. Il est publié en annexe (mais en moins bien, car sans les couleurs !). • David Hammond (http://nanobox.chipx86.com) : il est l’auteur d’un excellent travail sur le comportement des différents navigateurs web, dont la synthèse est donnée en annexe. • Les auteurs du site http://www.w3.org, source extrêmement riche de renseignements qui explique dans tous leurs détails les normes du World Wide Web Consortium (W3C), ainsi que Jean-Jacques Solari, qui a traduit en français bon nombre de ces documents sur le site http://www.yoyodesign.org. Trois figures sont extraites de ce site, ainsi que les tableaux des propriétés CSS, qui se trouvent en annexe. Je suis reconnaissant également à mes étudiants de l’EIGSI et de Sup de Co La Rochelle. Qu’ils me pardonnent : je me suis servi de leurs erreurs et de leurs difficultés pour rendre ce livre plus clair et plus pédagogique. Enfin, c’est de tout mon cœur que je remercie mon épouse et ma fille, pour leur soutien et leur participation. Francis Draillard [email protected] http://www.antevox.fr VIII

© Groupe Eyrolles, 2005

Table des matières AVANT-PROPOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . V 1. INTRODUCTION AU XHTML ET AUX FEUILLES DE STYLE CSS . . . . . . . . . . . . . . . . . . . . . . . 1 Signification de XHTML et CSS 2 Principes de base pour une page web 2 Choix sensé des balises HTML 3 Adaptation aux navigateurs 3 Accessibilité 4 L’apparence, fonction du thème et du public concerné 4 Polices de caractères 4 En résumé, quelques sentiments liés aux couleurs 5 Homogénéité du site 6 Principes d’une bonne écriture XHTML/CSS : donner du sens au codage 6 Titre de page 6 Mise en gras ou en italique 7 Liste de liens hypertexte (menu) 7 Intérêt des feuilles de style 8

2. L’ESSENTIEL DU XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Rappel sur le principe des balises 12 Du HTML au XHTML 13 Premières règles d’écriture XHTML 14 Règles pour les noms des fichiers 14 Règles d’écriture des balises XHTML 15 Structure d’une page XHTML 16 Espaces, sauts de ligne et commentaires invisibles 17 Principales balises XHTML 18 Un exemple pour commencer 18 Les deux premières balises 20 En-tête 20

© Groupe Eyrolles, 2005

P OCHES AC CÈS LIBRE - PRE M IERS PAS AV EC X H TML ET CS S

Corps de la page 20 Paragraphes et titres 21 Mise en forme commune à une partie du texte 22 Italique et gras 23 Liens hypertextes 23 Listes à puces ou numérotées 27 Tableaux 28 Fusionner des cellules 29 Insertion d’images 31 Dimensionner une image 32 Objets multimédias 33 Animation Flash 33 Vidéo 34 Sauts, lignes et caractères spéciaux 36 Autres balises de texte 37 Autres balises de listes 37 Formulaires 38 Deux catégories d’éléments : blocs et en ligne 38 Éléments en ligne 39 Éléments de type bloc 40 Hiérarchie des éléments : l’héritage 41 Hiérarchie des blocs imbriqués et juxtaposés 41 Termes hiérarchiques utilisés en XHTML/CSS 43 Héritage des propriétés de style 44 Compléments sur les balises d’en-tête 46 Balise DOCTYPE 46 Balise meta et codage en utf-8 47 Autres balises d’en-tête 48 Validation du code XHTML 49

3. ÉCRITURE DES FEUILLES DE STYLE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Définition d’une règle de style 52 Principe 52 Exemple de règle de style 52 Commentaires 53 Emplacement des styles 53 Feuille de style interne 54 Feuille de style externe 54 Styles en ligne 56 Sélecteurs de style 57 Comme au théâtre 57

X

© Groupe Eyrolles, 2005

Table des matières

Sélecteur simple 58 Classe 59 Une catégorie de balises 59 Une même classe pour plusieurs types de balises 60 Identifiant 61 Identifiant sans nom de balise 62 Différence entre classe et identifiant 63 Pseudo-classes 63 Pseudo-classes pour les liens hypertexte 64 Autres pseudo-classes 65 Pseudo-éléments 65 Règle associée à plusieurs sélecteurs 66 Regroupement de propriétés à l’aide de « raccourcis » 67 Hiérarchie des sélecteurs 67 Hiérarchie précise des sélecteurs 68 Imbrication directe 68 Juxtaposition 68 Sélecteur d’attribut [...] 68 Sélecteur universel * 69 Ordre de priorité des styles 70 Règle de style prioritaire 70 Degré de priorité d’une règle de style 71 Application 72 Valeurs, tailles et couleurs 73 Héritage de propriété 73 Unités de taille 73 Unités de taille fixe 73 Unités de taille relatives (conseillées) 74 Tailles définies par mots-clés 74 Codage des couleurs 75 Noms de couleurs 75 Code RVB 75 Couleurs « sûres » 75 Exemple de page avec feuille de style interne 76

4. PROPRIÉTÉS DE MISE EN FORME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Mise en forme des caractères 82 Choix des polices 82 Taille de police 83 Couleur du texte 84 Texte en gras 85 Italique 86

© Groupe Eyrolles, 2005

XI

P OCHES AC CÈS LIBRE - PRE M IERS PAS AV EC X H TML ET CS S

Soulignement et autres « décorations » 86 Majuscules et minuscules 87 Petites majuscules 88 Surlignage de lettres 88 Décalage vers le haut ou le bas 89 Raccourci pour la mise en forme de caractères 90 Paragraphes et blocs de texte 91 Alignement horizontal du texte 91 Retrait de première ligne 92 Interligne minimum 93 Espacement entre les lettres 94 Espacement entre les mots 94 Conservation des espaces et sauts de ligne saisis 95 Modification du curseur de la souris 96 Affichage automatique d’un contenu 96 Guillemets à utiliser 97 Réinitialisation d’un compteur 98 Incrémentation d’un compteur 99 Sens de l’écriture 99 Écriture bidirectionnelle 100 Bordures 101 Style de bordure 101 Styles de bordure pour chaque côté 102 Épaisseur de bordure 103 Épaisseur de bordure pour chaque côté 103 Couleur de bordure 104 Couleur de bordure pour chaque côté 104 Raccourci pour toutes les propriétés de bordure 105 Raccourci des propriétés de bordure pour chaque côté 106 Contour superposé à un élément 106 Images et couleurs d’arrière-plan 107 Couleur d’arrière-plan 107 Image d’arrière-plan 107 Répétition ou non de l’image d’arrière-plan 108 Alignement de l’image d’arrière-plan 109 Fixation de l’image d’arrière-plan 110 Raccourcis pour les arrière-plans 111 Listes à puces ou numérotées 111 Type de puce ou de numérotation 111 Utilisation d’une image comme puce 112 Position de la puce 113 Raccourci pour toutes les propriétés de liste 114

XII

© Groupe Eyrolles, 2005

Table des matières

Les tableaux 114 Largeur fixe ou variable des colonnes ou du tableau 114 Recouvrement des bordures 115 Espacement entre les bordures de cellules 116 Contour des cellules vides 117 Position du titre du tableau 118 Alignement sur la virgule 119 Alignement vertical des cellules 119

5. POSITIONNEMENT DES BLOCS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Marges et dimensions d’un bloc 124 Marges externes autour d’un bloc 124 Raccourci pour les marges externes 125 Marges internes d’un bloc 126 Raccourci pour les marges internes 127 Largeur fixe pour un bloc ou une image 127 Hauteur fixe pour un bloc ou une image 128 Largeur et hauteur totales d’un bloc 128 Problèmes de marges avec Internet Explorer 6 130 Largeur ou hauteur minimum 132 Largeur ou hauteur maximum 133 Position des éléments 134 Flux normal des éléments 134 Principe du positionnement des blocs 134 Types de position possibles 135 Position normale 135 Position relative, absolue ou fixe 135 Position flottante 136 Utilisation des différents types de positionnement 136 Élément dans le flux (position normale) 137 Position relative 138 Position absolue 138 Position fixe 138 Élément flottant 139 Type de positionnement d’un bloc 139 Décalages indiquant la position d’un bloc 140 Niveau d’empilement des blocs 140 Transformation en bloc flottant 142 Pas d’éléments flottants sur le côté 142 Affichage ou non d’un élément 143 Affichage des débordements 143 Zone visible d’une boîte 144 Changement de type d’élément 144

© Groupe Eyrolles, 2005

XIII

P OCHES AC CÈS LIBRE - PRE M IERS PAS AV EC X H TML ET CS S

Délimitation des blocs 146 Exemples de positionnement 147 Image du haut (nuages) 149 Image de l’arbre en position absolue 150 Sous-titre « En images » en position relative 151 Centrage horizontal du titre 151 Titre latéral fixé sur l’écran 152 Position absolue pour la galerie d’images 153 Images côte à côte en position flottante 154 Centrage d’éléments à l’intérieur des blocs 155 Centrage horizontal 155 Centrage horizontal d’éléments en ligne 155 Centrage horizontal de blocs 156 Centrage vertical 156 Centrage vertical d’éléments en ligne 156 Centrage vertical de blocs 157 Exemple de centrage vertical 158

6. DIFFÉRENTS TYPES DE MÉDIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Types de média 162 Média paginé : styles pour l’impression 163 Gestion des veuves 164 Gestion des orphelines 165 Saut de page avant 165 Saut de page après 166 Coupure par un saut de page 166 Dimensions d’une page 167 Sélecteur de page 167 Référence à un type de page 168 Média sonore : fonctions audio 169

7. RÈGLES SPÉCIFIQUES À CERTAINS NAVIGATEURS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Test des pages sur plusieurs navigateurs 174 Adaptation du code aux navigateurs 177 Balises XHTML conditionnelles 178 Règles de style en fonction des navigateurs 180 Règles de style pour Internet Explorer 6 et versions antérieures 180 Règles de style pour Internet Explorer 7 seul 181 Propriétés de style pour IE 6 ou 7 182 Règles pour navigateurs modernes 183 Styles pour les navigateurs modernes et IE 7 183 Styles pour les navigateurs modernes sans IE 7 184

XIV

© Groupe Eyrolles, 2005

Table des matières

Marges par défaut 185 Règles spécifiques à Internet Explorer 185 Projet IE 7 185 Largeur ou hauteur minimum 187 Position fixe 187 Technique de rattrapage de position 187 Stabilisation de l’affichage 188 Espace vertical sous une image 189 Transparence des images PNG 190 Affichage d’une image PNG transparente avec Internet Explorer 6 190 Affichage d’une image PNG transparente sur tous les navigateurs 191 Dimensions d’affichage modifiées 192

A. COULEURS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Les 16 couleurs de base 196 Couleurs sûres 197 Liste de toutes les couleurs nommées 198

B. COMPORTEMENT DES PRINCIPAUX NAVIGATEURS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207 Compréhension des balises HTML-XHTML 209 Interprétation des propriétés CSS 2.1 212 Unités 213 Paramètre !important 213 Médias 213 Sélecteurs 214 Pseudo-classes 214 Pseudo-éléments 215 Propriétés 215 Paramètres d’impression 219

C. RÉSUMÉ DES PROPRIÉTÉS CSS 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Propriétés CSS 2 222 Propriétés d’affichage 223 Média paginé 238 Média sonore 239 Propriétés classées par catégories 242

D. RÉFÉRENCES BIBLIOGRAPHIQUES ET SITES WEB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247 Bibliographie 248 Sites web utiles 248

INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 © Groupe Eyrolles, 2005

XV

chapitre

1

© Groupe Eyrolles, 2005

Introduction au XHTML et aux feuilles de style CSS

Que signifient XHTML et CSS ? Quels avantages nous apportent les feuilles de style ? Comment se partagent-elles le « travail » de mise en page avec le code XHTML ?

Sommaire B B B B

Signification de XHTML et CSS Principes de base pour une page web Principes d’une bonne écriture XHTML/CSS Intérêt des feuilles de style

© Groupe Eyrolles, 2005

P O C H E S A C C È S L I B R E - P R E M I E R S P A S A V E C XHTML E T CSS

Cette introduction nous emmène à la découverte de quelques notions fondamentales à propos du XHTML et des feuilles de style CSS. Ce sera aussi l’occasion, à partir d’exemples, de poser les principes d’une bonne écriture des pages web.

Signification de XHTML et CSS Le XHTML est une évolution du HTML, initiales de « Hypertext Markup Language », c’est-à-dire langage de marquage hypertexte. Cela signifie que la mise en place d’une page web (titres, paragraphes, images...) utilisera des caractères pour marquer d’une certaine façon les différentes parties du texte. Parmi ces caractères de marquage, certains correspondront à des liens vers d’autres pages web : ce sont des liens hypertexte. Le « X » de XHTML vient de XML, soit « eXtensible Markup Language », langage plus complexe et plus strict que le HTML. C’est lui qui a inspiré la transition du HTML vers la forme plus rigoureuse qu’est le XHTML. Quant à CSS, cela signifie « Cascading Style Sheets », ce qui se traduit en français par feuilles de style en cascade. La feuille de style fournit la mise en forme des éléments de la page, qui auront été écrits en XHTML. Elle s’applique à une ou plusieurs pages du site. Le terme « en cascade » indique que la mise en forme d’une page peut faire appel à plusieurs feuilles de style. Les différentes propriétés affectées à un même élément s’ajoutent alors pour lui donner sa mise en forme finale. Lorsque deux propriétés se contredisent, des règles de priorité s’appliquent et c’est généralement le dernier style défini qui est pris en compte.

Principes de base pour une page web Voici les principales qualités demandées à une page web : qu’elle soit claire dans sa conception, accessible à tous et que son esthétique s’accorde bien avec son contenu.

2

© Groupe Eyrolles, 2005

1 – Introduction au XHTML et aux feuilles de style CSS

Choix sensé des balises HTML En HTML, chaque élément doit être porteur de sens. Par exemple : • Pour un titre de page, utiliser un titre de niveau 1

plutôt qu’un paragraphe quelconque

. • Pour un menu (liste de liens), choisir une liste sans numérotation