Paris Web 2008 – Samedi 15 Novembre 2008 Pascale Lambert-Charreteur CSS Débutant css.mammouthland.net Vincent Valentin 20cent.net.

Présentation au sujet: "Paris Web 2008 – Samedi 15 Novembre 2008 Pascale Lambert-Charreteur CSS Débutant css.mammouthland.net Vincent Valentin 20cent.net."— Transcription de la présentation:

1 Paris Web 2008 – Samedi 15 Novembre 2008 Pascale Lambert-Charreteur CSS Débutant css.mammouthland.net Vincent Valentin 20cent.net

2 Paris Web 2008 – Samedi 15 Novembre 2008 Optimiser ses CSS ?

3 Paris Web 2008 – Samedi 15 Novembre 2008 Un reset ?

4 Paris Web 2008 – Samedi 15 Novembre 2008 * { padding:0; margin:0; } html, body { padding:0; margin:0; }

5 Paris Web 2008 – Samedi 15 Novembre 2008 Ou : - Le reset d'Éric Meyer : http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/ - Le reset de Y! : http://developer.yahoo.com/yui/reset/http://developer.yahoo.com/yui/reset/ - ou un autre !

6 Paris Web 2008 – Samedi 15 Novembre 2008 L'important est d'obtenir une base de travail cohérente sur chaque navigateur.

7 Paris Web 2008 – Samedi 15 Novembre 2008 YUI propose une approche intéressante : reset + base + font http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css

8 Paris Web 2008 – Samedi 15 Novembre 2008 Donner des noms pertinents aux sélecteurs

9 Paris Web 2008 – Samedi 15 Novembre 2008 #gauche { } #droit { } #menu { } #contenu { }

10 Paris Web 2008 – Samedi 15 Novembre 2008 Mettre des commentaires

11 Paris Web 2008 – Samedi 15 Novembre 2008 /* commentaires */

12 Paris Web 2008 – Samedi 15 Novembre 2008 Regrouper les sélecteurs

13 Paris Web 2008 – Samedi 15 Novembre 2008 h1 { } h2 { } p { } /* menu */ #menu { } #menu h2 { }

14 Paris Web 2008 – Samedi 15 Novembre 2008 Synthétiser les déclarations

15 Paris Web 2008 – Samedi 15 Novembre 2008.class p { font-family:arial, geneva, sans-serif; font-size:100%; font-weight:bold; line-height:30px; }.class p { font:bold 100%/30px arial, geneva, sans-serif; }

16 Paris Web 2008 – Samedi 15 Novembre 2008 background : background-color | background-image | background-repeat | background-attachment | background-position border : border-width | border-style | border- color font : font-style | font-variant | font-weight | font-size/line-height | font-family list-style : list-style-type | list-style- position | list-style-image

17 Paris Web 2008 – Samedi 15 Novembre 2008 Gérer les ordres de priorités

18 Paris Web 2008 – Samedi 15 Novembre 2008 Quelle couleur ? #menu p span { color:red; } #menu span { color:green; } p span.couleur { color:blue; }

19 Paris Web 2008 – Samedi 15 Novembre 2008 La couleur est : rouge

20 Paris Web 2008 – Samedi 15 Novembre 2008 a : attribut style b : nombre d' id c : nombre de class d : nombre d'éléments html [ a b c d ]

21 Paris Web 2008 – Samedi 15 Novembre 2008 #menu p span { color:red; } [ 0 1 0 2 ] #menu span { color:green; } [ 0 1 0 1 ] p span.couleur { color:blue; } [ 0 0 1 2 ]

22 p span.couleur { color:blue !important ; } Quelle couleur ?

23 Paris Web 2008 – Samedi 15 Novembre 2008 Des questions ?