css reset 整理

putao899 楼主

什么叫做css reset呢？即重置css，也就是重置默认样式。一些标签元素在HTML下有一个默认属性值，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（css reset）。

以前使用最多*{margin:0;padding:0}，但其格式化太严重，慢慢被废弃。
国内大型门户如QQ，taobao等css reset时均有yui的影子。
业内用的最多的还有Erik Meyer’s CSS Reset。

个人认为：应根据需求，量体裁衣。
综合yui,Erik,taobao我们就可以写出了自己的css reset。


参考文章：
1。Reset CSS 研究（技术篇）
2。Reset CSS研究（八卦篇）
3。Erik Meyer’s CSS Reset
4。YUI css reset

整理的css reset:

1. /* reset */
   
2. html{color:#000;background:#fff;}
   
3. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
   
4. body{font:12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
   
5. img{border:none;}
   
6. em,strong{font-style:normal;font-weight:normal;}
   
7. li{list-style:none;}
   
8. table {border-collapse:collapse;border-spacing:0;}
   
9. h1{font-size:18px;}
   
10. h2{font-size:16px;}
    
11. h3{font-size:14px;}
    
12. h4, h5, h6{font-size:100%;}
    
13. 
    
14. q:before,q:after{content:'';}/* 消除q前后的内容 */
    
15. button,input,select,textarea{font-size:100%;}/* 使得表单元素在 ie 下能继承字体大小 */
    
16. input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
    
17. address,cite,dfn,em,var{font-style:normal;} /* 将斜体扶正 */
    
18. 
    
19. /* link */
    
20. a{color:#36c;text-decoration:none;}
    
21. a:hover{color:#f60;text-decoration:underline;}

复制代码

Fanbin

嗯，不错，这个基本可以用在每一个网站里作为基础CSS。

jonbi

总结的不错。支持！

radom

对这个我有点无语~

snggame

支持好呀非常不错的说

zhrock

  强，收下了！楼主辛苦了

jn127

em,strong{font-style:normal;font-weight:normal;}
这个我有点异议，本身就是着重标签，加粗为啥要删掉？难道各浏览器对这个解释有差别？

q:before,q:after{content:'';}/* 消除q前后的内容 */
这个标签有几个人用？

还有我想是能加个批量去除浮动的，
div, dl, ul { zoom:1; }
div:after, ul:after, dl:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

因为我还没有得到确实的证据，证明现在的这个对渲染性能有影响，可以节省代码

[ 本帖最后由 jn127 于 2009-10-12 18:28 编辑 ]

suntiger035

很不错，顶下

baihe107

q一般的门户和个人网站可能会用到，可以区别对待。
div:after, ul:after, dl:after....一般都直接写clearfix吧，在div/ul/dl后分别加伪类，是不是有点浪费了

zhuangquanquan

收藏啦！谢谢楼主1

banar

对于一般简单页面，排版时多注意些，很少有HACK

106444269

jn127 发表于 2009-10-12 18:27
em,strong{font-style:normal;font-weight:normal;}
这个我有点异议，本身就是着重标签，加粗为啥要删掉？ ...

个人觉得没有必要这样去改变标签自身的语义，单独定义个.clear:after{}就可以了。

106444269

个人经验，a标签在不改变内联属性的情况下，在ie和ff的宽度是不一样的，即使定议了a{margin:0;padding:0}

qidaimei

总结的挺好的，收藏了

xmlovedoudou

textarea{font-size:100%;}这个能继承？不是吧，每次得重新写的textarea{font-size:12px;}

szylx88

应根据需求，量体裁衣。

cauchy8

支持好呀非常不错的说

cauchy8

呵呵

cauchy8

呜呜呜u:rolleyes:

cauchy8

:呵呵呵呵rolleyes:

cauchy8

嘻嘻嘻i所发生的肌肤

workcss

我 一般是去淘宝那抄一个回来的

webfeng

workcss 发表于 2012-1-2 12:51
我 一般是去淘宝那抄一个回来的

workcss

发现又浮上来了。

mycggo

jn127 发表于 2009-10-12 18:27
em,strong{font-style:normal;font-weight:normal;}
这个我有点异议，本身就是着重标签，加粗为啥要删掉？ ...

这个想法不错，有什么问题吗？

还有我想是能加个批量去除浮动的，
div, dl, ul { zoom:1; }
div:after, ul:after, dl:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

yuewolf

我一般就是去淘宝或者其他大站抄一个回来，不过真应该想LZ一样整个自己的