maîtrisez les standards de la création de sites web html5 ... · ce livre sur le langage html5...

Ce livre sur le langage HTML5 (en version 5.2 au moment de l’écriture) et les feuilles de styles CSS3, langages fondateurs dans la création de sites web, s’adresse aux développeurs qui souhaitent disposer des connaissances nécessaires pour créer et faire évoluer des sites web dans le respect des bonnes pratiques.

Le livre est rédigé de façon à permettre un apprentissage progressif des éléments HTML et des propriétés CSS les plus couramment utili-sés. Il n’a pas pour objectif de présenter l’ensemble des syntaxes mais uniquement celles couramment exploitées dans la création de sites web modernes. Les exemples de code présentés par l’auteur sont illustrés par des captures d’écran afin que le lecteur puisse se faire une idée de l’affichage obtenu.

Dans la première partie du livre, l’auteur donne les informations néces-saires pour bien appréhender la conception de site web. Il présente les spécifications techniques du HTML et des CSS (les fameuses recommandations proposées par le W3C), le rôle essentiel des navi-gateurs et leur compatibilité avec les éléments HTML et les propriétés CSS, ainsi que les bonnes pratiques de conception de sites web pour obtenir des contenus sémantiques bien conçus.

Dans la deuxième partie, le lecteur apprend à concevoir la structure des pages web avec des éléments HTML sémantiques dédiés. Il étudie ensuite les éléments qui permettent d’insérer du texte, des liens, des tableaux, des images, des formulaires, sans oublier des contenus multimédias. Un chapitre est consacré aux Microdata permettant d’ob-tenir un site sémantique et d’optimiser son référencement.

La troisième partie permet au lecteur d’exploiter les CSS afin de mettre en forme et de mettre en page un site web. Il y apprend la syntaxe des CSS et des sélecteurs puis étudie les notions d’héritage et de cascade. Ensuite, il découvre comment mettre en forme chaque composant d’une page web : le texte, les images, les formulaires ainsi que les boîtes conteneurs. Les différentes techniques de mise en page et la conception des sites Responsive sont également détaillées. L’auteur termine avec l’étude des modules CSS dédiés aux animations pour dynamiser des pages web.

Responsable pédagogique dans un centre de formation et formateur sur les techno-logies 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 et vidéos aux Editions ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), il reste au fait des nouveautés concernant la conception des sites web en effectuant une veille technologique régulière.

Christophe AUBRY

HTML5 et CSS3

Maîtrisez les standards de la création de sites web

3e édition

Nouvelle édition

HTM

L5 e

t CSS

3M

aîtris

ez le

s st

anda

rds

de la

cré

atio

n de

site

s w

eb

HTML5 et CSS3Maîtrisez les standards de la création de sites web

Les chapitres du livre

Avant-propos • Partie Aborder la conception des sites web : L’évolution des spécifications • Les navigateurs • Les bonnes pratiques • Partie L’HTML 5.2 : Les éléments HTML • La structure des pages • Les conteneurs séman-tiques • Les conteneurs de texte • La mise en forme sémantique du texte • Les éléments d’interaction • Les liens • Les tableaux • Les images • Les formulaires • Le multimédia • Le web sémantique avec Microdata • Partie Les CSS3 : Intégrer les styles CSS • Définir les styles CSS • Les styles pour les polices de carac-tères • Les styles pour le texte • Les styles pour les conteneurs de texte • Les styles pour les boîtes • La mise en page à l’aide des boîtes • Le Responsive Web Design • Les modules d’animation • Des modules CSS pour les graphistes • Les feuilles de style pour l’impression

ISBN

: 97

8-2-

409-

0178

3-4

29,9

0 €

Pour plus d’informations :

1Table des matières

Avant-propos

Partie 1 : Aborder la conception des sites web

Chapitre 1-1

L’évolution des spécifications

1. Une brève histoire du Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2. Les travaux d’élaboration des spécifications . . . . . . . . . . . . . . . . . . . . 18

3. L’évolution du HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4. L’évolution des CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Chapitre 1-2

Les navigateurs

1. L’évolution des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2. Les outils de développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3. La compatibilité des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Chapitre 1-3

Les bonnes pratiques

1. Séparer le contenu de la mise en forme. . . . . . . . . . . . . . . . . . . . . . . . 27

2. Utiliser une structure sémantique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3. Optimiser le code et organiser vos fichiers . . . . . . . . . . . . . . . . . . . . . 28

