guiderdoni.net

Bloc notes : spip, css, xhtml, web, standards, mac ...

Accueil > web > Réinitialiser sa css

Articles de cette rubrique

Articles

publie le vendredi 30 mai 2008 par Alexandra

Réinitialiser sa css

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

titre documents joints

Reset Reset Zip 15.4 ko

Page sans reset Page sans reset HTML 13.8 ko

Page avec le reset yahoo Page avec le reset yahoo HTML 14.8 ko

Page avec le reset Mayer Page avec le reset Mayer HTML 14.8 ko

Forum

Répondre à cet article

2005-2017 - Contenu en GPL http://www.guiderdoni.net - Site réalisé avec SPIP 
rechercher - plan du site - prive - alexandra.guiderdoni@gmail.com
CSS - XHTML - squelette