生活琐记

什么是CSS reset

什么是CSS Reset。HTML标签在浏览器中都有默认的样式,例如p标签有上下边距,strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别,例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉,这就是CSS reset。

YUI为我们提供了一个很好的CSS reset,可以直接下载使用,这段代码很成熟,推荐大家使用。YUI的CSS reset主要做了下面几点:

  • 白色背景,黑色字体
  • margin和padding设为0
  • 去掉table的边框
  • 去掉列表样式(ol,ul,dl)
  • 所有文字字号设为100%
  • font-style和font-weight设为normal
  • 更好(但不完全)的表格字体继承
  • 减小sup和sub对line-height的影响

YUI3的CSS reset内容如下

html {color:#000;background:#FFF;}t5
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table
{border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select {*font-size:100%;}
legend {color:#000;}

下载地址:

reset.css http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css

reset-min.css http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css

使用YUI CSS reset后的例子可以参考http://developer.yahoo.com/yui/examples/reset/reset-simple_source.html