一份适合中文的CSS RESET --- Dawn CSS Reset

以下内容摘自 http://mingelz.com/2009/08/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]备注1body,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是有外边距的，但我们实际使用中该值不定，应加上；2h1,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、标题肯定是要着重显示的，不加粗才属于特例；
结论：只重置字体大小，不重置字体粗细；3li
{list-style:none;}ul,ol
{list-style:none;}li
{list-style:none;}1、list-style样式确实是定义在li标签上的；4fieldset,img
{border:0;}fieldset,img
{border:0;}fieldset,img
{border:0;}1、input、select、textarea默认也有边框，基于优雅降级的思想没有将它们的边框在Reset中清除，当使用背景图片修饰时，记得清除边框；5table
{border-collapse:collapse;border-spacing:0;}table
{border-collapse:collapse;border-spacing:0;}table
{border-collapse:collapse;border-spacing:0;}-6q:before,q:after
{content:”;}q:before,q:after
{content:”;}q:before,q:after
{content:”;}1、q标签默认会在内容前加前引号（“）在内容后加后引号(”)，可能会影响实际效果，故去除；7abbr,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吧！8address,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还不加粗那真的属于特例了；9input,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默认为斜体，且无法扶正；10legend
{color:#000;}legend
{color:#000;}legend
{color:#000;}1、IE6下legend元素颜色继承自Windows系统的主题样式；
2、请在页面布局时根据实际需要修改legend颜色；11html
{color:#000;background:#FFF;}--1、所有浏览器默认相同；
2、背景颜色可能会继承自Windows系统的主题颜色；
结论：在实际项目中根据需要定义不同颜色；12sup{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的代码；