26.2.10

Reinitialiser les css

http://www.guiderdoni.net/Reinitialiser-sa-css.html
Réinitialiser sa css pour ne plus avoir les styles  par défaut des navigateurs

J’ai pris l’habitude de remettre tous les styles à zéro pour être tranquile, et de tous les redéfinir en fonction de mes besoins.

Ils existe deux méthodes qui aboutissent aux mêmes résultats :
La méthode de Yahoo

Cf http://developer.yahoo.com/yui/reset/ YUI Library - Reset - Example : Building a CSS Foundation with YUI Reset
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,
legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;
font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;
font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}
Et la méthode d’Eric Mayer

cf http://meyerweb.com/eric/thoughts/2...
et http://meyerweb.com/eric/tools/css/... ( pour la première mouture)
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

Et je vous mets en pièces jointes 3 fichiers html plus le zip

- Une page sans reset
- Une page avec le reset yahoo
- Une page avec le reset meyer