guiderdoni.net

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

Accueil du site > 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

Réinitialiser sa css Une page sans reset
- Une page avec le reset yahoo
- Une page avec le reset meyer



Page sans resetPage sans reset
Page avec le reset yahooPage avec le reset yahoo
Page avec le reset MayerPage avec le reset Mayer
ResetReset

Forum

Répondre à cet article

2005-2008 - Contenu en GPL http://www.guiderdoni.net - Site réalisé avec SPIP  1.9.2c
rechercher - plan du site - prive - webmaster@guiderdoni.net
CSS - XHTML - squelette - 33700