1.

• • Pascale Lambert-Charreteur

• • CSS Dbutant

• • css.mammouthland.net

• • Vincent Valentin

• • 20cent.net

2. Optimiser ses CSS ? 3. Un reset ? 4.

*{

padding : 0 ;

margin : 0 ;

}

html, body{

padding : 0 ;

margin : 0 ;

}

5. Ou : - Le reset d'ric Meyer :http://meyerweb.com/eric/tools/css/reset/ - Le reset de Y! :http://developer.yahoo.com/yui/reset/ - ou un autre ! 6. L'important est d'obtenir une base de travail cohrente sur chaque navigateur. 7. YUI propose une approche intressante : reset + base + font http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css 8. Donner des noms pertinents aux slecteurs 9.

#gauche {

}

#droit {

}

#menu {

}

#contenu {

}

10. Mettre des commentaires 11.

/*commentaires*/

12. Regrouper les slecteurs 13.

h1{

}

h2{

}

p{

}

/*menu*/

#menu{

}

#menu h2{

}

14. Synthtiser les dclarations 15.

.class p{

font-family :arial, geneva, sans-serif;

font-size :100%;

font-weight :bold;

line-height :30px;

}

.classp{

font: bold 100%/30px arial, geneva, sans-serif;

}

16.

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. Grer les ordres de priorits 18.

• • • Quelle couleur ?

#menu p span{

color : red;

}

#menu span {

color : green;

}

p span .couleur{

color : blue;

}

19.

La couleur est :

rouge

20.

a: attributstyle

b: nombre d' id

c: nombre declass

d: nombre d'lmentshtml

[a bc d]

21.

#menu p span{

color : red;

}

[0 10 2]

#menu span {

color : green;

}

[0 10 1]

p span .couleur{

color : blue;

}

[0 01 2]

22.

p span .couleur{

color : blue!important;

}

Quellecouleur?

23. Des questions ?