Dawn CSS Reset

之前在做页面时，一直使用YUI的CSS Reset，后来还跟着它升级到了3.0beta1版。当然，我每次都会在YUI的基础上适当精简，以方便自己在项目中的使用。后来陆续看到了Shawphy的《打造自己的reset.css》和射雕的《Reset CSS 研究（技术篇）》，然后便想到既然巨人们就在眼前，我何不站在他们肩膀上总结一套自己的CSS Reset呢，于是就有了下文：

首先我对自己所熟知的4套CSS Reset进行一个简单的评价（一家之言，欢迎各位拍砖）：

• YUI CSS Reset：是我之前一直在用的Reset，按照元素的作用及默认样式分类，将它们的默认样式去除，最终基本所有元素在所有浏览器下长的都一样，当然相比Eric的Reset，YUI仁慈了许多；
• Eric Reset CSS：杀伤力最大的一套Reset，从第一处定义就可以看到，把所有元素的内外边距、边框置为0，连outline都不放过，连:focus的outline都不放过……经Eric之手，世界终于清静了……个人感觉Eric的思路是“HTML元素默认样式性本恶”，所以要全部除之而后快，但这样难免让一些本可以帮助我们的样式也一起灰飞烟灭了；
• Shawphy CSS Reset：Shawphy站在了YUI和Eric的肩膀上，感觉Shawphy更倾向于Eric的版本，杀伤力同样巨大，不过在文末Shawphy又讲到在reset.css之后要立即将一些被重置的样式根据项目需要在layout.css和typography.css中重新定义；
• KISSY CSS Reset：也就是射雕在博客上阐述的Reset，感觉受YUI的影响比较大，不过正如博客中所说，这份Reset更适应中文，我正是因为受到了这份Reset的很多启发才决定总结自己的Reset。

注：以上总结中的4个链接为非压缩版，除了Eric的版本外，其他三个都可以将URL最后的reset.css改名为reset-min.css得到压缩版。

下边由本人操刀的Dawn CSS Reset闪亮登场，这份Reset受到了YUI和KISSY的影响与启发，在此表示感谢。

