Download - Atelier "Optimiser ses CSS" ParisWeb 2008
Transcript
- 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 ?