CSS3 - Adoptez les feuilles de stylemultimedia.fnac.com/multimedia/editorial/pdf/9782746093959.pdf · CSS • Les polices • Le texte • Les listes • Les tableaux et les for-

ISBN

: 97

8-2-

7460

-939

5-9

29,9

0 €

Ce livre sur CSS3 s’adresse à un public de développeurs qui doivent intervenir sur la gestion de pages web comportant l’utilisa-tion de feuilles de styles CSS. À l’issue de cette lecture, vous serez en mesure de comprendre, de modifier et d’adapter les styles CSS créés par des graphistes, afin de les intégrer dans le développe-ment de vos projets.

Le livre permet de découvrir la mise en place des CSS, avec toute la syntaxe et les notions indispensables d’héritage et de cascade. Les propriétés CSS étudiées sont illustrées d’exemples d’applica-tion. Chaque chapitre est consacré à une thématique des CSS : les polices de caractères, le texte, les listes, les tableaux et les formulaires. L’auteur traite bien sûr la gestion des conteneurs qui permettent la mise en œuvre de certaines techniques de mise en page (boîtes flottantes et boîtes positionnées). Il présente la notion de Responsive Web Design pour créer des pages web s’adaptant aux différents supports de diffusion (écran d’ordina-teur, tablette et smartphone). Il poursuit le livre par la description des techniques d’animation, de transformation et de transition. Le dernier chapitre fournit des exemples de mise en page.

Tous les exemples présentés sont disponibles en téléchargement sur le site www.editions-eni.fr.

CSS3 Adoptez les feuilles de style pour maîtriser les standards du web

Pour plus d’informations : CS

S3 -

Ado

ptez

les

feui

lles

de s

tyle

Responsable pédagogique dans un centre de formation et forma-teur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe AUBRY est aujourd’hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur Drupal, Word-Press, Dreamweaver, XHTML et CSS, il intervient régulièrement sur les forums dédiés aux blogs et CMS.

Christophe AUBRY

Les chapitres du livre

Utiliser les Cascading Style Sheets • Créer des feuilles de style CSS • Les polices • Le texte • Les listes • Les tableaux et les for-mulaires • L’interface utilisateur • Les boîtes • Le Responsive Web Design • Les modules CSS3 de mise en page • Les modules CSS3 en travaux • Des exemples de mise en page

Téléchargementwww.editions-eni.fr.fr

sur www.editions-eni.fr : b Le code des exemples

du livre.

CSS3Adoptez les feuilles de style

pour maîtriser les standards du web

1Table des matières

Chapitre 1

Utiliser les Cascading Style Sheets

1. Les objectifs du livre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2. L'évolution des CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.1 Les modules CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.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

Chapitre 2

Créer des feuilles de style CSS

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2. La syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.1 Les principes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.2 Un exemple simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.3 Les règles d'écriture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.4 Les règles de nommage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

3. Où créer la feuille de style ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.1 Les différentes possibilités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.2 Dans l'élément HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.3 Dans la page HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303.4 Dans un fichier CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Les éléments à télécharger sont disponibles à l'adresse suivante :http://www.editions-eni.fr

Saisissez la référence de l'ouvrage RI3CSS dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.

2Adoptez les feuilles de style pour maîtriser les standards du web

CSS3

3.5 La liaison avec <link> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313.6 La liaison avec @import. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323.7 Création, liaisons et importations multiples de règles CSS . . . . 33

4. Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

