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

Transcription

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 26 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 29 1/12

2 3.3 Dans la page HTML Dans un fichier CSS 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 63 2/12

3 6.3 Le sélecteur d'enfants Le sélecteur d'enfants adjacents 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 79 Les polices 1. L'objectif 81 3/12

4 2. L'application des polices de caractères Les polices locales 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 101 4/12

5 14. Les décalages des caractères D'autres propriétés à venir 103 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 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 120 5/12

6 12. 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 134 Les listes 1. L'objectif Les styles des marques Les marques avec des images La position des marques La syntaxe courte Les CCS3 143 Les tableaux et les formulaires 6/12

7 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 160 L'interface utilisateur 1. L'objectif Les contours dynamiques Les curseurs Les propriétés à risques 171 Les boîtes 1. L'objectif 173 7/12

8 2. Le modèle des boîtes La structure des boîtes Les différents types d'affichage 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 201 8/12

9 10. 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 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 220 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 226 9/12

10 3. 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 242 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é /12

11 4. 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 272 Les modules CSS3 en travaux 1. L'objectif Le module Animations L'objectif du module La construction des animations Animer une forme 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 290 Des exemples de mise en page 1. L'objectif /12

12 2. 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 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 323 Index /12