4. Un exemple d’une page bien formée . . . . . . . . . . . . . . . . . . . . . . . . . . 29

5. Valider le code de vos pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

lcroise

Tampon

2Maîtrisez les standards de la création de sites web

HTML5 et CSS3

Partie 2 : Aborder la conception des sites web

Chapitre 2-1

Les éléments HTML

1. Bien utiliser le HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

2. Les balises et les contenus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

3. Les attributs des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

4. Le bon usage de la syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

5. L’imbrication des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

6. Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Chapitre 2-2

La structure des pages

1. La structure générale des pages web . . . . . . . . . . . . . . . . . . . . . . . . . . 39

2. La déclaration doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3. L’élément <html> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

4. L'élément <head> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.1 Les éléments enfant de l’en-tête . . . . . . . . . . . . . . . . . . . . . . . . . 404.2 Les éléments <meta> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414.3 L’élément <title> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.4 L’élément <link>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.5 L’élément <style> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.6 L’élément <script> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

5. L’élément <body>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

6. Exemple d’une structure simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43


Chapitre 2-3

Les conteneurs sémantiques

1. Bien utiliser les conteneurs sémantiques . . . . . . . . . . . . . . . . . . . . . . 45

2. L'élément <div> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

3. L'élément <span> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

4. L'élément <header>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

5. L'élément <footer> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

6. L'élément <aside> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

7. L'élément <nav> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

8. L’élément <main>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

9. L’élément <section> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

10. L'élément <article> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

11. Deux exemples de structure sémantique de page. . . . . . . . . . . . . . . . 5011.1 Une structure sémantique simple . . . . . . . . . . . . . . . . . . . . . . . . 5011.2 Une structure sémantique plus élaborée. . . . . . . . . . . . . . . . . . . 51

12. Un exemple de structure sémantique d'un article . . . . . . . . . . . . . . . 52

Chapitre 2-4

Les conteneurs de texte

1. Bien utiliser les conteneurs de texte . . . . . . . . . . . . . . . . . . . . . . . . . . 55

2. La langue et la direction du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

3. Les titres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

4. Les paragraphes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

5. Les citations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

6. Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606.1 Les différents types de liste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606.2 Les listes non ordonnées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606.3 Les listes ordonnées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61


HTML5 et CSS3

6.4 L’attribut de <li>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636.5 Les listes de définitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

7. Les adresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

8. Le texte préformaté . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

9. Les lignes horizontales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Chapitre 2-5

La mise en forme sémantique du texte

1. Utiliser une mise en forme sémantique . . . . . . . . . . . . . . . . . . . . . . . 69

2. Insérer des caractères spéciaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

3. L’emphase forte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

4. L’emphase simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

5. Mettre en gras et en italique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

6. L’indice et l’exposant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

7. Le souligné. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

8. Le barré . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

9. Réduire la taille de caractère . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

10. Les titres d’œuvres et les citations courtes . . . . . . . . . . . . . . . . . . . . . 75

11. Les insertions et suppressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

12. Le retour à la ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

13. D'autres mises en forme sémantiques . . . . . . . . . . . . . . . . . . . . . . . . . 78

Chapitre 2-6

Les éléments d’interaction

1. Afficher des détails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

2. Utiliser une boîte de dialogue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80


Chapitre 2-7

Les liens

1. Insertion de liens pour lier les pages . . . . . . . . . . . . . . . . . . . . . . . . . . 85

2. La structure des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

3. Les liens vers des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

4. Les liens internes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

5. Le contexte d’ouverture du lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

6. Les relations des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

7. Les liens vers les messageries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

8. Les liens de téléchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

9. Des liens en image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Chapitre 2-8

Les tableaux

1. La bonne utilisation des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

2. La structure des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

3. Les lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

4. Les cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

5. La fusion des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

6. Le titre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

7. Les groupes de colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 997.1 Regrouper des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 997.2 Cibler des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

8. Les tableaux structurés. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102


HTML5 et CSS3

Chapitre 2-9

Les images

1. Bien exploiter les images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

2. Comprendre les formats de compression . . . . . . . . . . . . . . . . . . . . . 1062.1 Compresser les images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1062.2 Le format GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1062.3 Le format JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1072.4 Le format PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

3. Insérer des images avec l’élément <img> . . . . . . . . . . . . . . . . . . . . 1083.1 L’utilisation des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1083.2 L’attribut src . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1083.3 L’attribut alt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1093.4 Les attributs width et height . . . . . . . . . . . . . . . . . . . . . . . . . . . 1103.5 Les attributs srcset et size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