5. Les sélecteurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355.1 L'utilisation des sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355.2 Le sélecteur universel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365.3 Les sélecteurs de type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365.4 Les sélecteurs d'attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375.5 Les sélecteurs d'identification . . . . . . . . . . . . . . . . . . . . . . . . . . . 395.6 Les sélecteurs de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405.7 Les pseudo-classes dynamiques de lien . . . . . . . . . . . . . . . . . . . . 425.8 Les pseudo-classes dynamiques d'action . . . . . . . . . . . . . . . . . . . 435.9 La pseudo-classe de cible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445.10 La pseudo-classe de langue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475.11 Les pseudo-classes d'état . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475.12 La pseudo-classe de la racine . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515.13 Les pseudo-classes de premier et dernier enfant . . . . . . . . . . . . . 515.14 La pseudo-classe des premiers enfants . . . . . . . . . . . . . . . . . . . . 525.15 La pseudo-classe des derniers enfants . . . . . . . . . . . . . . . . . . . . . 545.16 Les pseudo-classes du premier et du dernier enfant d'un type . 555.17 Les pseudo-classes des premiers et

des derniers enfants d'un type . . . . . . . . . . . . . . . . . . . . . . . . . . . 555.18 La pseudo-classe des éléments sans frère. . . . . . . . . . . . . . . . . . . 565.19 La pseudo-classe des éléments sans frère d'un type . . . . . . . . . . 575.20 La pseudo-classe des éléments vides . . . . . . . . . . . . . . . . . . . . . . 585.21 La pseudo-classe de négation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605.22 Les pseudo-éléments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

6. Les combinaisons de sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636.1 L'utilisation des combinaisons . . . . . . . . . . . . . . . . . . . . . . . . . . . 636.2 Les sélecteurs descendants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636.3 Le sélecteur d'enfants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646.4 Le sélecteur d'enfants adjacents. . . . . . . . . . . . . . . . . . . . . . . . . . 65


6.5 Le sélecteur d'enfant général . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666.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 . . . . . . . . . . . . . . . . . . . . 708.1 L'utilisation de la cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708.2 L'ordre de la cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718.3 Deuxième niveau : la règle d'importance . . . . . . . . . . . . . . . . . . 728.4 Troisième niveau : la spécificité des sélecteurs . . . . . . . . . . . . . . 738.5 Quatrième niveau : la proximité des sélecteurs . . . . . . . . . . . . . 74

9. Les unités utilisées dans les CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759.1 L'utilisation des unités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759.2 Les unités numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759.3 Les unités de mesure absolues . . . . . . . . . . . . . . . . . . . . . . . . . . . 759.4 Les unités de mesure relatives . . . . . . . . . . . . . . . . . . . . . . . . . . . 769.5 D'autres unités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

10. Les couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7710.1 L'utilisation des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7710.2 La notation nominale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7710.3 La notation hexadécimale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7810.4 La notation RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7810.5 La notation HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

11. Les adresses Internet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Chapitre 3

Les polices

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

2. L'application des polices de caractères. . . . . . . . . . . . . . . . . . . . . . . . . 81

3. Les polices locales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82


CSS3

4. Les polices embarquées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 834.1 Les formats des polices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 834.2 La règle @font-face. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 854.3 Le nom des polices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 864.4 Les polices embarquées locales. . . . . . . . . . . . . . . . . . . . . . . . . . . 874.5 Indiquer plusieurs formats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 874.6 Les styles typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

5. Les polices en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 885.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

14. Les décalages des caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

15. D'autres propriétés à venir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Chapitre 4

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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1095.1 La propriété CSS 2.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1095.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

12. Les ruptures et la césure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12112.1 Les ruptures de lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12112.2 Les ruptures de mots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

13. La césure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12413.1 Définir les césures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12413.2 Les exceptions de césure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

14. Le contenu généré . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12914.1 Le contenu textuel avant et après . . . . . . . . . . . . . . . . . . . . . . . 12914.2 Les compteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13014.3 Les CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

15. Le débordement du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Chapitre 5

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


CSS3

Chapitre 6

Les tableaux et les formulaires

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

2. Les tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1462.1 La largeur des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1462.2 Les bordures des tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1472.3 L'espace entre les cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1492.4 La gestion des cellules vides . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

