CSSReset是指重設瀏覽器的樣式。在52CSS.com以前的文章中，也介紹過相似的知識，但不夠深入，今天我們看十個CSSReset方法的例子，學習這種方法的應用。
在各種瀏覽器中，都會對CSS的選擇器默認一些數值，譬如當h1沒有被設置數值時，顯示一定大小。但并不是所有的瀏覽器都使用一樣的數值，所以有了CSSReset，以讓網頁的樣式在各瀏覽器中表現一致。
一、GenericResetCSS
這也是一款CSSReset的方法，讓所有的選擇器的padding、margin和border都設置成0。這是一種強大的方法，也是最簡單，最安全的方法，不過，也是最占用資源的方法。對于小型的網站來說，用這個并不會帶來大的資源浪費，但如果是像Yahoo這種架構非常大的網站，剛需要有選擇地進行CSS重設，以減少資源浪費。
二、AteneuPopularCSSReset
三、ChrisPoteet’sResetCSS
四、Yahoo’sCSSReset
五、EricMeyerResetCSS
六、TantekCelikResetCSS
七、ChristianMontoyaResetCSS
八、RudeworksResetCSS
九、Anieto2KResetCSS
十、CSSLabCSSReset
這些都大同小異，需求不同，方法也就不同。我自己偏向于喜歡Yahoo的CSSReset，也用了Yahoo的代碼。
在各種瀏覽器中，都會對CSS的選擇器默認一些數值，譬如當h1沒有被設置數值時，顯示一定大小。但并不是所有的瀏覽器都使用一樣的數值，所以有了CSSReset，以讓網頁的樣式在各瀏覽器中表現一致。
一、GenericResetCSS
Example Source Code
[www.52css.com]
*{
padding:0;
margin:0;
border:0;
}
padding:0;
margin:0;
border:0;
}
這也是一款CSSReset的方法，讓所有的選擇器的padding、margin和border都設置成0。這是一種強大的方法，也是最簡單，最安全的方法，不過，也是最占用資源的方法。對于小型的網站來說，用這個并不會帶來大的資源浪費，但如果是像Yahoo這種架構非常大的網站，剛需要有選擇地進行CSS重設，以減少資源浪費。
二、AteneuPopularCSSReset
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}
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}
三、ChrisPoteet’sResetCSS
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:20px0;
}
li,dd,blockquote{
margin-left:40px;
}
table{
border-collapse:collapse;
border-spacing:0;
}
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:20px0;
}
li,dd,blockquote{
margin-left:40px;
}
table{
border-collapse:collapse;
border-spacing:0;
}
四、Yahoo’sCSSReset
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;
}
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;
}
五、EricMeyerResetCSS
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:"""";
}
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:"""";
}
六、TantekCelikResetCSS
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}
aimg,:linkimg,:visitedimg{border:none}
address{font-style:normal}
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}
aimg,:linkimg,:visitedimg{border:none}
address{font-style:normal}
七、ChristianMontoyaResetCSS
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:1em0;
padding:0;
}
li,dd,blockquote{
margin-left:1em;
}
formlabel{
cursor:pointer;
}
fieldset{
border:none;
}
input,select,textarea{
font-size:100%;
font-family:inherit;
}
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:1em0;
padding:0;
}
li,dd,blockquote{
margin-left:1em;
}
formlabel{
cursor:pointer;
}
fieldset{
border:none;
}
input,select,textarea{
font-size:100%;
font-family:inherit;
}
八、RudeworksResetCSS
Example Source Code
[www.52css.com]
*{
margin:0;
padding:0;
border:none;
}
html{
font:62.5%"LucidaGrande",Lucida,Verdana,sans-serif;
text-shadow:#0000px0px0px;
}
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:001em0;
}
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,"LucidaConsole",courier,mono-space;
}
del{
text-decoration:line-through;
}
ins,dfn{
border-bottom:1pxsolid#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;
}
aabbr,aacronym{
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;
}
aimg{
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:0auto;
text-align:left;
}
margin:0;
padding:0;
border:none;
}
html{
font:62.5%"LucidaGrande",Lucida,Verdana,sans-serif;
text-shadow:#0000px0px0px;
}
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:001em0;
}
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,"LucidaConsole",courier,mono-space;
}
del{
text-decoration:line-through;
}
ins,dfn{
border-bottom:1pxsolid#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;
}
aabbr,aacronym{
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;
}
aimg{
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:0auto;
text-align:left;
}
九、Anieto2KResetCSS
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
}
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
}
十、CSSLabCSSReset
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;
}
aimg,iframe{
border:none;
}
ol,ul{
list-style:none;
}
input,textarea,select,button{
font-size:100%;
font-family:inherit;
}
select{
margin:inherit;
}
/*Fixesincorrectplacementofnumbersinol’sinIE6/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;}
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;
}
aimg,iframe{
border:none;
}
ol,ul{
list-style:none;
}
input,textarea,select,button{
font-size:100%;
font-family:inherit;
}
select{
margin:inherit;
}
/*Fixesincorrectplacementofnumbersinol’sinIE6/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的CSSReset，也用了Yahoo的代碼。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