4. Insérer des illustrations avec l’élément <figure> . . . . . . . . . . . . . . 1124.1 L’utilisation des illustrations . . . . . . . . . . . . . . . . . . . . . . . . . . . 1124.2 L’élément <figure> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1134.3 L’élément <figcaption> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Chapitre 2-10

Les formulaires

1. La présence des formulaires dans les pages web . . . . . . . . . . . . . . . . 115

2. La structure des formulaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1162.1 Le formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1162.2 Les étiquettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1162.3 Grouper des champs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1182.4 Les attributs communs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

3. Les champs de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1203.1 La saisie de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1203.2 Les champs de texte simples . . . . . . . . . . . . . . . . . . . . . . . . . . . 1203.3 Les champs de texte pour les mots de passe . . . . . . . . . . . . . . . 120


3.4 Les champs de texte multilignes . . . . . . . . . . . . . . . . . . . . . . . . 121

4. Les listes de valeurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

5. Les boutons radio à choix unique . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

6. Les cases à cocher à choix multiple . . . . . . . . . . . . . . . . . . . . . . . . . . 125

7. D’autres types de champs avec <input> . . . . . . . . . . . . . . . . . . . . . 126

8. Les aides à la saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1268.1 Les objectifs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1268.2 La consigne de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1278.3 Activer un champ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1288.4 L’autocomplétion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1288.5 Rendre un champ obligatoire. . . . . . . . . . . . . . . . . . . . . . . . . . . 1298.6 Les saisies autorisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

9. Les boutons d’action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

10. Un exemple complet de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . 13410.1 Le code complet du formulaire . . . . . . . . . . . . . . . . . . . . . . . . . 13410.2 Le formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13610.3 Les boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13610.4 Les champs de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13710.5 Le champ numérique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13710.6 Le champ d’adresse mail. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13810.7 Le champ de date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13810.8 La liste déroulante. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14010.9 Les cases à cocher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14110.10Les boutons d’action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142


HTML5 et CSS3

Chapitre 2-11

Le multimédia

1. La présence du multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

2. Les formats et les codecs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

3. L’insertion d’une vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1463.1 L’élément <video> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1463.2 La source de la vidéo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1463.3 Les contrôles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1473.4 Précharger la vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1483.5 Afficher une image d’ouverture . . . . . . . . . . . . . . . . . . . . . . . . . 1493.6 Spécifier les dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1493.7 Proposer plusieurs sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1493.8 Jouer en boucle et désactiver le son . . . . . . . . . . . . . . . . . . . . . . 150

4. L’insertion d’un fichier audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Chapitre 2-12

Le Web sémantique avec Microdata

1. L’état des lieux du Web sémantique . . . . . . . . . . . . . . . . . . . . . . . . . 153

2. L’objectif de Microdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1542.1 La norme et les schémas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1542.2 Les attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

3. Le schéma pour les personnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1563.1 Définir l’utilisation de Microdata avec itemscope . . . . . . . . . . 1563.2 Indiquer le schéma utilisé avec itemtype . . . . . . . . . . . . . . . . . 1563.3 Spécifier les propriétés avec itemprop . . . . . . . . . . . . . . . . . . . . 157

4. Imbriquer des schémas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1584.1 Pourquoi imbriquer des schémas ? . . . . . . . . . . . . . . . . . . . . . . 1584.2 Les deux schémas nécessaires . . . . . . . . . . . . . . . . . . . . . . . . . . 1594.3 Faire référence à un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . 161


Partie 3 : Les CSS3

Chapitre 3-1

Intégrer les styles CSS

1. Le rôle des CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

2. Les styles intégrés dans un élément HTML . . . . . . . . . . . . . . . . . . . 164

3. Les styles définis dans la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

4. Les styles définis dans un fichier .css. . . . . . . . . . . . . . . . . . . . . . . . . 166

5. Les styles importés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Chapitre 3-2

Définir les styles CSS

1. La structure d’une règle de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1691.1 La terminologie des CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1691.2 Définir une règle de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1701.3 Les règles de nommage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

2. Les unités de mesure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1722.1 L’utilisation des unités de mesure . . . . . . . . . . . . . . . . . . . . . . . 1722.2 Les valeurs initiale et héritée . . . . . . . . . . . . . . . . . . . . . . . . . . . 1722.3 Les valeurs numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1732.4 Les unités de longueur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1732.5 Les valeurs calculées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

