pour maîtriser les standards du web

Transcription

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

2 Table des matières 1 Les éléments à télécharger sont disponibles à l'adresse suivante : 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. Chapitre 1 Utiliser les Cascading Style Sheets 1. Les objectifs du livre L'évolution des CSS Les modules CSS Les étapes dans la conception des CSS Les préfixes des navigateurs Le site Can I use Les propriétés CSS La structure du livre Les exemples à télécharger Chapitre 2 Créer des feuilles de style CSS 1. L'objectif La syntaxe Les principes Un exemple simple Les règles d'écriture Les règles de nommage Où créer la feuille de style? Les différentes possibilités Dans l'élément HTML Dans la page HTML Dans un fichier CSS

3 2 CSS3 Adoptez les feuilles de style pour maîtriser les standards du web 3.5 La liaison avec <link> La liaison Création, liaisons et importations multiples de règles CSS Les commentaires Les sélecteurs L'utilisation des sélecteurs Le sélecteur universel Les sélecteurs de type Les sélecteurs d'attribut Les sélecteurs d'identification Les sélecteurs de classe Les pseudo-classes dynamiques de lien Les pseudo-classes dynamiques d'action La pseudo-classe de cible La pseudo-classe de langue Les pseudo-classes d'état La pseudo-classe de la racine Les pseudo-classes de premier et dernier enfant La pseudo-classe des premiers enfants La pseudo-classe des derniers enfants Les pseudo-classes du premier et du dernier enfant d'un type Les pseudo-classes des premiers et des derniers enfants d'un type La pseudo-classe des éléments sans frère La pseudo-classe des éléments sans frère d'un type La pseudo-classe des éléments vides La pseudo-classe de négation Les pseudo-éléments Les combinaisons de sélecteurs L'utilisation des combinaisons Les sélecteurs descendants Le sélecteur d'enfants Le sélecteur d'enfants adjacents

4 Table des matières Le sélecteur d'enfant général Les groupes de sélecteurs L'héritage dans l'imbrication des éléments La cascade dans l'application des propriétés L'utilisation de la cascade L'ordre de la cascade Deuxième niveau : la règle d'importance Troisième niveau : la spécificité des sélecteurs Quatrième niveau : la proximité des sélecteurs Les unités utilisées dans les CSS L'utilisation des unités Les unités numériques Les unités de mesure absolues Les unités de mesure relatives D'autres unités Les couleurs L'utilisation des couleurs La notation nominale La notation hexadécimale La notation RGB La notation HSL Les adresses Internet Chapitre 3 Les polices 1. L'objectif L'application des polices de caractères Les polices locales

5 4 CSS3 Adoptez les feuilles de style pour maîtriser les standards du web 4. Les polices embarquées Les formats des polices La Le nom des polices Les polices embarquées locales Indiquer plusieurs formats Les styles typographiques Les polices en ligne Les Google Fonts La graisse des caractères La largeur des caractères Le style des caractères La taille des caractères Ajuster la taille des caractères Les petites capitales La propriété générique La couleur des caractères Les décalages des caractères D'autres propriétés à venir Chapitre 4 Le texte 1. L'objectif Les modes d'écriture L'espacement entre les lettres L'espacement entre les mots La décoration La propriété CSS Les propriétés CSS

6 Table des matières L'ombre portée La casse du texte L'alignement du texte Le retrait de première ligne L'interligne Les espaces blancs Les tabulations Les ruptures et la césure Les ruptures de lignes Les ruptures de mots La césure Définir les césures Les exceptions de césure Le contenu généré Le contenu textuel avant et après Les compteurs Les CSS Le débordement du texte Chapitre 5 Les listes 1. L'objectif Les styles des marques Les marques avec des images La position des marques La syntaxe courte Les CCS

7 6 CSS3 Adoptez les feuilles de style pour maîtriser les standards du web Chapitre 6 Les tableaux et les formulaires 1. L'objectif Les tableaux La largeur des tableaux Les bordures des tableaux L'espace entre les cellules La gestion des cellules vides Les formulaires La mise en forme Redimensionner un champ Des pseudo-classes pour les formulaires Les champs requis et optionnels La mise en forme du focus La validation des saisies Chapitre 7 L'interface utilisateur 1. L'objectif Les contours dynamiques Les curseurs Les propriétés à risques Chapitre 8 Les boîtes 1. L'objectif Le modèle des boîtes La structure des boîtes Les différents types d'affichage

