目前比较全的CSS重设.docx
《目前比较全的CSS重设.docx》由会员分享，可在线阅读，更多相关《目前比较全的CSS重设.docx（16页珍藏版）》请在冰豆网上搜索。
目前比较全的CSS重设
目前比较全的CSS重设（reset）方法总结
在当今网页设计/开发实践中，使用CSS来为语义化的（X）HTML标记添加样式风格是重要的关键。
在设计师们的梦想中都存在着这样的一个完美世界:
所有的浏览器都能够理解和适用所有CSS规则，并且呈现相同的视觉效果（没有兼容性问题）。
但是，我们并没有生活在这个完美的世界，现实中发生的事情却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。
当今流行的浏览器（如:
Firefox、Opera、InternetExplorer、Chrome、Safari等等）中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。
更糟的是，有的浏览器完全无视CSS的一些声明和属性。
正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSSReset，什么是CSSReset？
我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。
一.最简化的CSSReset（重设）:
*{
padding:
0;
margin:
0;
}
这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。
*{
padding:
0;
margin:
0;
border:
0;
}
这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。
*{
outline:
0;
padding:
0;
margin:
0;
border:
0;
}
在前两个的基础上添加了outline属性的重设，防止一些冲突。
二.浓缩实用型CSSReset（重设）:
*{
vertical-align:
baseline;
font-weight:
inherit;
font-family:
inherit;
font-style:
inherit;
font-size:
100%;
outline:
0;
padding:
0;
margin:
0;
border:
0;
}
该CSS重设方法出自PerishablePress，这是他常用的方法。
三.PoorMan的CSSReset:
html,body{
padding:
0;
margin:
0;
}
html{
font-size:
1em;
}
body{
font-size:
100%;
}
aimg,:
linkimg,:
visitedimg{
border:
0;
}
这个重设方法将html和body下元素的padding和margin都设为0，并分别为html标签和body标签下的所有元素设置了初始的字体大小，最重要的是把有链接的图片的默认边框去掉了。
四.Siolon’sGlobalReset
*{
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;
}
五.ShaunInman’sGlobalReset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td,embed,object{
padding:
0;
margin:
0;
}
table{
border-collapse:
collapse;
border-spacing:
0;
}
fieldset,img,abbr{
border:
0;
}
address,caption,cite,code,dfn,em,
h1,h2,h3,h4,h5,h6,strong,th,var{
font-weight:
normal;
font-style:
normal;
}
ul{
list-style:
none;
}
caption,th{
text-align:
left;
}
h1,h2,h3,h4,h5,h6{
font-size:
1.0em;
}
q:
before,q:
after{
content:
”;
}
a,ins{
text-decoration:
none;
}
六.Yahoo（YUI）CSSReset:
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;
}
七.EricMeyer’sCSSReset
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:
“”“”;
}
八.CondensedMeyerReset:
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;
}
fieldset,img{
border:
0;
}
table{
border-collapse:
collapse;
border-spacing:
0;
}
ol,ul{
list-style:
none;
}
address,caption,cite,code,dfn,em,strong,th,var{
font-weight:
normal;
font-style:
normal;
}
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;
}
九.AteneuPopularCSSReset
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
*{
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;
}
十一.TantekCelikResetCSS
:
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
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
*{
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
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;
升级会员 