3. La notation des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1753.1 Utiliser les couleurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1753.2 La notation nominative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1753.3 La notation hexadécimale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1763.4 Les notations RGB et RGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . 1773.5 Les notations HSL et HSLA . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

4. Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

5. Les sélecteurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180


HTML5 et CSS3

5.1 L’objectif des sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1805.2 Le sélecteur universel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1805.3 Les sélecteurs de type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1815.4 Les sélecteurs de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1815.5 Les sélecteurs de classe de type . . . . . . . . . . . . . . . . . . . . . . . . . 1825.6 Les sélecteurs d’identification . . . . . . . . . . . . . . . . . . . . . . . . . . 1835.7 Les sélecteurs d’attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1845.8 Les sélecteurs de pseudo-classes. . . . . . . . . . . . . . . . . . . . . . . . . 186

5.8.1 Utiliser les pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . 1865.8.2 Les pseudo-classes dynamiques des liens . . . . . . . . . . . . 1865.8.3 Les pseudo-classes dynamiques des actions utilisateurs 1885.8.4 La pseudo-classe d'ancre . . . . . . . . . . . . . . . . . . . . . . . . . . 1895.8.5 La pseudo-classe de langue. . . . . . . . . . . . . . . . . . . . . . . . 1925.8.6 Les pseudo-classes d’état . . . . . . . . . . . . . . . . . . . . . . . . . 1935.8.7 Les pseudo-classes de structure . . . . . . . . . . . . . . . . . . . . 1945.8.8 La pseudo-classe de négation . . . . . . . . . . . . . . . . . . . . . . 204

5.9 Les sélecteurs de pseudo-éléments. . . . . . . . . . . . . . . . . . . . . . . 2065.9.1 Le pseudo-élément de première ligne . . . . . . . . . . . . . . . 2065.9.2 Le pseudo-élément de première lettre . . . . . . . . . . . . . . . 2075.9.3 Les pseudo-éléments de contenu . . . . . . . . . . . . . . . . . . . 208

5.10 Les combinaisons de sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . 2105.10.1Les sélecteurs combinés . . . . . . . . . . . . . . . . . . . . . . . . . . 2105.10.2Les combinaisons descendantes. . . . . . . . . . . . . . . . . . . . 2105.10.3Les combinaisons d’enfants . . . . . . . . . . . . . . . . . . . . . . . 2115.10.4Les combinaisons de frères immédiats . . . . . . . . . . . . . . 2135.10.5Les combinaisons de frères. . . . . . . . . . . . . . . . . . . . . . . . 215

6. L’application des styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2166.1 La notion d’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2166.2 La spécificité des sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

6.2.1 Le calcul de la spécificité des sélecteurs. . . . . . . . . . . . . . 2186.2.2 Un exemple des spécificités des sélecteurs . . . . . . . . . . . 219

6.3 La notion d’importance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2226.4 La notion de cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224


6.4.1 Les priorités dans la cascade. . . . . . . . . . . . . . . . . . . . . . . 2246.4.2 Les conflits dans la cascade . . . . . . . . . . . . . . . . . . . . . . . 226

6.5 L’ordre d’application des styles . . . . . . . . . . . . . . . . . . . . . . . . . 226

Chapitre 3-3

Les styles pour les polices de caractères

1. Le module CSS 3 pour les polices de caractères . . . . . . . . . . . . . . . . 227

2. Les polices de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2272.1 Choisir une police de caractère . . . . . . . . . . . . . . . . . . . . . . . . . 2272.2 Les familles de caractère génériques . . . . . . . . . . . . . . . . . . . . . 2282.3 Déclarer une police de caractère. . . . . . . . . . . . . . . . . . . . . . . . . 2282.4 Embarquer une police de caractère . . . . . . . . . . . . . . . . . . . . . . 230

3. La taille des caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2313.1 Les tailles par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2313.2 Modifier la taille des caractères . . . . . . . . . . . . . . . . . . . . . . . . . 232

4. La mise en forme des caractères. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2374.1 La graisse des caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2374.2 L’italique des caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2394.3 La chasse des caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2394.4 Les petites capitales des caractères . . . . . . . . . . . . . . . . . . . . . . 239

5. La syntaxe raccourcie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Chapitre 3-4