为了让大家更好的理解我在处理这些重置样式时的想法，并将之与YUI和KISSY的异同做一个对比，下边就使用一个表格对每句重置样式进行说明：

	YUI[http://developer.yahoo.com/yui/]	KISSY[http://code.google.com/p/kissy/]	Dawn[http://mingelz.com]	备注
1	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;}	body, h1,h2,h3,h4,h5,h6,hr,p,blockquote, dl,dt,dd,ul,ol,li, pre, form,fieldset,legend,button,input,textarea, th,td {margin:0;padding:0;}	body, h1,h2,h3,h4,h5,h6, dl,dt,dd,ul,ol,li, th,td, p,blockquote,pre, form,fieldset,legend,input,button,textarea, hr {margin:0;padding:0;}	1、div、code是没有内外边距的，可去除； 2、input根据不同的type，可能有内外边距，应加上； 3、hr是有外边距的，但我们实际使用中该值不定，应加上；
2	h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}	h1{font-size:18px;} h2{font-size:16px;} h3{font-size:14px;} h4,h5,h6{font-size:100%;}	h1,h2,h3,h4,h5,h6 {font-size:100%;}	1、对于不同页面，hn的字体大小不可能相同； 2、标题肯定是要着重显示的，不加粗才属于特例； 结论：只重置字体大小，不重置字体粗细；
3	li {list-style:none;}	ul,ol {list-style:none;}	li {list-style:none;}	1、list-style样式确实是定义在li标签上的；
4	fieldset,img {border:0;}	fieldset,img {border:0;}	fieldset,img {border:0;}	1、input、select、textarea默认也有边框，基于优雅降级的思想没有将它们的边框在Reset中清除，当使用背景图片修饰时，记得清除边框；
5	table {border-collapse:collapse;border-spacing:0;}	table {border-collapse:collapse;border-spacing:0;}	table {border-collapse:collapse;border-spacing:0;}	-
6	q:before,q:after {content:'';}	q:before,q:after {content:'';}	q:before,q:after {content:'';}	1、q标签默认会在内容前加前引号（“）在内容后加后引号(”)，可能会影响实际效果，故去除；
7	abbr,acronym {border:0;font-variant:normal;}	abbr[title],acronym[title] {border-bottom:1px dotted;cursor:help;}	abbr[title] {border-bottom:1px dotted;cursor:help;}	1、IE6不支持abbr标签，HTML5“抛弃”了acronym标签； 2、IE6不支持属性选择符； 结论：既然使用了属性选择符，也就代表着不再对IE6提供支持，就让我们大胆的对IE6及它的acronym说Byebye吧！
8	address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} caption,th {text-align:left;}	address,cite,dfn,em,var {font-style:normal;}	address,cite,dfn,em,var {font-style:normal;}	1、address、cite、dfn、em、var默认为斜体，可扶正； 2、caption、strong、th默认为粗体，对于这种语义化标签不加粗才属于特例，可保留； 3、capton、th默认为居中，可保留，原因同上，不居中才属于特例； 4、code默认无此方面样式，可去除； 5、单独说下em和strong，em表示强调、strong表示更强的强调，所以这里我去除em样式而保留strong样式，一般强调使用em，没有任何样式，而对于strong还不加粗那真的属于特例了；
9	input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select {*font-size:100%;}	button,input,select,textarea {font-size:100%;}	button,input,select,textarea {font-size:100%;}	1、表单元素在IE中默认不继承字体大小； 2、button默认不继承字体大小，应添加上； 3、optgroup默认为斜体，且无法扶正；
10	legend {color:#000;}	legend {color:#000;}	legend {color:#000;}	1、IE6下legend元素颜色继承自Windows系统的主题样式； 2、请在页面布局时根据实际需要修改legend颜色；
11	html {color:#000;background:#FFF;}	-	-	1、所有浏览器默认相同； 2、背景颜色可能会继承自Windows系统的主题颜色； 结论：在实际项目中根据需要定义不同颜色；
12	sup{vertical-align:text-top;} sub{vertical-align:text-bottom;}	-	-	1、所有浏览器默认样式为：     sup{vertical-align:super;}     sub{vertical-align:sub} 2、super比text-top更高、sub比text-bottom更低； 3、在默认样式下，如果行高太小，sub、sup会被遮挡；
13	-	code,kbd,pre,samp,tt {font-family:"Courier New",Courier,monospace;}	code,kbd,samp {font-family:"Courier New",monospace;}	1、pre只是对文本预格式化，并不代表内容一定是代码，所以没有必要为pre标签定义等宽字体，如果pre中为代码，应使用：     <pre><code> ... </code></pre> 2、HTML5已将tt标签“抛弃”； 结论：可只定义code、kbd、samp三个标签，或保留默认；
14	-	small {font-size:12px;}	-	1、KISSY指出小于12px的中文难于阅读，故使之正常化； 2、HTML5“抛弃”了big标签，却留着small，不知何故…… 结论：推荐不使用small标签，从Reset做起；
15	-	hr {border:none;height:1px;}	hr {border:none;height:1px;}	1、hr默认：border:1px inset，height为2； 2、hr颜色在FF下由background-color定义、在IE下由color定义，故：请在实际使用中将两个属性都写上； 3、hr的盒模型在IE/FF下与在Chrome下不同，不推荐使用；
16	-	body, button,input,select,textarea {font:12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}	body, button,input,select,textarea {font:12px/1 Arial,Tahoma,Helvetica,SimSun,san-serif;}	1、小于12px的中文难于阅读； 2、在12px字体下小于12px的行高，文字会有重叠； 3、与字体大小相同的行高可避免不同浏览器对行高的解析差异，从而避免对齐问题，对具体文本内容再单独定义行高更合适； 4、表单元素在IE6下不继承，需单独设置字体样式； 5、KISSY对“宋体”二字使用ASCII码“\5b8b\4f53”表示，防止文本编码不同出现样式定义问题；     我在此推荐使用字体的英文表示方法（注意字体名有空格时要用引号括住），更加易读，如：     宋体：SimSun、     黑体：SimHei、     新宋体：NSimSun、     仿宋：FangSong、     楷体：KaiTi、     仿宋_GB2312：FangSong_GB2312、     楷体_GB2312：KaiTi_GB2312、     微软雅黑体：Microsoft YaHei；
17	-	a{text-decoration:none;} a:hover{text-decoration:underline;}	-	因为链接样式在具体页面表现各不相同，我倾向于不在Reset中重置，而在实际项目中定义；
18	-	html {overflow-y:scroll;}	-	1、在FF等非IE浏览器下，如果页面内容不满一屏时，默认是没有纵向滚动条的，增加此滚动条可以布局时更准确； 2、在设计时可以添加此属性，但发布时建议将它去除；

 

好，就这些了，我想通过上边表格的对比，各位看官也对我的这份Dawn CSS Reset有了初步认识。正如所有发布过CSS Reset的人所说，“这不是万能的”、“没有银弹”。所以各位如有何意见建议，欢迎在文后讨论。也希望我的总结能够对各位看官有所帮助。再啰嗦一句，这份Reset已经在数个项目中使用过，暂时没有遇到什么问题，呵呵。

PS：在此向因显示器不够宽，导致浏览器被上面表格撑出横向滚动条的朋友们致歉~我已为表格外的div设置了overflow:auto，应该不会破坏skin的布局了~

最后给出最终的代码：

/**
 * Dawn CSS Reset
 * Version: 1.0 beta
 * Update: 2009-07-27
 * Author: mingelz
 * URI: http://mingelz.com | http://www.cnblogs.com/mingelz
 * License: http://creativecommons.org/licenses/by-sa/3.0/
 */
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
li{list-style:none;}
fieldset,img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
q:before,q:after{content:'';}
abbr[title]{border-bottom:1px dotted;cursor:help;}
address,cite,dfn,em,var{font-style:normal;}
button,input,select,textarea{font-size:100%;}
legend{color:#000;}
code,kbd,samp{font-family:"Courier New",monospace;}
hr{border:none;height:1px;}
body,button,input,select,textarea{font:12px/1 Arial,Tahoma,Helvetica,SimSun,san-serif;}

最后更新日期：2009-8-12

版本更新历史：
v1.0beta[2009-8-12]：在实际项目中使用了一段时间，决定将之发布出来，因考虑到通用性，添加了对legend的重置；
v0.4[2009-7-27]：去掉了acronym标签的定义，HTM5已经抛弃了它，我们也对它说Byebye吧，当然也希望IE6早日Byebye；
v0.3[2009-7-23]：对每个标签进行了梳理，在YUI和KISSY的基础上总结出了一套新CSS Reset代码；
v0.2[2009-7-22]：对v0.1的代码进行了部分精简；
v0.1[2009-7-22]：在YUI的基础上添加了部分KISSY的代码；