注册 登录
> CSS

CSS Reset

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

一、GenericResetCSS

Example Source Code [www.52css.com]
*{
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}

三、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;
}

四、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;
}

五、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:"""";
}

六、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}

七、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;
}

八、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;
}

九、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
}

十、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;}

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

CSS Reset


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧，站长会非常 感谢您的哦！！！

发表我的评论
最新评论 总共0条评论