Les styles pour le texte

1. L’application des styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

2. La couleur du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

3. Les décorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2443.1 Le module CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2443.2 Les lignes pour le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2453.3 Les lignes décoratives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246


HTML5 et CSS3

3.4 Les ombres portées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

4. La mise en forme du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2484.1 Le module CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2484.2 Le changement de casse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2494.3 Les espaces entre les caractères et les mots . . . . . . . . . . . . . . . . 2504.4 Les espaces blancs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2514.5 Les alignements du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2534.6 Le retrait de première ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2544.7 La césure des fins de ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

5. D'autres propriétés pour le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2575.1 L'interligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2575.2 Le texte en excès . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Chapitre 3-5

Les styles pour les conteneurs de texte

1. Les titres, les paragraphes et les citations . . . . . . . . . . . . . . . . . . . . . 261

2. Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2612.1 Les éléments des listes et les styles . . . . . . . . . . . . . . . . . . . . . . 2612.2 Les styles d'énumération . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2622.3 L'énumération avec une image . . . . . . . . . . . . . . . . . . . . . . . . . 2642.4 La position du symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2652.5 La syntaxe raccourcie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

3. Les tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2673.1 Le texte dans les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2673.2 La bordure du tableau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2683.3 Les bordures des cellules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2693.4 L'espace interne des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2703.5 Les cellules vides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2703.6 Le titre du tableau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271


4. Les formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2724.1 La mise en forme du texte des champs . . . . . . . . . . . . . . . . . . . 2724.2 Les états actif et inactif des objets. . . . . . . . . . . . . . . . . . . . . . . 2734.3 Les champs obligatoires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2754.4 La largeur des étiquettes et des champs . . . . . . . . . . . . . . . . . . 2774.5 Mettre en forme le focus des champs . . . . . . . . . . . . . . . . . . . . 278

Chapitre 3-6

Les styles pour les boîtes

1. Le concept du modèle de boîte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

2. Les affichages des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2822.1 Les différents types d'affichage . . . . . . . . . . . . . . . . . . . . . . . . . 2822.2 L'affichage en bloc. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2832.3 L’affichage en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2842.4 Changer le type d'affichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

3. Les marges externes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2883.1 La marge globale et les marges différenciées . . . . . . . . . . . . . . . 2883.2 Les syntaxes raccourcies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289

4. Les bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

5. Les remplissages internes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

6. La largeur et la hauteur des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . 2926.1 Les dimensions du contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2926.2 Les dimensions d'affichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

7. Les arrière-plans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2987.1 La couleur d'arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2987.2 Les images d’arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3007.3 Les dégradés de couleurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3037.4 L'opacité des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

8. Les coins arrondis des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

9. Les ombres portées des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308


HTML5 et CSS3

Chapitre 3-7

La mise en page à l'aide des boîtes

1. Les objectifs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

2. Le positionnement des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3122.1 Les positions des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3122.2 La position relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3132.3 La position absolue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3142.4 La position fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

3. Le flottement des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3173.1 Habiller une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3173.2 Interdire le flottement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

4. La superposition des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

5. La mise en page en affichage tableau. . . . . . . . . . . . . . . . . . . . . . . . . 324

6. Le débordement des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

7. La visibilité des boîtes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

8. La mise en page flexible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

9. La mise en page en grille. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Chapitre 3-8

Le Responsive Web Design

1. Le développement responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

2. Les requêtes de média. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3372.1 Les critères. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3372.2 La syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3392.3 Les valeurs minimales et maximales . . . . . . . . . . . . . . . . . . . . . 3392.4 Les opérateurs logiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

3. La taille des écrans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340


4. Un exemple de mise en page responsive . . . . . . . . . . . . . . . . . . . . . . 3414.1 Le site initial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3414.2 Le site responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Chapitre 3-9

Les modules d’animation

1. Les modules CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

2. Les transformations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3502.1 La fonction et le point de référence . . . . . . . . . . . . . . . . . . . . . . 3502.2 Le déplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3522.3 La mise à l'échelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3532.4 La rotation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3552.5 La déformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3552.6 Appliquer toutes les transformations . . . . . . . . . . . . . . . . . . . . 357

3. Les transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3583.1 Créer des transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3583.2 Créer un déplacement horizontal . . . . . . . . . . . . . . . . . . . . . . . 3593.3 Créer un déplacement horizontal et vertical . . . . . . . . . . . . . . 362