3. Les formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1533.1 La mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1533.2 Redimensionner un champ . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1533.3 Des pseudo-classes pour les formulaires . . . . . . . . . . . . . . . . . . 1553.4 Les champs requis et optionnels . . . . . . . . . . . . . . . . . . . . . . . . 1583.5 La mise en forme du focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1593.6 La validation des saisies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

Chapitre 7

L'interface utilisateur

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

2. Les contours dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

3. Les curseurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

4. Les propriétés à risques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Chapitre 8

Les boîtes

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

2. Le modèle des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1742.1 La structure des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1742.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. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1794.1 Les largeur et hauteur standards . . . . . . . . . . . . . . . . . . . . . . . . 1794.2 Spécifier le calcul de la largeur . . . . . . . . . . . . . . . . . . . . . . . . . . 181

5. Le remplissage interne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

6. Les marges externes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1876.1 Les propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1876.2 La fusion des marges. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1886.3 Un exemple de marges fixes. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1886.4 Un exemple de marges en auto . . . . . . . . . . . . . . . . . . . . . . . . . 189

7. Le débordement du contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

8. Les bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1938.1 Les propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1938.2 Les styles de la bordure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1938.3 L'épaisseur de la bordure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1948.4 La couleur de la bordure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1958.5 La propriété générique des bordures . . . . . . . . . . . . . . . . . . . . . 1958.6 Les bordures fantaisistes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

9. Les coins arrondis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1999.1 Les coins avec des cercles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1999.2 Les coins avec des ellipses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

10. Les arrière-plans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20210.1 Les couleurs d'arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20210.2 Les dégradés d'arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20310.3 Les images d'arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20510.4 Les autres propriétés d’arrière-plan . . . . . . . . . . . . . . . . . . . . . . 207

11. Les ombres portées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

12. Le positionnement des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211


CSS3

13. Les boîtes flottantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21113.1 La propriété de flottement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21113.2 Un exemple simple de flottement . . . . . . . . . . . . . . . . . . . . . . . 21213.3 Un exemple plus élaboré de flottement . . . . . . . . . . . . . . . . . . 21313.4 Interdire le flottement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

14. Les boîtes positionnées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21614.1 La propriété de positionnement. . . . . . . . . . . . . . . . . . . . . . . . . 21614.2 La position relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21714.3 La position fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21814.4 La position absolue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Chapitre 9

Le Responsive Web Design

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

2. Les requêtes de média. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2232.1 La recommandation du W3C. . . . . . . . . . . . . . . . . . . . . . . . . . . 2232.2 Les critères des requêtes de média . . . . . . . . . . . . . . . . . . . . . . . 2242.3 La syntaxe des requêtes de média . . . . . . . . . . . . . . . . . . . . . . . 2252.4 Les valeurs minimales et maximales . . . . . . . . . . . . . . . . . . . . . 2252.5 Les opérateurs logiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

3. La taille des écrans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2273.1 La taille physique et l'affichage . . . . . . . . . . . . . . . . . . . . . . . . . 2273.2 Les zooms à l’écran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2283.3 Deux sites de référence pour la taille des écrans. . . . . . . . . . . . 229

4. Un exemple d’un site simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2304.1 La structure du site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2304.2 Réaliser un design adaptatif simple. . . . . . . . . . . . . . . . . . . . . . 2364.3 Les affichages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

5. Des images adaptatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242


Chapitre 10

Les modules CSS3 de mise en page

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

2. Le module Multi-column Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . 2482.1 L'objectif du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2482.2 La mise en place des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . 2492.3 La mise en place des gouttières . . . . . . . . . . . . . . . . . . . . . . . . . 2512.4 La mise en place des sauts de colonnes . . . . . . . . . . . . . . . . . . . 2532.5 La répartition sur plusieurs colonnes . . . . . . . . . . . . . . . . . . . . 254

