Css Reset(复位)整理

来源：互联网发布：道德经在国外知乎编辑：程序博客网时间：2024/05/16 13:59

本文转至：http://www.cnblogs.com/mofish/archive/2010/06/30/1768530.html

Css Reset是什么? 有些同行叫 "css复位",有些可能叫 "默认css".....
相信看完全文您会对Css Reset有个重新的认识

原文地址:
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

PS：

1
2
3
4
*{  
 padding:0;  
 margin:0;  
 }

这就是最常用的Css Reset，但是这里会有很多问题。

原文前部分说了很多关于Css,以及各浏览器的css规则的不同,而制定"CssReset"也是为了兼容与统一,正确有效的使用"Css Reset"可以在某种程度上节约时间与金钱.

非常感谢Perishable的整理与归纳

下面是关于几类Css Reset的简单介绍,本人能力有限.只能理解大概意思,还请各位看官见谅.

Minimalistic Reset [ Version 1 ]
相信这一段你经常看到.而且也是我们经常用到的

*{
padding:0;
margin:0;
}

Minimalistic Reset [ Version 2 ]
border:0的设计有些不靠谱了

来源：(http://blog.sina.com.cn/s/blog_5d8975f30100f7j6.html) - Css Reset(复位)整理_沫鱼_新浪博客

1
2
3
4
5
*{  
 padding:0;  
 margin:0;  
 border:0;  
 }

Minimalistic Reset [ Version 3 ]
当然这个也是不推荐的.会跟某些默认样式有冲突

1
2
3
4
5
6
*{  
 outline:0;  
 padding:0;  
 margin:0;  
 border:0;  
 }  

Condensed Universal Reset
这是作者当前比较钟意的一种写法.保证了相对普遍浏览器样式的统一性.

1
2
3
4
5
6
7
8
9
10
11
*{  
 vertical-align:baselinebaseline;  
 font-weight:inherit;  
 font-family:inherit;  
 font-style:inherit;  
 font-size:100%;  
 border:0none;  
 outline:0;  
 padding:0;  
 margin:0;  
 } 

Poor Man’s Reset
其实这也是我们常用的一类Css Reset.对字体的大小复位,以及图片链接的边框处理.
也经常在某些站点看到

1
2
3
4
5
6
7
8
9
10
11
12
13
html, body{   
 padding:0;  
 margin:0;  
 }  
html {   
 font-size:1em;  
 }  
body {   
 font-size:100%;  
 }  
a img, :link img, :visited img{   
 border:0;  
 }  

Shaun Inman’s Global Reset
作者认为Shaun写这类的Css Reset是有某种目的性.
而且这类规则是针对的是某些重要的常用浏览器.
比如ie,firefox等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 CSS Reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
yahoo这帮家伙写的Reset个人觉得可以推荐
 
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;  
 }

Erik Meyer’s CSS Reset
作者将Erik Meyer的代码重新整理了.但功能上还是一样的
这套Css Reset是业内是使用最多的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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:baselinebaseline;  
 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:"""";  
 }  
 
Condensed Meyer Reset
总的来说这是对Erik Meyer的Css Reset的修改与提升.
 
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;  
 }

0 0