4. Les animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3634.1 Créer des animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3634.2 Créer un déplacement infini . . . . . . . . . . . . . . . . . . . . . . . . . . . 3654.3 Créer un formulaire animé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368

Chapitre 3-10

Des modules CSS pour les graphistes

1. Des modules en devenir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371

2. Les masques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3712.1 Le module CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3712.2 Créer un masque. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372


HTML5 et CSS3

3. L'habillage du texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3753.1 Le module CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3753.2 Créer un habillage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

Chapitre 3-11

Les feuilles de styles pour l’impression

1. L’impression des pages web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

2. Les feuilles de styles spécifiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3802.1 Les liaisons aux fichiers CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 3802.2 Les requêtes de média. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

3. Les propriétés globales des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381

4. Les polices de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

5. Les éléments non imprimés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

6. Les ruptures de lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3836.1 Les sauts de page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3836.2 Les lignes solidaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3846.3 Les veuves et les orphelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384

7. Les liens hypertextes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387

169

Chapitre 3-2



1. La structure d’une règle de style

1.1 La terminologie des CSS

Nous parlerons de CSS, de style, de règle, de déclaration, de propriété et de va-leur. Il convient de bien définir cette terminologie afin d’utiliser les bonstermes.

Les CSS, pour Cascading Style Sheets, sont une technologie développée parle W3C qui permet de mettre en forme et de mettre en page les pages des sitesweb structurés en HTML.

Un style est une mise en forme, ou une mise en page utilisant les CSS, qui estmémorisée et qui, ensuite, peut être appliquée à un ou plusieurs élémentsHTML.

Une règle CSS permet la création d’un style. Cette règle est créée avec unesyntaxe précise utilisant un sélecteur et une déclaration. Cette dernière estconstituée de propriétés et de valeurs.

lcroise

Tampon

© E

dit

ions

EN

I -

All r

ights

rese

rved


HTML5 et CSS3

1.2 Définir une règle de style

Un style CSS est bâti avec une règle. Cette règle est constituée de plusieursparties. Voici un petit schéma illustrant une règle CSS :

– La règle est constituée d’un sélecteur et d’une déclaration.

– Le sélecteur indique la portée du style, c’est-à-dire sur quel élément HTMLpeut s’appliquer le style créé. Il existe beaucoup de sélecteurs, nous les étu-dierons dans un prochain chapitre.

– La déclaration est indiquée entre accolades.C’est dans cette déclaration que sont indiquées la ou les propriétés CSS uti-lisées. Chaque propriété utilise une ou plusieurs valeurs. La propriété estséparée de la ou des valeurs par le caractère deux-points :. Chaque ligne dansla déclaration se termine par le caractère point-virgule ;.

Pour plus de visibilité et de lisibilité, il est d’usage d’aller à la ligne après l’ac-colade ouvrante et avant l’accolade fermante. Ainsi chaque couple propriété/valeur se trouve sur une seule ligne.

Voici une règle CSS n'utilisant aucun espace ni retour à la ligne. La visibilitén'est pas au rendez-vous :

nom-selecteur{propriete1:valeur1;propriete2:valeur2;propriete3: valeur3;}

Voici une règle CSS utilisant plusieurs lignes dans sa déclaration :

nom-selecteur { propriete1: valeur1 ; propriete2: valeur2 ; propriete3: valeur3 ;

}

171Définir les styles CSSChapitre 3-2

Les "puristes" pourront utiliser cette syntaxe :

nom-selecteur { propriete1: valeur1 ; propriete2: valeur2 ; propriete3: valeur3 ; }

C’est à vous d’organiser au mieux la structure des règles CSS pour avoir lameilleure lecture possible, tant que la syntaxe est respectée.

1.3 Les règles de nommage

Le nom des sélecteurs doit respecter quelques règles :

– Il ne doit pas commencer par un chiffre.

– Il ne doit pas contenir d’espace, de caractères accentués et de caractères spé-ciaux, comme : +, *, /…

– Il peut contenir les caractères tiret - et tiret bas (ou underscore) _, n’importeoù dans le nom.

– Il est sensible à la casse. Si le nom du sélecteur est dans la règle, .Mon-Selecteur, son application dans le code HTML doit être identique :class="Mon-Selecteur", et pas class="mon-Selecteur" ouclass="Mon-selecteur".

