一份适合中文的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受到了YUIKISSY的影响与启发,在此表示感谢。

为了让大家更好的理解我在处理这些重置样式时的想法,并将之与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的代码;

原文地址:https://www.cnblogs.com/tangge/p/2059328.html