打造自己的Reset.css

shawphy 楼主

0，引言
每每有新项目，第一步就是应当使用一个reset.css来重置样式。滥用不如不用，直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css，并且要明白每一条reset都是用来做什么的。reset.css本意就是重置样式，我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css。 具体如何规划网站CSS结构，不在文本讨论之列，可以参考Smashing Magazine上的文章，国内有差强人意的中文译版。注意，本文把reset分成了两个部分，一个是纯reset.css，可以用于任何项目。另一个是用于特定项目的“reset”，自定义修改的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。

1，基础
牛顿是站在巨人伽利略的肩膀上的，我们也可以这么做。首先我们要选定一个前进的基础。
请永远不要使用

1. * { margin: 0; padding: 0; }

复制代码

这问题太多了，在此不多加表述。

目前比较流行的有Eric Meyer的重置样式和YUI的重置样式。另有Condensed Meyer Reset简化Eric Meyer的样式。有趣的是，Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了 。但同时，糟糕的是，网上流传的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的，Eric专门为有一个reset.css页面。而YUI当前版本(2.7.0)的reset.css实际地址里，比上面的页面中还多一些东西。此外，我们还可以基于一些常见的框架，比较著名的比如Blueprint或者Elements CSS Framework（这个的reset也是源自于Eric Meyer的）。OK，准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的reset。我这里主要采用YUI，兼带Eric的reset。

2，默认色彩
对于页面是不是有默认背景色和前景色，YUI和Eric有着不同的看法。
YUI重置背景色为白色而文字颜色为黑色。

1. html {
   
2.         color: #000;
   
3.         background: #FFF;
   
4. }

复制代码

而Eric在当前最新版中让所有颜色为透明，他认为透明才是最原始的颜色。虽然他曾一度认为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了，Eric并没有给出具体理由。

这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是，如果你的设计本身就是白色背景，那么不要设置背景。一小部分中高水平的用户，他们会自定义网页默认背景色。设置成他们喜欢的背景色，比如浅蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重置则会破坏用户的选择——尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道，更高端的用户会用Stylish之类的Firefox扩展来自定义页面。但不得不说，只会用“选项”来调背景色的用户更多，不是么？而同时，如果设计本身就有其他背景色，比如黑色、蓝色、绿色之类的，OK，这些设计当然可以设置背景色。但请不要放进reset.css里。这里是重置样式的地方，不是你设计的地方。请把你的设计放在更广袤的土地上。
所以，简单说来，NO，不要在reset中设置背景色。

