CSS Reset

CSS Reset是指重设浏览器的样式。在52CSS.com以前的文章中，也介绍过相似的知识，但不够深入，今天我们看十个CSS Reset方法的例子，学习这种方法的应用。
　　在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。

一、Generic Reset CSS

Example Source Code[www.52css.com]

* { 
padding: 0; 
margin: 0; 
border: 0; 
}

　　这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。

二、Ateneu Popular CSS Reset

Example Source Code[www.52css.com]

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; 
} 
:focus { outline: 0;} 
a, a:link, a:visited, a:hover, a:active{text-decoration:none} 
table { border-collapse: separate;border-spacing: 0;} 
th, td {text-align: left; font-weight: normal;} 
img, iframe {border: none; text-decoration:none;} 
ol, ul {list-style: none;} 
input, textarea, select, button {font-size: 100%;font-family: inherit;} 
select {margin: inherit;} 
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

三、Chris Poteet’s Reset CSS

Example Source Code[www.52css.com]

* { 
vertical-align: baseline; 
font-family: inherit; 
font-style: inherit; 
font-size: 100%; 
border: none; 
padding: 0; 
margin: 0; 
} 
body { 
padding: 5px; 
} 
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { 
margin: 20px 0; 
} 
li, dd, blockquote { 
margin-left: 40px; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
}

 
四、Yahoo’s CSS Reset

Example Source Code[www.52css.com]

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,   
form,fieldset,input,textarea,p,blockquote,th,td {   
    padding: 0;   
    margin: 0;   
}   
table {   
    border-collapse: collapse;   
    border-spacing: 0;   
}   
fieldset,img {   
    border: 0;   
}   
address,caption,cite,code,dfn,em,strong,th,var {   
    font-weight: normal;   
    font-style: normal;   
}   
ol,ul {   
    list-style: none;   
}   
caption,th {   
    text-align: left;   
}   
h1,h2,h3,h4,h5,h6 {   
    font-weight: normal;   
    font-size: 100%;   
}   
q:before,q:after {   
    content:'';   
}   
abbr,acronym { border: 0;   
}  

五、Eric Meyer Reset CSS

Example Source Code[www.52css.com]

html, body, div, span, applet, object, iframe, table, caption, 
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend { 
vertical-align: baseline; 
font-family: inherit; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
outline: 0; 
padding: 0; 
margin: 0; 
border: 0; 
} 
:focus { 
outline: 0; 
} 
body { 
background: white; 
line-height: 1; 
color: black; 
} 
ol, ul { 
list-style: none; 
} 
table { 
border-collapse: separate; 
border-spacing: 0; 
} 
caption, th, td { 
font-weight: normal; 
text-align: left; 
} 
blockquote:before, blockquote:after, q:before, q:after { 
content: ""; 
} 
blockquote, q { 
quotes: "" ""; 
}

六、Tantek Celik Reset CSS

Example Source Code[www.52css.com]

:link,:visited { text-decoration:none } 
ul,ol { list-style:none } 
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } 
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input 
{ margin:0; padding:0 } 
a img,:link img,:visited img { border:none } 
address { font-style:normal }

七、Christian Montoya Reset CSS

Example Source Code[www.52css.com]

html, body, form, fieldset { 
margin: 0; 
padding: 0; 
font: 100%/120% Verdana, Arial, Helvetica, sans-serif; 
} 
h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address { 
margin: 1em 0; 
padding: 0; 
} 
li, dd, blockquote { 
margin-left: 1em; 
} 
form label { 
cursor: pointer; 
} 
fieldset { 
border: none; 
} 
input, select, textarea { 
font-size: 100%; 
font-family: inherit; 
}

八、Rudeworks Reset CSS

Example Source Code[www.52css.com]

* { 
margin: 0; 
padding: 0; 
border: none; 
} 
html { 
font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif; 
text-shadow: #000 0px 0px 0px; 
} 
ul { 
list-style: none; 
list-style-type: none; 
} 
h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address { 
font-weight: normal; 
margin: 0 0 1em 0; 
} 
cite, em, dfn { 
font-style: italic; 
} 
sup { 
position: relative; 
bottom: 0.3em; 
vertical-align: baseline; 
} 
sub { 
position: relative; 
bottom: -0.2em; 
vertical-align: baseline; 
} 
li, dd, blockquote { 
margin-left: 1em; 
} 
code, kbd, samp, pre, tt, var, input[type='text'], textarea { 
font-size: 100%; 
font-family: monaco, "Lucida Console", courier, mono-space; 
} 
del { 
text-decoration: line-through; 
} 
ins, dfn { 
border-bottom: 1px solid #ccc; 
} 
small, sup, sub { 
font-size: 85%; 
} 
abbr, acronym { 
text-transform: uppercase; 
font-size: 85%; 
letter-spacing: .1em; 
border-bottom-style: dotted; 
border-bottom-width: 1px; 
} 
a abbr, a acronym { 
border: none; 
} 
sup { 
vertical-align: super; 
} 
sub { 
vertical-align: sub; 
} 
h1 { 
font-size: 2em; 
} 
h2 { 
font-size: 1.8em; 
} 
h3 { 
font-size: 1.6em; 
} 
h4 { 
font-size: 1.4em; 
} 
h5 { 
font-size: 1.2em; 
} 
h6 { 
font-size: 1em; 
} 
a, a:link, a:visited, a:hover, a:active { 
outline: 0; 
text-decoration: none; 
} 
a img { 
border: none; 
text-decoration: none; 
} 
img { 
border: none; 
text-decoration: none; 
} 
label, button { 
cursor: pointer; 
} 
input:focus, select:focus, textarea:focus { 
background-color: #FFF; 
} 
fieldset { 
border: none; 
} 
.clear { 
clear: both; 
} 
.float-left { 
float: left; 
} 
.float-right { 
float: right; 
} 
body { 
text-align: center; 
} 
#wrapper { 
margin: 0 auto; 
text-align: left; 
}

九、Anieto2K Reset CSS

Example Source Code[www.52css.com]

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, 
center, u, b, i { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-weight: normal; 
font-style: normal; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline 
} 
body { 
line-height: 1 
} 
:focus { 
outline: 0 
} 
ol, ul { 
list-style: none 
} 
table { 
border-collapse: collapse; 
border-spacing: 0 
} 
blockquote:before, blockquote:after, q:before, q:after { 
content: "" 
} 
blockquote, q { 
quotes: "" "" 
} 
input, textarea { 
margin: 0; 
padding: 0 
} 
hr { 
margin: 0; 
padding: 0; 
border: 0; 
color: #000; 
background-color: #000; 
height: 1px 
}

十、CSSLab CSS Reset

Example Source Code[www.52css.com]

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; 
} 
:focus { 
outline: 0; 
} 
table { 
border-collapse: separate; 
border-spacing: 0; 
} 
caption, th, td { 
text-align: left; 
font-weight: normal; 
} 
a img, iframe { 
border: none; 
} 
ol, ul { 
list-style: none; 
} 
input, textarea, select, button { 
font-size: 100%; 
font-family: inherit; 
} 
select { 
margin: inherit; 
} 
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */ 
ol { margin-left:2em; } 
/* == clearfix == */ 
.clearfix:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 
.clearfix {display: inline-block;} 
* html .clearfix {height: 1%;} 
.clearfix {display: block;}

　　这些都大同小异，需求不同，方法也就不同。我自己偏向于喜欢Yahoo的CSS Reset，也用了Yahoo的代码。