3. Le module Flexible Box Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2563.1 L'objectif du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2563.2 Les boîtes flexibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2573.3 L'orientation et le sens des boîtes . . . . . . . . . . . . . . . . . . . . . . . 2583.4 Le débordement des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2593.5 L'alignement horizontal des boîtes . . . . . . . . . . . . . . . . . . . . . . 2613.6 L'alignement vertical des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . 2643.7 Les propriétés de flexibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

4. Le module Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2684.1 L'objectif du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2684.2 L'habillage par une forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

5. Le module Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2715.1 L'objectif du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2715.2 Masquer une partie de l'image . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Chapitre 11

Les modules CSS3 en travaux

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

2. Le module Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2752.1 L'objectif du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2752.2 La construction des animations. . . . . . . . . . . . . . . . . . . . . . . . . 2762.3 Animer une forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277


CSS3

3. Le module Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2803.1 L'objectif du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2803.2 Des exemples de transformation . . . . . . . . . . . . . . . . . . . . . . . . 2813.3 Un exemple de galerie de Polaroid . . . . . . . . . . . . . . . . . . . . . . . 283

4. Le module Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2874.1 L'objectif du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2874.2 Mettre en place les transitions. . . . . . . . . . . . . . . . . . . . . . . . . . 2884.3 Un exemple d’un menu interactif . . . . . . . . . . . . . . . . . . . . . . . 290

Chapitre 12

Des exemples de mise en page

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

2. La mise en page en boîtes flottantes . . . . . . . . . . . . . . . . . . . . . . . . . 2932.1 L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2932.2 Le conteneur général. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2942.3 L'en-tête. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2952.4 Le logo, le slogan et le champ de recherche. . . . . . . . . . . . . . . . 2962.5 La navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3002.6 La zone centrale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3012.7 Le pied de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3042.8 Le code complet de cet exemple . . . . . . . . . . . . . . . . . . . . . . . . 3052.9 Les inconvénients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308

3. La mise en page en tableau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3083.1 L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3083.2 La structure du tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3093.3 Les cellules du tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3103.4 Les contenus du tableau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3113.5 L'affichage et les avantages . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315


4. La mise en page adaptative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3164.1 L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3164.2 Installer le framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3174.3 La grille de Kube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3174.4 La grille de notre exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3194.5 Les sélecteurs universels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3224.6 Les sélecteurs des lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3224.7 Les sélecteurs des blocs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3224.8 L'adaptation aux petits écrans . . . . . . . . . . . . . . . . . . . . . . . . . . 323

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

137

Chapitre 5

Les listes

Les lis tes

1. L'objectif

Nous allons voir dans ce chapitre toutes les propriétés CSS s'appliquant auxlistes. Les listes de valeurs utilisent plusieurs propriétés CSS :

– list-style-type qui détermine le style des marques de l'énumération.

– list-style-image qui permet d'utiliser une image à la place desmarques d'énumération.

– list-style-position qui permet d'indiquer la position de la marqued'énumération par rapport au texte.

2. Les styles des marques

La propriété list-style-type va vous permettre de choisir quel type demarque d'énumération vous souhaitez pour vos listes : à puces ou numéro-tées. On retrouve les mêmes types qu'avec les listes HTML <ul>.

Propriété : list-style-type

Valeur : disc | circle | square | decimal | decimal-leading-zero | lower-roman| upper-roman | lower-greek | lower-latin | upper-latin | armenian |georgian | lower-alpha | upper-alpha | none

© E

dit

ions

EN

I -

All r

ights

rese

rved


CSS3

Valeur initiale : disc

S'applique à : éléments de type liste

Héritée : oui

Voici les valeurs utilisables :

– disc : insère une puce ronde et pleine.

– circle : insère une puce ronde et creuse.

– square : insère une puce carrée et pleine.

– decimal : insère une numérotation en chiffres arabes : 1, 2, 3...

– decimal-leading-zero : insère une numérotation en chiffres arabes,avec le chiffre 0 en préfixe : 01, 02, 03...

– lower-roman : insère une numérotation en chiffres romains minuscules :i, ii, iii...