那么，文字颜色呢？原则上来说，也是不应该设置文字颜色的。但是IE中的表单元素中legend这个对象比较特别，跟主题结合的比较紧密。legend会默认有自己的颜色（跟当前的主题有关）而不会继承父元素的颜色（即便设了color:inherit;）。
从某些角度来说，可以想当然地认为设置字体颜色人数远小于设置背景色的人数；以及认为就算设置了背景色，人们看到legend元素是黑色的也不会觉得奇怪。因此，YUI在其reset中设置了legend {color: #000;}是无可厚非的。
但反过来说，把这个放到typography.css或者form.css里岂不是更好？不同的页面设计，其对legend的色彩要求很可能是不同的，放在reset.css里重复定义是没有必要的。因此这条CSS规则可以作为在reset.css之后首先应当设置的规则。

3，padding和margin
曾经一度流行的

1. * { margin: 0; padding: 0; }

复制代码

也就是出于这个目的。让各个元素的padding和margin都归零，尤其是那些h1和p以及ul/ol/li之类的元素，还有，body本身也是有margin的。清除元素的padding和margin是很有用的。
YUI这样做：

1. body, div, dl, dt, dd, ul, ol, li,
   
2. h1, h2, h3, h4, h5, h6, pre, code,
   
3. form, fieldset, legend, input, button,
   
4. textarea, p, blockquote, th, td {
   
5.         margin: 0;
   
6.         padding: 0;
   
7. }

复制代码

而Eric这样做：

1. html, body, div, span, applet, object, iframe,
   
2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   
3. a, abbr, acronym, address, big, cite, code,
   
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
   
5. small, strike, strong, sub, sup, tt, var,
   
6. b, u, i, center,
   
7. dl, dt, dd, ol, ul, li,
   
8. fieldset, form, label, legend,
   
9. table, caption, tbody, tfoot, thead, tr, th, td {
   
10.         margin: 0;
    
11.         padding: 0;
    
12.         border: 0;
    
13.         outline: 0;
    
14.         font-size: 100%;
    
15.         vertical-align: baseline;
    
16.         background: transparent;
    
17. }

复制代码

可以看到，Eric把几乎所有的元素都写上了规则。而YUI只把有padding和margin的元素清空样式，而其他元素则不动。我个人比较偏好YUI的做法，因为他这样可以避免给一些无关元素带上不必要的样式。导致元素过多时的性能下降。但Eric的也有可取之处，他这样写，整个reset.css可以小上不少字节，对服务器的压力会小一些。但进一步想，这种做法跟用 * 来选择所有元素还有什么区别呢？这已经几乎囊括了所有元素了！你怎么用呢？看你自己喜好了。

4，边框
YUI里：

1. fieldset, img {
   
2.         border: 0;
   
3. }
   
4. abbr, acronym {
   
5.         border: 0;
   
6.         font-variant: normal;
   
7. }

复制代码

Eric已经在上一条中把所有的边框都清掉了，还是推荐用YUI的，理由同上。

5，外边框(outline)
这个就是元素获取焦点时的虚线框，在ie之外的浏览器上可以像下面Eric做的那样，通过设置outline来消除。

1. /* remember to define focus styles! */
   
2. :focus {
   
3.         outline: 0;
   
4. }

复制代码

而YUI则没有设置这一条。而在Eric的样式中，可以看到Eric的提醒：务必重新定义获取焦点后的样式！
这点其实很重要，出于可访问性的角度出发，那些不便于使用鼠标的人基本上都是用tab导航来浏览网页的。获取焦点的元素有特定样式的话可以极大帮助这类群体的用户，通常建议设置成跟:hover一样。经常设计上会因为这个虚线框而大打折扣。因此这条保留在reset中，并且作为reset.css之后及早定义的规则。

另外，对于在Firefox之类的支持outline的浏览其中，除了获取焦点的元素外，浏览器本身并没有给元素设置outline属性，所以，像Eric那样把所有元素的outline设成0，我就觉得没有太大必要了。

6，字体样式(font style/weight/size/variant)
YUI里，分成了多条：

1. address, caption, cite, code, dfn,
   
2. em, strong, th, var, optgroup {
   
3.         font-style: inherit;
   
4.         font-weight: inherit;
   
5. }
   
6. 
   
7. h1, h2, h3, h4, h5, h6 {
   
8.         font-size: 100%;
   
9.         font-weight: normal;
   
10. }
    
11. abbr, acronym {
    
12.         border: 0;
    
13.         font-variant: normal;
    
14. }
    
15. 
    
16. input, button, textarea,
    
17. select, optgroup, option {
    
18.         font-family: inherit;
    
19.         font-size: inherit;
    
20.         font-style: inherit;
    
21.         font-weight: inherit;
    
22. }
    
23. 
    
24. /*@purpose To enable resizing for IE */
    
25. /*@branch For IE6-Win, IE7-Win */
    
26. input, button, textarea, select {
    
27.         *font-size: 100%;
    
28. }

复制代码

Eric则在他最终版的reset中去掉了关于这些的样式重置，只保留了

1. font-size: 100%;

复制代码

理由见下文。
但通常情况下，我认为还是重置一下这些样式好，比如strong元素，很多时候只是语义而已，并非希望他真的加粗。可能会有背景色或者其他方式来强调。而之所以这里都用了inherit这个继承属性而不是定义

1. font-weight: normal;

复制代码

可以在 Eric 先前的reset文章中看到。这是为了防止——父元素字体加粗了，而没有一个子元素继承加粗属性（因为设置了normal）——这种情况的发生。所以把YUI中设置h1-h6的样式以及abbr和acronym的两句样式都改成inherit会比较好。

此外，对于h1-h6的字体大小定义，建议放到专门的typography.css里，不建议放在reset.css里。所以这里我同样倾向于用YUI的策略，全部重置。

但是很不幸，在ie6/ie7当中，不论是strong还是h1-h6,亦或是em等元素，设置了inherit均无法继承父元素属性，依然保持自己的特色。这就带来了浏览器差异，样式重置本身是为了避免浏览器差异的，但现在带来了浏览器差异，是万万不可取的。对于这个问题我考虑了很久，到底是为了统一所有浏览器都重置成normal（YUI的想法），还是放弃重置这些元素，让他们顺其自然，来保证在所有浏览器中样式一样（Eric的想法）。我最后决定采用YUI的做法。因为，无论重置成normal还是不重置，这些元素都无法继承父元素属性。既然如此，那么退而求其次，保证这些元素都恢复到普通外观，避免在设计的时候还要重置样式。
不得不说，这种妥协是仅仅针对IE6和IE7的，也许在5年后，老板和客户都不要求支持IE7的时候，我们可以放心大胆得使用inherit了。

此外，YUI并没有给code kbd samp tt 这几个元素重置字体大小。但实际上在IE中，他们都会被缩小显示。所以此处应当给予重置font-size: 100%;

7，行高(line-height)
对于行高，YUI并没有给出重置定义，而Eric则给出了重置：

1. body {
   
2.         line-height: 1;
   
3. }

复制代码

行高默认所有元素都会继承的，所以给body设置行高为1就足够了。通常行高设为1时候，英文照常阅读，但中文就无法阅读了，行间距过于紧密导致容易看错行。通常在中文环境下得设置1.4到1.5才能是用户正常阅读。我建议是1.5，这样算出来的值也是整数。比如字体大小12px的时候行高是18px，字体大小16px时行高24px。看起来也会比较舒服。此外，还有一个不设置成1的重要原因是：IE下，行高为1时，中文字顶部会被削掉几像素，字体加粗时尤为明显。所以，重置的原则是好的，但切不可重置为1。

8，列表样式
YUI用了：

1. li {
   
2.         list-style: none;
   
3. }

复制代码

Eric用了：

1. ol, ul {
   
2.         list-style: none;
   
3. }

复制代码

尽管我没有测试出YUI的有什么问题，但我始终觉得设置ol和ul会比较稳妥。而且，波及的元素更少，性能应该更高一点。虽然下载量会多3字节。

9，表格元素
在表格方面，都比较统一。均是：

1. /* tables still need 'cellspacing="0"' in the markup */
   
2. table {
   
3.         border-collapse: collapse;
   
4.         border-spacing: 0;
   
5. }

复制代码

Eric还提醒到，需要在html中设置cellspacing="0" 来达到完美重置效果。
但此外YUI还设置了

1. caption, th {
   
2.         text-align: left;
   
3. }

复制代码

让caption和th元素不要居中。作为重置，是可取的。建议添加此规则。

10，上下标以及baseline
YUI写成

1. sup {
   
2.         vertical-align: baseline;
   
3. }
   
4. 
   
5. sub {
   
6.         vertical-align: baseline;
   
7. }

复制代码

似乎没有优化，不知道为何没有写到一起去。而Eric则在最开始那条中就已经定义。而其中的问题是，YUI这样定义了，但没有重置字体大小，这点是有所遗憾的。既然是重置样式，就彻底一些，所以建议改成这样的：

1. sup, sub {
   
2.         font-size: 100%;
   
3.         vertical-align: baseline;
   
4. }

复制代码

同样对于Eric把所有元素都放到了Baseline上，包括上标下标。Eric的解释是，强制让设计师精确定位这些元素的垂直偏移。

11，插入和删除(ins/del)
对于这个问题，YUI直接清除了ins的下划线和del的删除线这两个文本装饰：

1. del, ins {
   
2.         text-decoration: none;
   
3. }

复制代码

而Eric保留了删除线：

1. /* remember to highlight inserts somehow! */
   
2. ins {
   
3.         text-decoration: none;
   
4. }
   
5. del {
   
6.         text-decoration: line-through;
   
7. }

复制代码

如何取舍？我选择Eric的，为什么我这里不追求完美的样式重置了呢？很简单，我这个reset的目标是为了让我们写页面的时候尽量避免浏览器默认样式，以及不同浏览器之间默认样式差异带来的问题。而del元素删除线的文本装饰，我相信没有人会反对的。有人会加上其他样式，比如字体变淡之类的，但对于del如此强语义的元素来说，没有什么比用删除线更能表达含义的了。而不像上面那个focus样式，未必人人喜欢虚线框。但似乎又没有什么浏览器默认不给del元素加删除线，故这条可以省略。
所以，这里我只重置ins样式，别忘了给ins元素在等下也添加一些样式。

12，引用元素的引号
某些浏览器中，q或者blockquote前后会出现引号。这个并不是谁都喜欢的。所以需要重置他。
YUI的比较简单，只重置了q：

1. q:before,
   
2. q:after {
   
3.         content: '';
   
4. }

复制代码

而Eric则比较周到，把q和blockquote都重置了。

1. blockquote, q {
   
2.         quotes: none;
   
3. }
   
4. blockquote:before, blockquote:after,
   
5. q:before, q:after {
   
6.         content: '';
   
7.         content: none;
   
8. }

复制代码

OK，就决定用Eric的了，对于样式重置，细致一点周到一点总没有错。

13，链接
对于链接，YUI和Eric都没有采取样式重置，但从我思考许久后还是决定把链接样式重置放进来。究其原因，还是因为样式重置一来要彻底，二来对于链接样式并非所有设计师都喜欢用下划线装饰。因此，我还是建议把链接的下划线重置掉。

1. a {
   
2.         text-decoration: none;
   
3. }

复制代码

但这样做有点粗糙。真正有下划线样式的其实只有 :link和:visited所以改成下面这样比较好：

1. :link, :visited {
   
2.         text-decoration: none;
   
3. }

复制代码

此外，对于链接颜色，可以作为reset后急需设置的规则来处理。直接放入reset.css中不是很合适。

14，我的重置样式
总结上面种种规则，这里给出一下我的CSS重置规则，BSD协议发布，请随意使用。测试样本（这个是从YUI那里复制过来的，感谢YUI为此做出的贡献。）
下载：reset.css  reset-min.css

1. /*
   
2. Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved.
   
3. http://shawphy.com/2009/03/my-own-reset-css.html
   
4. Based on YUI http://developer.yahoo.com/yui/reset/
   
5. and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
   
6. Licensed under the BSD License:
   
7. http://creativecommons.org/licenses/BSD/
   
8. version: 1.1 | 20090303
   
9. */
   
10. 
    
11. body, div, dl, dt, dd, ul, ol, li,
    
12. h1, h2, h3, h4, h5, h6, pre, code,
    
13. form, fieldset, legend, input, button,
    
14. textarea, p, blockquote, th, td {
    
15.         margin: 0;
    
16.         padding: 0;
    
17. }
    
18. fieldset, img {
    
19.         border: 0;
    
20. }
    
21. /* remember to define focus styles! */
    
22. :focus {
    
23.         outline: 0;
    
24. }
    
25. address, caption, cite, code, dfn,
    
26. em, strong, th, var, optgroup {
    
27.         font-style: normal;
    
28.         font-weight: normal;
    
29. }
    
30. 
    
31. h1, h2, h3, h4, h5, h6 {
    
32.         font-size: 100%;
    
33.         font-weight: normal;
    
34. }
    
35. abbr, acronym {
    
36.         border: 0;
    
37.         font-variant: normal;
    
38. }
    
39. 
    
40. input, button, textarea,
    
41. select, optgroup, option {
    
42.         font-family: inherit;
    
43.         font-size: inherit;
    
44.         font-style: inherit;
    
45.         font-weight: inherit;
    
46. }
    
47. code, kbd, samp, tt {
    
48.         font-size: 100%;
    
49. }
    
50. /*@purpose To enable resizing for IE */
    
51. /*@branch For IE6-Win, IE7-Win */
    
52. input, button, textarea, select {
    
53.         *font-size: 100%;
    
54. }
    
55. body {
    
56.         line-height: 1.5;
    
57. }
    
58. ol, ul {
    
59.         list-style: none;
    
60. }
    
61. /* tables still need 'cellspacing="0"' in the markup */
    
62. table {
    
63.         border-collapse: collapse;
    
64.         border-spacing: 0;
    
65. }
    
66. caption, th {
    
67.         text-align: left;
    
68. }
    
69. sup, sub {
    
70.         font-size: 100%;
    
71.         vertical-align: baseline;
    
72. }
    
73. /* remember to highlight anchors and inserts somehow! */
    
74. :link, :visited , ins {
    
75.         text-decoration: none;
    
76. }
    
77. blockquote, q {
    
78.         quotes: none;
    
79. }
    
80. blockquote:before, blockquote:after,
    
81. q:before, q:after {
    
82.         content: '';
    
83.         content: none;
    
84. }

复制代码

15，完成一个初步的CSS框架
之前提到了，样式重置作为一个所有项目可以使用的共性存在，而不同的项目应当有其个性。当然还有其他一些共性，不属于样式重置的部分，但同样重要。再往下讲就可以做一个CSS框架了。CSS框架所要考虑的内容远比一个CSS Reset要考虑的多很多，这里只是点到为止，不做更多展开。

layout.css
首先除了reset.css之外要建立的layout.css，这里目前主要推荐放入.clearfix。清除浮动很重要。但这不属于样式重置，放在布局当中正合适。

1. .clearfix:after {
   
2.         content: ".";
   
3.         display: block;
   
4.         height: 0;
   
5.         clear: both;
   
6.         visibility: hidden;
   
7. }
   
8. .clearfix {display: inline-block;}
   
9. 
   
10. /* Hides from IE-mac \*/
    
11. * html .clearfix {height: 1%;}
    
12. .clearfix {display: block;}
    
13. /* End hide from IE-mac */

复制代码

此外，layout.css中还可以放入自己常用的布局，比如

1. #wrap{margin:0 auto;width:960px;}

复制代码

之类的规则。看个人喜好而定。

typography.css
这里可以放置很多规则，非常重要的是以下三个：
:focus, a, ins
这三个是被重置掉的，但又很重要的内容，建议在reset之后立即在typography中设定全站样式，保持样式统一。
ins可以单独设置， :focus 最好设置成跟 :hover一样，而a的样式还是按照LoVe,HAte的法则来设置。

h1-h6系列也是之前被重置掉的。可以考虑在这里设置样式。按站点特性来定。我个人是不喜欢全局定义hx系列的字体大小的，统一为100%我觉得挺好。

接下来要设置的是font-family属性，可以参考射雕的文章。另外，小麦的文章中提到，表单元素的字体在IE中都不能继承父元素的字体，所以要单独设置。

至于其他需要全局设置的，可以参考前文中的叙述，找到相应的部分添加到typography.css中即可。这样就可以在保证reset.css通用性的情况下，使不同的项目又有个性。尽量保证reset.css在所有项目中都是一样的。有利于项目的开发。最后不要忘记在写表格的时候加cellspacing="0" 来达到完美重置效果。

16，探讨
文章写的比较仓促，也受限与本人能力所限，只能写到这里。欢迎留言探讨，也可发邮件或上Twitter找我。以便进一步完善这个reset。谢谢。

原文地址： http://shawphy.com/2009/03/my-own-reset-css.html

[ 本帖最后由 yoom 于 2009-3-3 10:00 编辑 ]

HeTingYi

哇 这么长啊 。。。 贫僧慢慢看 。。。

vocal

这篇应该算是神贴了吧

其实蓝色之前也有很多这样的帖子，不过对于这样的还没有被广泛接受的概念来说，多说说是非常好的。

我很久以前一直理解reset为清除默认样式，后来才理解到，如果是清除默认样式的话，*{margin:0;padding:0}就足够了。

而reset的真义是首先是清除，但更重要的是定义，按照需求重新定义相关的样式。这才是重设……

shawphy 楼主

发现几个inherit没继承，得改改~~

shawphy 楼主

目前发现两个问题，
h1-h6,在ie6下没有继承
strong等也没有继承……
看来得再写ie补丁了……

shawphy 楼主

我进一步考虑下来，决定h1-h6还是统一设置成normal好，因为h1-h6很少用于继承父元素属性。
而同时，strong和em，还有th元素，即便设置了继承，在ie6/7中也是无效的，那与其这样，还不如不要重置，或者设置成normal。那么各个浏览器样式一致了

birdstudio

好文，顶！部分点评很有共鸣，另外也学到了一些思路，谢谢分享！

shawphy 楼主

决定还是统统设置成normal，避免在正式开发的时候还要重置，要是那样就失去了重置的目的了。

phoenix2212

搞div+css的 只要重置div ul hx（少许）  form inupt   咱们的网站你能见到的也就这几个标签 要到xhtml还很远呢

你那一套在咱们国家不好使

另 q这个行内引用标签 只有ie支持的比较好 safri支持最完整 不建议使用这个标签

[ 本帖最后由 phoenix2212 于 2009-3-3 09:00 编辑 ]

chiyuderen

支持 顶一下······不错 看出味道来了

mlmuller

楼主在有些位置还会讨论到两种reset相关几个字节.
从这点来分析,做某个项目中毕竟有些标签会使用不到...
不些不会应用到的标签应该不需要reset.
真正的应用reset的基础还是要深入的学习XHTML,认识各种标签的差别,合理的应用标签,并对应用到的标签进行reset.

shawphy 楼主

楼上说的有道理，不同的情况适用的确实不同，确实应该判断如何打造自己的reset，最适合的才是最好的。我现在的这个reset的问题在于过大，比YUI和Eric的都大一些了，这让我非常困扰。最好可以在性能和文件大小上有个更好的平衡，把一些不常用的元素的重置样式进行合并，可能会更好。

langq235

确保内容的一致性确实可以提高效率，减少思考时间，但是因此而来的就是另外一个问题，就是考虑的是否周到，是否够完善，当你过度信赖一个东西的时候，会很难发现错误的来源；不过我说的有些极端，多注意，多完善就没事了

marlon119

如何定义要看网站的需求，我们没有机会去做YAHOO那样的大门户，定义那么多只能说浪费资源，还是那句老话，适合就好。

lookupflash

收到， 我一直用的也是YUI的reset。

ljund

  VERY GOOD!

yjlrwmqj

我一直用 * { margin: 0; padding: 0; }
没发现什么问题啊！~！~

greengnn

reset不能太狠，这个我是发现了，YUI的strong就让人很郁闷，h1-h6通常也是粗体的，不过* {margin:0;padding:0;}对表单元素不友好，特别是默认的button。
除了把html默认样式清除掉以外，还要考虑到网站的基本视觉习惯。标题还是会考虑用粗体呈现，强调也是会用粗体。表单是默认的还是处理过的？都要分析。
列表清除很有用，但是在文章排版的时候，又要再恢复。

superman0

完整看完

realism

一直在用* {margin:0;padding:0;},暂时没发现什么问题

sjq617

看了这便文章还是蛮不度的，上次收集了一些大型网站的reset
发过来给大家共享下

1. 淘宝网
   
2. /*
   
3. html{color:#000;background:#FFF;}
   
4. 
   
5. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,leg
   
6. 
   
7. end,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table
   
8. 
   
9. {border-collapse:collapse;border-spacing:0;}fieldset,img{border:none;}
   
10. 
    
11. address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-
    
12. 
    
13. weight:normal;}li{list-style:none;}caption,th{text-align:left;}
    
14. 
    
15. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after
    
16. 
    
17. {content:'';}abbr,acronym{border:none;font-variant:normal;}sup
    
18. 
    
19. {vertical-align:text-top;}sub{vertical-align:text-bottom;}
    
20. 
    
21. input,button,textarea,select{font-family:inherit;font-
    
22. 
    
23. size:inherit;font-weight:inherit;}input,button,textarea,select{*font-
    
24. 
    
25. size:100%;}legend{color:#000;}del,ins{text-decoration:none;}small{font
    
26. 
    
27. -size:100%;}
    
28. */
    
29. 搜狐网
    
30. /*
    
31. body{font-family:'宋体';text-align:center;margin:0
    
32. 
    
33. auto;padding:0;background:#FFF;font-size:12px;color:#333;}
    
34. body > div{text-align:center;margin-right:auto;margin-left:auto;}
    
35. div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
    
36. img,a img{border:0;margin:0;padding:0;}
    
37. h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-
    
38. 
    
39. weight:normal;}
    
40. ul,ol,li{list-style:none}
    
41. table,td,input{font-size:12px;padding:0}
    
42. a{outline-style:none;color:#333;text-decoration:none}
    
43. a:hover{color:#c00;text-decoration:underline;}
    
44. */
    
45. 新浪网
    
46. /*
    
47. body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div
    
48. 
    
49. {margin:0;padding:0;border:0;}
    
50. body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-
    
51. 
    
52. family:"宋体";}
    
53. ul,ol{list-style-type:none;}
    
54. select,input,img,select{vertical-align:middle;}
    
55. a{text-decoration:underline;}
    
56. a:link{color:#009;}
    
57. a:visited{color:#800080;}
    
58. a:hover,a:active,a:focus{color:#c00;}
    
59. .clearit{clear:both;}
    
60. */
    
61. 土豆网
    
62. */
    
63. *{margin:0;padding:0}
    
64. body{color:#000;background:#fff;font-size:12px; line-height:1.25;font-
    
65. 
    
66. family:Tahoma,sans-serif}
    
67. th,td{text-align:left;vertical-align:top}
    
68. h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal}
    
