CSS代码分享

CSS代码分享：浏览器CSS Reset方法十例-WEB标准+兼容教程

来源:我爱CSS　作者:52CSS　更新时间:2009-09-24　点击: 47次

　　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

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

* { 
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

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

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

: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

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

* { 
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

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

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的代码。你，有自己的CSS Reset体系吗？或许可以分享出来，在52CSS.com发表评论，说说您的经验吧！