– upper-roman : insère une numérotation en chiffres romains majuscules :I, II, III...

– lower-alpha : insère une numérotation alphabétique minuscule : a, b, c...

– upper-alpha : insère une numérotation alphabétique majuscule : A, B,C...

– none : n'insère aucune valeur d'énumération.

Voici un exemple simple (05_01.html), avec une liste en chiffres romainsmajuscules et avec des puces en cercle.

<!DOCTYPE html>

<html lang="fr">

<head>

<title>Les marques d'énumération</title>

<meta charset="UTF-8" />

<style>

.romain {

list-style-type: upper-roman;

}

.carre {

list-style-type: square;

}

.cercle {

139Les listesChapitre 5

list-style-type: circle;

}

</style>

</head>

<body>

<ol class="romain">

<li>Pommes</li>

<li>Poires</li>

<li>Pêches</li>

</ol>

<ul class="cercle">

<li>Fraises</li>

<li>Cerises</li>

<li>Kiwis</li>

</ul>

</body>

</html>

Voici l'affichage obtenu :

Vous notez que par défaut nous avons une marge à gauche des listes, de sorteque les énumérations soient alignées.

3. Les marques avec des images

Vous pouvez utiliser une image à la place des marques d'énumération usuelles.Pour ce faire, utilisez la propriété list-style-image.

Propriété : list-style-image

Valeur : url | none

Valeur initiale : none

© E

dit

ions

EN

I -

All r

ights

rese

rved


CSS3


Héritée : oui

La valeur url indique le chemin d'accès à cette image d'illustration.

Voici un exemple simple (05_02.html), avec une marque en étoile. Vousnotez que l'on peut aussi bien utiliser un élément <ol>, qu'un élément <ul>.

<!DOCTYPE html>

<html lang="fr">

<head>

<title>Les images d'énumération</title>


<style>

.etoile {

list-style-image: url(etoile.png);

}

</style>

</head>

<body>

<ol class="etoile">

<li>Pommes</li>

<li>Poires</li>

<li>Pêches</li>

</ol>

</body>

</html>


4. La position des marques

La propriété list-style-position permet d'indiquer si la marque d'énu-mération se trouve "dans" la liste, quand le texte se trouve sur plusieurs lignes,ou "hors" de la liste.

141Les listesChapitre 5

Propriété : list-style-position

Valeur : inside | outside

Valeur initiale : outside


Héritée : oui

Voici les deux valeurs possibles :

– inside : la marque d'énumération se trouve dans la liste.

– outside : la marque d'énumération se trouve hors de la liste.

Voici un exemple simple (05_03.html), proposant une liste avec la marquedans la liste et une autre avec la marque hors de la liste.

<!DOCTYPE html>

<html lang="fr">

<head>

<title>Les positions des marques</title>


<style>

.etoile-hors{

list-style-image:url(etoile.png);

list-style-position:outside;

}

.etoile-dans {

list-style-image:url(etoile.png);

list-style-position: inside;

}

</style>

</head>

<body>

<ol class="etoile-hors">

<li>Donec sed odio dui...</li>

<li>Nullam id dolor...</li>

<li>Aenean eu leo quam...</li>

</ol>

<ol class="etoile-dans">

<li>Cras justo odio...</li>

<li>Etiam porta sem...</li>

<li>Vestibulum id ligula porta...</li>

© E

dit

ions

EN

I -

All r

ights

rese

rved


CSS3

</ol>

</body>

</html>


5. La syntaxe courte

La propriété list-style est la syntaxe courte permettant de regrouper enune seule propriété, les trois propriétés vues dans les paragraphes précédents.

Propriété : list-style

Valeur : [disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none] | [inside | outside] |[<url> | none]

Valeur initiale : none


Héritée : oui

Documents

CSS3 - Adoptez les feuilles de stylemultimedia.fnac.com/multimedia/editorial/pdf/9782746093959.pdf · CSS • Les polices • Le texte • Les listes • Les tableaux et les for-