69. p{margin:0 0 1em 0}
    
70. blockquote{margin:0 0 1em 0}
    
71. a{color:#000}
    
72. * a{_font-family:Arial,sans-serif}
    
73. a:hover{text-decoration:none}
    
74. img{display:block;border:0}
    
75. ul{ margin:0;padding:0;list-style:none}
    
76. ol{padding:0 0 0 2em}
    
77. dl,dt,dd{margin:0;padding:0}
    
78. form{display:block}
    
79. input,label,select,option,textarea,button,fieldset,legend{font-
    
80. 
    
81. size:1em; font-family:Tahoma,sans-serif}
    
82. input.text{color:#444;border-color:#9f9f9f #dcdcdc #dcdcdc
    
83. 
    
84. #9f9f9f;border-style:solid;border-width:1px;padding:3px
    
85. 
    
86. 2px;height:14px}
    
87. input.submit{border-color:#ddd #696969 #696969 #ddd;border-
    
88. 
    
89. style:solid;border-width:1px;padding:2px;height:22px}
    
90. input.file{}
    
91. input.radio,input.checkbox{margin-right:2px}
    
92. *input.radio,input.checkbox{*margin:-2px 2px -2px -2px}
    
93. *input[type=radio],input[type=checkbox],x:-moz-any-link,x:default
    
94. 
    
95. {vertical-align:-3px}
    
96. *input.radio,input.checkbox{*vertical-align:-2px}
    
97. input.image{}
    
98. label.radio,label.checkbox{margin-right:5px}
    
99. select{}
    
100. option{}
     
101. textarea{border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-
     
102. 
     
103. style:solid;border-width:1px;padding:1px}
     
104. .fix:after{ content:"."; display:block; height:0; clear:both;
     
105. 
     
106. visibility:hidden}
     
107. .fix{display:inline-block;min-height:1%}
     
108. *html .fix{zoom:1}
     
109. .fix{display:block}
     
110. */
     
111. 腾讯网
     
112. /*
     
113. body{margin:0;padding:0 0 12px 0;background:#fff;font-size:13px;line-
     
114. 
     
115. height:22px;}
     
116. div,p,li{font-family:Verdana,婼;font-size:13px;}
     
117. form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
     
118. input,select{font-size:12px;line-height:16px;}
     
119. img{border:0;}
     
120. ul,li{list-style-type:none;}
     
121. li{font-size:13px;}
     
122. .tc{text-align:center;}.tl{text-align:left;}.tr{text-align:right;}
     
123. .dis{display:block;}.undis{display:none;}
     
124. .fl{float:left;}.fr{float:right;}.cl{clear:both;}
     
125. .fh{height:22px;}.fb{font-weight:bold;}.fnb{font-weight:200;margin-
     
126. 
     
127. left:-1px;}
     
128. .fc30{color:#303030;font-family:"宋体";}.fchot{color:#ff0700}
     
129. .f11{font-size:12px;font-family:tahoma;}
     
130. h4{font-weight:200;font-size:13px;cursor:pointer;}
     
131. h4 a{width:100%;heihgt:100%;display:block;}
     
132. a{color:#00007F;text-decoration:none;}
     
133. a:hover{color:#bd0a01;text-decoration:underline;}
     
134. a.lcblue{color:#0F479C;}
     
135. a.lchot{color:#bd0a01;}
     
136. .lchot{color:#bd0a01;}
     
137. */
     
138. 凤凰网
     
139. /*
     
140. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,
     
141. 
     
142. blockquote,th,td{margin:0;padding:0;}
     
143. table{border-collapse:collapse;border-spacing:0;}
     
144. fieldset,img{border:0;}
     
145. address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-
     
146. 
     
147. weight:normal;}
     
148. ol,ul {list-style:none;}
     
149. caption,th {text-align:left;}
     
150. h1,h2,h3,h4,h5,h6{font-size:100%;}
     
151. q:before,q:after{content:'';}
     
152. body {font:12px "婼",arial,helvetica,clean,sans-serif}
     
153. table {font-size:inherit;font:100%;}
     
154. body * {line-height:16px;}
     
155. h1 {font-size:14px;}
     
156. h2 {font-size:14px;font-weight:normal;}
     
157. h3 {font-size:12px;}
     
158. h4 {font-size:12px;font-weight:normal;}
     
159. strong {font-weight:bold;}
     
160. a {text-decoration:none;}
     
161. a:hover {text-decoration:underline;}
     
162. .clear {clear:both;}
     
163. .clearfix:after { content: "."; display: block; height: 0;  clear:
     
164. 
     
165. both; visibility: hidden;}
     
166. /* Hides from IE-mac \*/
     
167. * html .clearfix {height: 1%;}
     
168. /* End hide from IE-mac */
     
169. .bold {font-weight:bold;}
     
170. .f14   {font-size:14px;}
     
171. .h20 { line-height:20px;}
     
172. .error {color:red;}
     
173. .black {color:#000;}
     
174. .white {color:#fff;}
     
175. .red {color:#e10007;}
     
176. .grey {color:#454545;}
     
177. .orange {color:#ff7200;}
     
178. .blue {color:#3a8ecf;}
     
179. .navy {color:#183b7d;}
     
180. */
     
181. cctv
     
182. /*
     
183. body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,dd,dt,dl,li,form,input
     
184. 
     
185. {margin:0;padding:0;}
     
186. body,a{color:#000;}
     
187. body, input, textarea{font:13px/1.3 Arial;}
     
188. li,
     
189. #main-fn-bar .searchBox{list-style:none;font-family:"宋体";}
     
190. a{text-decoration:none;}
     
191. a:hover{text-decoration:underline;}
     
192. img{border:none;}
     
193. h4, h5{font-size:13px;}
     
194. */
     
195. 新华网
     
196. /*
     
197. body,td,div { font-size: 12px; font-weight: normal; color: #005FA2; }
     
198. body,td,th { font-size: 12px; }
     
199. body {margin: 0px;background-image:url(http://imgs.xinhuanet.com/icon/home/2007/web_bg.gif);background-repeat:repeat-x;}
     
200. */
     
201. 工商银行
     
202. /*
     
203. TD
     
204. {font-size: 12px;text-decoration: none;}
     
205. INPUT{font-size: 12px;color: #000000;text-decoration: none;}
     
206. BODY{font-size: 12px;color: #000000;text-decoration: none;font-family: 宋体;}
     
207. SELECT{font-size: 12px;text-decoration: none;}
     
208. P{line-height: 150%;text-decoration: none;}
     
209. H1{font-weight: bold;font-size: 150%;text-decoration: none;}
     
210. H2{font-weight: bold;font-size: 14px;text-decoration: none;}
     
211. H3{font-weight: bold;font-size: 14px;text-decoration: none;}
     
212. */
     
213. 迅雷
     
214. /*
     
215. * {margin:0;padding:0;}
     
216. html {background:#FFFFFF;}
     
217. body {text-align:left;font:normal 12px/1.6em simsun, Verdana, Lucida,
     
218. 
     
219. Arial, Helvetica, sans-serif;color:#353535;}
     
220. table {border-collapse:collapse;border-spacing:0;empty-cells:show;text
     
221. 
     
222. -align:left;}
     
223. th,td {border-collapse:collapse;}
     
224. ol,ul {list-style:none;}
     
225. a {text-decoration:none;color:#353535;}
     
226. a:hover {color:#CD0102;}
     
227. input,select,form img,button {vertical-align:middle;}
     
228. button {border:0;cursor:pointer;}
     
229. img {border:0;}
     
230. em {font-style:normal;}
     
231. */
     
232. baidu有啊
     
233. /*
     
234. body{font:13px/1.4 arial,helvetica,sans-serif;text-align:center;}
     
235. 
     
236. body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textare
     
237. 
     
238. a,select,button,th,td{margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-
     
239. 
     
240. size:100%;font-weight:normal;}table{font-size:inherit;font:100%;}
     
241. 
     
242. input,select{font:100% arial,helvetica,clean,sans-serif;}button
     
243. 
     
244. {overflow:visible;}th,em,strong,b,address,cite{font-style:normal;font-
     
245. 
     
246. weight:normal;}li{list-style:none;}img,fieldset{border:0;}ins{text-
     
247. 
     
248. decoration:none;}
     
249. */
     
250. 泡泡网
     
251. /*
     
252. 163
     
253. /*
     
254. body { text-align: center; font-family:"婼", arial;margin:0; padding:0;
     
255. 
     
256. background: #FFF; font-size:12px; color:#000;}
     
257. 
     
258. div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0; }li
     
259. 
     
260. {list-style-type:none;}img{vertical-align:top;}strong{font-
     
261. 
     
262. weight:normal;}em {font-style:normal;}h1,h2,h3,h4,h5,h6 { margin:0;
     
263. 
     
264. padding:0;font-size:12px; font-weight:normal;}
     
265. a:link {color: #1f3a87; text-decoration:none;}a:visited {color:
     
266. 
     
267. #83006f;text-decoration:none;}a:hover {color: #bc2931; text-
     
268. 
     
269. decoration:underline;}a:active {color: #bc2931;}/* Color
     
270. 
     
271. */.cRed,a.cRed:link,a.cRed:visited{ color:#f00;
     
272. 
     
273. }.cBlue,a.cBlue:link,a.cBlue:visited,a.cBlue:active
     
274. 
     
275. {color:#1f3a87;}.cDRed,a.cDRed:link,a.cDRed:visited{
     
276. 
     
277. color:#bc2931;}.cGray,a.cGray:link,a.cGray:visited{ color:
     
278. 
     
279. #4F544D;}.cDGray,a.cDGray:link,a.cDGray:visited{ color:
     
280. 
     
281. #666;}.cWhite,a.cWhite:link,a.cWhite:visited{
     
282. 
     
283. color:#fff;}.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
     
284. 
     
285. a.cBlack:hover
     
286. 
     
287. {color:#bc2931;}.cYellow,a.cYellow:link,a.cYellow:visited
     
288. 
     
289. {color:#ff0;}.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}/*
     
290. 
     
291. Font  */.fB {font-weight: bold;}.f12px{ font-size:12px;}.f14px{ font-
     
292. 
     
293. size:14px;}/* icon */.I_V_ {background:url
     
294. 
     
295. (http://img1.cache.netease.com/cnews/img09/icon.gif) left center no-
     
296. 
     
297. repeat; padding-left:16px;}/* Other */.left{ float: left;}.right{
     
298. 
     
299. float: right;}.clear{ clear: both; font-size:1px; width:1px; height:0;
     
300. 
     
301. visibility: hidden; }.clearfix:after{content:"."; display:block;
     
302. 
     
303. height: 0; clear: both; visibility: hidden;} /* only FF */.hidden
     
304. 
     
305. {display: none;}.unLine ,.unLine a{text-decoration: none;}.noBorder
     
306. 
     
307. {border:none;}
     
308. */
     
309. 163新闻页
     
310. /*
     
311. /* Global CSS */
     
312. body {text-align:center;font-family:宋体,serif;background:#ffffff;font
     
313. 
     
314. -size:12px;}
     
315. 
     
316. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,te
     
317. 
     
318. xtarea,blockquote{padding:0; margin:0;}   table,td,tr,th{font-
     
319. 
     
320. size:12px;}li{list-style-type:none;}table{ margin:0 auto;}img{vertical
     
321. 
     
322. -align:top;border:none;}ol,ul {list-style:none;}caption,th {text-
     
323. 
     
324. align:left;} h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
     
325. 
     
326. q:before,q:after {content:'';}abbr,acronym {border:0;}
     
327. 
     
328. address,caption,cite,code,dfn,em,th,var {font-weight:normal; font-
     
329. 
     
330. style:normal;}/* link color font */a {color:#2b2b2b;text-
     
331. 
     
332. decoration:none;}a:visited {color:#83006f;text-decoration:none;}a:hover
     
333. 
     
334. {color:#BA2636;text-decoration:underline;}a:active {color:#BA2636;}
     
335. */
     
336. msn中国站
     
337. /*
     
338. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,leg
     
339. 
     
340. end,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border
     
341. 
     
342. -collapse:collapse;border-spacing:0;}fieldset,img{border:0;}
     
343. 
     
344. address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-
     
345. 
     
346. weight:400;}li{list-style:none;}caption,th{text-align:left;}
     
347. 
     
348. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;}em{font-
     
349. 
     
350. style:italic;}a{outline:none;}input,button,select,textarea{font-
     
351. 
     
352. size:12px;vertical-align:middle;}img{vertical-
     
353. 
     
354. align:middle;}.clearfix:after
     
355. 
     
356. {content:".";display:block;height:0;clear:both;visibility:hidden;}.clea
     
357. 
     
358. rfix{display:block;clear:both;}.clearfix2
     
359. 
     
360. {_height:1%;overflow:auto;}.mydebug{border:#000 solid 1px;}body{font-
     
361. 
     
362. size:12px;background-color:#FFF;font-family:"婼";}a .imgborder,a:link
     
363. 
     
364. .imgborder,a:visited .imgborder{border:1px solid #DDD;}a:hover
     
365. 
     
366. .imgborder{border:1px solid #333;}
     
367. */
     
368. yahoo中国
     
369. /*
     
370. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;}q:before,q:after{content:'';}body{font-family:Arial,Helvetica,sans-serif,SimSun;font-size:12px;text-align:center;}
     
371. */
     
372. 网站的rest
     
373. /*
     
374. html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
     
375. pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

复制代码

给我感觉也是够用就行。好多东西是不需要设的。。。部分的东西我没处理掉，还望大家见谅

[ 本帖最后由 sjq617 于 2009-3-5 20:29 编辑 ]

elten

值得看的东西

[ 本帖最后由 elten 于 2009-3-5 21:45 编辑 ]

hbjswj

第一次看到这样的东西.

lifesinger

* { margin: 0; padding: 0; } 的问题，能具体说说吗？

1. 影响性能？ 没搜索到任何证据，自己测试的结果也没发现问题

2. 破坏性太大？<-- 如果是这个，我同意

weihua22

很强大的reset，讲了很多原则，具体情况具体应用。

snitmnm

嗯...领悟中...............

lin04com

谢谢分享，确实是好文章！

BarkTown

绝对是好文，感谢两位重置和楼主

bonas

好文章，找时间慢慢读，这应该称为CSS框架吧。

[ 本帖最后由 bonas 于 2009-3-21 23:12 编辑 ]

dcchan

嗯！不错。原来还有这么多地方要重设的。谢谢了！