8 Table des matières La propriété d'affichage des boîtes L'affichage de la boîte Les largeur et hauteur de la boîte Les largeur et hauteur standards Spécifier le calcul de la largeur Le remplissage interne Les marges externes Les propriétés La fusion des marges Un exemple de marges fixes Un exemple de marges en auto Le débordement du contenu Les bordures Les propriétés Les styles de la bordure L'épaisseur de la bordure La couleur de la bordure La propriété générique des bordures Les bordures fantaisistes Les coins arrondis Les coins avec des cercles Les coins avec des ellipses Les arrière-plans Les couleurs d'arrière-plan Les dégradés d'arrière-plan Les images d'arrière-plan Les autres propriétés d arrière-plan Les ombres portées Le positionnement des boîtes

9 8 CSS3 Adoptez les feuilles de style pour maîtriser les standards du web 13. Les boîtes flottantes La propriété de flottement Un exemple simple de flottement Un exemple plus élaboré de flottement Interdire le flottement Les boîtes positionnées La propriété de positionnement La position relative La position fixe La position absolue Chapitre 9 Le Responsive Web Design 1. L'objectif Les requêtes de média La recommandation du W3C Les critères des requêtes de média La syntaxe des requêtes de média Les valeurs minimales et maximales Les opérateurs logiques La taille des écrans La taille physique et l'affichage Les zooms à l écran Deux sites de référence pour la taille des écrans Un exemple d un site simple La structure du site Réaliser un design adaptatif simple Les affichages Des images adaptatives

10 Table des matières 9 Chapitre 10 Les modules CSS3 de mise en page 1. L'objectif Le module Multi-column Layout L'objectif du module La mise en place des colonnes La mise en place des gouttières La mise en place des sauts de colonnes La répartition sur plusieurs colonnes Le module Flexible Box Layout L'objectif du module Les boîtes flexibles L'orientation et le sens des boîtes Le débordement des boîtes L'alignement horizontal des boîtes L'alignement vertical des boîtes Les propriétés de flexibilité Le module Shapes L'objectif du module L'habillage par une forme Le module Masking L'objectif du module Masquer une partie de l'image Chapitre 11 Les modules CSS3 en travaux 1. L'objectif Le module Animations L'objectif du module La construction des animations Animer une forme

11 10 CSS3 Adoptez les feuilles de style pour maîtriser les standards du web 3. Le module Transforms L'objectif du module Des exemples de transformation Un exemple de galerie de Polaroid Le module Transitions L'objectif du module Mettre en place les transitions Un exemple d un menu interactif Chapitre 12 Des exemples de mise en page 1. L'objectif La mise en page en boîtes flottantes L'objectif Le conteneur général L'en-tête Le logo, le slogan et le champ de recherche La navigation La zone centrale Le pied de page Le code complet de cet exemple Les inconvénients La mise en page en tableau L'objectif La structure du tableau Les cellules du tableau Les contenus du tableau L'affichage et les avantages

12 Table des matières La mise en page adaptative L'objectif Installer le framework La grille de Kube La grille de notre exemple Les sélecteurs universels Les sélecteurs des lignes Les sélecteurs des blocs L'adaptation aux petits écrans Index

13 137 Chapitre 5 Les listes 1. L'objectif Les listes Nous allons voir dans ce chapitre toutes les propriétés CSS s'appliquant aux listes. 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 des marques d'énumération. list-style-position qui permet d'indiquer la position de la marque d'énumération par rapport au texte. 2. Les styles des marques La propriété list-style-type va vous permettre de choisir quel type de marque d'énumération vous souhaitez pour vos listes : à puces ou numéroté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

14 138 CSS3 Adoptez les feuilles de style pour maîtriser les standards du web 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, 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 romains majuscules 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 { Editions ENI - All rights reserved

15 Les listes Chapitre 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 sorte que 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

16 140 CSS3 Adoptez les feuilles de style pour maîtriser les standards du web S'applique à : éléments de type liste 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. Vous notez 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> <meta charset="utf-8" /> <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> Voici l'affichage obtenu : 4. La position des marques La propriété list-style-position permet d'indiquer si la marque d'énumération se trouve "dans" la liste, quand le texte se trouve sur plusieurs lignes, ou "hors" de la liste. Editions ENI - All rights reserved

17 Les listes Chapitre Propriété : list-style-position Valeur : inside outside Valeur initiale : outside S'applique à : éléments de type liste 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 marque dans la liste et une autre avec la marque hors de la liste. <!DOCTYPE html> <html lang="fr"> <head> <title>les positions des marques</title> <meta charset="utf-8" /> <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>

18 142 CSS3 Adoptez les feuilles de style pour maîtriser les standards du web </ol> </body> </html> Voici l'affichage obtenu : 5. La syntaxe courte La propriété list-style est la syntaxe courte permettant de regrouper en une 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 S'applique à : éléments de type liste Héritée : oui Editions ENI - All rights reserved