Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Le Campus Maîtrise des CSS 2e édition Andy Budd avec Cameron Mall et Simon Coll

Le Campus Maîtrise des CSS 2e édition Andy Budd avec Cameron Mall et Simon Collison Maîtrise des CSS Pearson Education France a apporté le plus grand soin à la réalisation de ce livre afin de vous fournir une information complète et fiable. Cependant, Pearson Education France n’assume de responsabilités, ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation. Les exemples ou les programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théo- riques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle. Pearson Education France ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature que ce soit pouvant résulter de l’utilisation de ces exemples ou programmes. Tous les noms de produits ou autres marques cités dans ce livre sont des marques déposées par leurs proprié- taires respectifs. Publié par Pearson Education France 47 bis, rue des Vinaigriers 75010 PARIS Tél. : 01 72 74 90 00 www.pearson.fr Mise en pages : TyPAO ISBN : 978-2-7440-4130-3 Copyright © 2010 Pearson Education France Tous droits réservés Aucune représentation ou reproduction, même partielle, autre que celles prévues à l’article L. 122-5 2˚ et 3˚ a) du code de la propriété intellectuelle ne peut être faite sans l’autorisation expresse de Pearson Education France ou, le cas échéant, sans le respect des modalités prévues à l’article L. 122-10 dudit code. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. Titre original : CSS Mastery, Advanced Web Standards Solutions, second edition Traduit par Patrick Fabre, avec la contribution de Bruno Sebarte ISBN original : 978-1-4302-2397-9 Copyright © 2009 by Andy Budd, Simon Collison, and Cameron Moll All rights reserved Édition originale publiée par FriendsofEd/Apress (www.friendsofed.com/www.apress.com) Maîtrise des CSS Andy Budd avec Cameron Moll et Simon Collison Avant-propos. ................................................................................................................ IX À propos des auteurs.............................................................................................. XI À propos des réviseurs techniques ............................................................................ XII Remerciements............................................................................................................ XIII Introduction. .................................................................................................................. 1 À qui ce livre est-il destiné ?. ....................................................................................... 1 Structure du livre. ............................................................................................................. 2 Conventions utilisées...................................................................................................... 2 1 Les fondations. ............................................................................................................. 5 Structuration du code. ..................................................................................................... 5 Historique rapide du balisage.................................................................................. 6 Types de document, commutation de DOCTYPE . et modes des navigateurs.......................................................................................... 19 Validation. ..................................................................................................................... 19 En résumé........................................................................................................................... 22 2 Des styles qui atteignent leur cible. .............................................................. 23 Les sélecteurs courants ................................................................................................. 23 Pseudo-classes............................................................................................................. 24 Le sélecteur universel .................................................................................................... 25 Les sélecteurs avancés.................................................................................................... 25 Sélecteur d’enfants et sélecteur de frère adjacent. .............................................. 26 Sélecteur d’attribut..................................................................................................... 27 Cascade et spécificité. ................................................................................................ 30 Héritage. ........................................................................................................................ 34 Planification, organisation et gestion des feuilles de styles . ............................. 35 Application de styles aux documents.................................................................... 35 Guides de styles.......................................................................................................... 40 En résumé........................................................................................................................... 42 Table des matières IV Maîtrise des CSS 3 Vue d’ensemble du modèle de formatage visuel................................ 43 Récapitulatif sur le modèle de boîte ......................................................................... 43 Internet Explorer et le modèle de boîte . ............................................................... 45 Effondrement des marges......................................................................................... 46 Récapitulatif concernant le positionnement . .......................................................... 48 Le modèle de formatage visuel............................................................................... 48 Positionnement relatif .............................................................................................. 49 Positionnement absolu. .............................................................................................. 50 Flottement. .................................................................................................................... 52 En résumé .......................................................................................................................... 58 4 Utilisation des effets d’arrière‑plan. ............................................................... 61 Notions de base sur les images d’arrière-plan ...................................................... 61 Boîtes à bords arrondis. .................................................................................................. 64 Boîtes à largeur fixe et bords arrondis. .................................................................. 64 Coins masqués. ............................................................................................................ 70 Ombres portées................................................................................................................. 75 Ombres portées simples en CSS . ........................................................................... 75 Ombres portées "à la Clagnut"................................................................................ 77 Opacité. ................................................................................................................................ 80 Opacité CSS . ............................................................................................................... 80 Remplacement d’images .............................................................................................. 85 Remplacement des images de Fahrner.................................................................. 86 Phark.............................................................................................................................. 87 Méthode IFR évolutive. ............................................................................................. 87 En résumé........................................................................................................................... 89 5 Mise en forme des liens. ........................................................................................ 91 Mise en forme simple des liens................................................................................... 91 Soulignements amusants............................................................................................... 93 Embellissement simple des liens............................................................................ 93 Soulignement de liens originaux............................................................................ 94 Style de liens visités. .................................................................................................. 94 Mise en forme des cibles des liens......................................................................... 95 Différenciation des types de liens. .......................................................................... 96 Signalement de documents téléchargeables et de flux...................................... 98 V Table des matières Création de liens qui ressemblent à des boutons ............................................... 99 Survol simple............................................................................................................... 100 Survol avec images ................................................................................................... 101 Survol style Pixy. ........................................................................................................ 102 Sprites CSS ................................................................................................................. 103 Survol CSS 3. ............................................................................................................... 104 Info-bulles CSS ............................................................................................................... 106 En résumé........................................................................................................................... 108 6 Mise en forme des listes et création de barres de navigation. ... 109 Mise en forme de base des listes. ................................................................................ 109 Création d’une barre de navigation verticale . ........................................................ 110 Signaler la page courante dans la barre de navigation ....................................... 113 Création d’une barre de navigation horizontale simple ..................................... 114 Création d’une barre de navigation graphique ...................................................... 116 Système de navigation élastique à onglets ............................................................. 118 Menus déroulants Suckerfish ...................................................................................... 120 Cartes-images CSS . ........................................................................................................ 123 Cartes-images à la mode Flickr. .............................................................................. 126 Survol distant. .................................................................................................................... 132 Note à propos des listes de définitions . .................................................................... 136 En résumé........................................................................................................................... 137 7 Mise en forme des formulaires et des tableaux de données. ...... 139 Mise en forme des tableaux de données . ................................................................. 139 Éléments spécifiques des tableaux ........................................................................ 141 Balisage des tableaux de données ......................................................................... 142 Mise en forme du tableau ........................................................................................ 143 Ajout de style visuel.................................................................................................. 144 Mise en forme simple de formulaires ...................................................................... 146 Éléments de formulaire utiles . ................................................................................ 147 Disposition de base ................................................................................................... 148 Autres éléments . ......................................................................................................... 150 Embellissements......................................................................................................... 151 Mise en forme complexe de formulaire. ................................................................... 153 VI Maîtrise des CSS Champ de date accessible . ....................................................................................... 154 Cases à cocher multicolonnes. ................................................................................. 155 Retour de formulaire . ................................................................................................ 158 En résumé........................................................................................................................... 160 8 Mise en page. ................................................................................................................ 161 Planification de la mise en page . ................................................................................ 161 Les premières fondations.............................................................................................. 164 Centrage d’une mise en page à l’aide des marges. ............................................. 165 Mises en page flottantes. ................................................................................................ 167 Mise en page flottante à deux colonnes ............................................................... 167 Mise en page flottante à trois colonnes ................................................................ 170 Mises en page à largeur fixe, liquide et élastique ................................................ 172 Mises en page liquides.............................................................................................. 173 Mises en page élastiques. .......................................................................................... 176 Images liquides et élastiques. ....................................................................................... 178 Fausses colonnes ............................................................................................................. 180 Colonnes de hauteurs égales........................................................................................ 183 Colonnes CSS 3 . .............................................................................................................. 187 Frameworks CSS et systèmes CSS............................................................................ 188 En résumé........................................................................................................................... 191 9 Bogues et correctifs. ................................................................................................. 193 La chasse aux bogues .................................................................................................... 193 Problèmes CSS courants. .......................................................................................... 194 Les fondamentaux de la chasse aux bogues. ........................................................... 198 Essayer d’éviter les bogues par avance !.............................................................. 200 Isoler le problème . ..................................................................................................... 200 Créer des cas de test minimaux. .............................................................................. 201 Résoudre le problème, pas le symptôme.............................................................. 202 Demander de l’aide.................................................................................................... 202 Avoir ou ne pas avoir un "layout"…. ......................................................................... 203 Qu’est-ce que le "layout" ?...................................................................................... 203 Quel effet résulte du layout ?. .................................................................................. 204 Solutions de contournement......................................................................................... 206 Les commentaires conditionnels d’Internet Explorer ...................................... 206 VII Table des matières Avertissement concernant les hacks et les filtres................................................ 207 Utiliser les hacks et les filtres avec raison............................................................ 208 Appliquer le filtre passe-bande pour Internet Explorer version Mac ........... 209 Le hack de l’étoile HTML ...................................................................................... 209 Appliquer le hack du sélecteur d’enfants............................................................. 210 Bogues et correctifs courants....................................................................................... 211 Bogue de la double marge des éléments flottants. .............................................. 211 Bogue du décalage de texte de 3 pixels................................................................ 211 Bogue des caractères dupliqués d’Internet Explorer 6 .................................... 213 Bogue du coucou d’Internet Explorer 6 . .............................................................. 214 Positionnement absolu dans un conteneur relatif .............................................. 215 Cesser de se référer à Internet Explorer. ............................................................... 216 Prise en charge graduelle des navigateurs .............................................................. 217 En résumé........................................................................................................................... 219 10 Étude de cas : Roma Italia................................................................................... 221 À propos de cette étude de cas ................................................................................... 221 Les fondations................................................................................................................... 223 Un œil rivé sur le HTML 5. ...................................................................................... 223 reset.css......................................................................................................................... 225 La mise en page et la grille à 1 080 pixels. .............................................................. 226 Utilisation des grilles pour la conception web ................................................... 228 Fonctionnalités CSS 2 et CSS 3 avancées............................................................... 230 Les sites doivent-ils être identiques dans tous les navigateurs ?.................... 230 Sélecteur d’attribut .................................................................................................... 232 box-shadow, RGBa et text-overflow. ...................................................................... 234 Liaison des polices et typographie web améliorée............................................... 237 Définir font-size comme en 1999. ........................................................................... 237 Ponctuation hors justification.................................................................................. 238 Affichage du texte sur plusieurs colonnes . .......................................................... 240 @font-face.................................................................................................................... 241 Cufón, étape intermédiaire avant @font-face...................................................... 245 Interactivité avec Ajax et jQuery................................................................................ 247 Ajax . .............................................................................................................................. 247 jQuery............................................................................................................................ 248 VIII Maîtrise des CSS Utilisation d’Ajax et de jQuery pour la fonctionnalité de recherche ........... 249 En résumé .......................................................................................................................... 251 11 Étude de cas : Climb the Mountains............................................................ 253 À propos de cette étude de cas ................................................................................... 253 Organisation et conventions de la feuille de styles . ............................................. 255 La laborieuse feuille screen.css. .............................................................................. 256 Réinitialisation ........................................................................................................... 257 Feuilles de styles Internet Explorer utilisant . des commentaires conditionnels............................................................................. 258 Flexibilité de la grille. ..................................................................................................... 258 Fonctionnement de la mise en page du site CTM ............................................. 259 Contrôle de la navigation avec les classes de l’élément body . ......................... 260 Mise en valeur de la page courante........................................................................ 260 Mise en forme de la citation.................................................................................... 263 Ciblage stratégique des éléments. ............................................................................... 264 Sélecteurs descendants profonds ........................................................................... 264 uploads/S4/ maitrise-des-css-pdf.pdf