L’exception de la sensibilité à la casse est pour les sélecteurs de type qui uti-lisent le nom d’un élément HTML. En effet, vous le savez, le langage HTMLest insensible à la casse. Pour cette raison de nombreux designers n’utilisentque des minuscules pour éviter toute ambiguïté entre les CSS et le HTML.

© E

dit

ions

EN

I -

All r

ights

rese

rved


HTML5 et CSS3

2. Les unités de mesure

2.1 L’utilisation des unités de mesure

De très nombreuses propriétés utilisent des valeurs numériques. Citons parexemple la taille des caractères, les dimensions des blocs participant à la miseen page, la largeur des écrans de diffusion… Les unités de mesure sont une spé-cification du W3C qui est presque achevée puisqu’elle possède le statut deCandidate Recommendation au 14 août 2018 (en novembre 2018, au mo-ment de la rédaction de ce livre). Voici son URL : https://www.w3.org/TR/css-values-3/

Notez bien qu’il n’est ni nécessaire ni utile d’indiquer une unité si la valeur estégale à 0.

Voici un exemple inutile, mais valide :

.nav-bar { margin: 0px ;

}

Voici un exemple correct :

.nav-bar { margin: 0 ;

}

2.2 Les valeurs initiale et héritée

De nombreuses propriétés CSS peuvent utiliser trois valeurs textuelles :

– initial indique aux navigateurs qu’il faut utiliser la valeur par défaut dela propriété.

– inherit informe que la valeur calculée à utiliser est celle de l’élémentHTML parent de l’élément concerné.

– unset spécifie que la valeur est initial ou inherit, selon que la pro-priété est héritée ou non.

173Définir les styles CSSChapitre 3-2

2.3 Les valeurs numériques

Des propriétés peuvent utiliser des valeurs numériques de type entier (nomméinteger dans les propriétés CSS) ou des valeurs décimales (nommé number dansles propriétés CSS). Attention, le séparateur décimal est le point . et pas la vir-gule ,. Cette valeur est correcte : 1.2, et celle-ci est incorrecte : 1,2.

D’autres propriétés utilisent des pourcentages. L’unité est le classique % quin’utilise pas d’espace après le nombre. Cette valeur est correcte : 25% et celle-ci est incorrecte : 25 %.

2.4 Les unités de longueur

De très nombreuses propriétés CSS utilisent des valeurs de longueur, nom-

mées length dans les spécifications du W3C. Vous avez à votre dispositiondeux grands types de valeurs : les valeurs relatives et les valeurs absolues.

Les unités des valeurs relatives peuvent être :

– em pour indiquer la taille des caractères par rapport à l’élément parent.

– rem spécifie la taille des caractères dans l’élément racine <html> de la pageweb.

– ex donne la taille des caractères par rapport à la hauteur de la minuscule ducaractère x.

– vw attribue la valeur proportionnellement à la largeur de l’écran du médiade sortie (viewport en anglais).

– vh attribue la valeur proportionnellement à la hauteur de l’écran du médiade sortie (viewport en anglais).

Les unités des valeurs absolues peuvent être :

– cm pour des centimètres.

– mm pour des millimètres.

– in pour des inches (1 inche = 2,54 cm).

– pc pour des picas (1 pica = 1/16 in).

– pt pour des points (1 point = 1/72 in).

© E

dit

ions

EN

I -

All r

ights

rese

rved


HTML5 et CSS3

– px pour des pixels (1 pixel = 1/96 in).

Pour les unités des angles, nous avons :

– deg pour les degrés.

– grad pour les gradients.

– rad pour les radiants.

– turn pour 1 tour complet, soit 360°.

Pour les unités de temps, nous avons :

– s pour les secondes.

– ms pour les millisecondes.

2.5 Les valeurs calculées

Certaines mises en forme ou mises en page peuvent dépendre de calculs où in-terviennent la largeur de l’écran de diffusion, la taille de caractère d’un élé-ment parent… Pour effectuer des calculs, le W3C met à dispositionl’expression calc().

Voici un exemple simple dans lequel la largeur de l’élément HTML<section> est calculée à partir de trois valeurs :

section { float: left; margin: 1em; border: solid 1px; width: calc(100%/3 - 2*1em - 2*1px);

}

Voici un deuxième exemple d’une taille de caractère calculée proportionnelle-ment à la largeur du viewport :

.texte { font-size: calc(100vw / 40);

}

maîtrisez les standards de la création de sites web html5 ... · ce livre sur le langage html5...

Documents