回复
主题工具
一份适合中文的CSS RESET --- Dawn CSS Reset
imgimg   #1 (permalink) 旧 2009-10-27, 20:06
正式会员
 
imgimg 的头像
 
注册日期: 2009-08-28
帖子: 59
声望力: 2
imgimg 身上有一圈迷人的光环哦imgimg 身上有一圈迷人的光环哦
下载/声望点数:192
一份适合中文的CSS RESET --- Dawn CSS Reset

以下内容摘自 http://mingelz.com/2009/08/dawn-css-reset/



Dawn CSS Reset


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


首先我对自己所熟知的4套CSS Reset进行一个简单的评价(一家之言,欢迎各位拍砖):
  • <LI done0="15">YUI CSS Reset:是我之前一直在用的Reset,按照元素的作用及默认样式分类,将它们的默认样式去除,最终基本所有元素在所有浏览器下长的都一样,当然相比Eric的Reset,YUI仁慈了许多; <LI done0="16">Eric Reset CSS:杀伤力最大的一套Reset,从第一处定义就可以看到,把所有元素的内外边距、边框置为0,连outline都不放过,连:focus的outline都不放过……经Eric之手,世界终于清静了……个人感觉Eric的思路是“HTML元素默认样式性本恶”,所以要全部除之而后快,但这样难免让一些本可以帮助我们的样式也一起灰飞烟灭了; <LI done0="17">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的代码;

此帖于 2009-10-27 21:04 被 imgimg 编辑。
imgimg 当前离线   回复时引用此帖
DeadFire   #2 (permalink) 旧 2009-10-28, 10:33
超级版主
 
DeadFire 的头像
 
注册日期: 2008-05-08
帖子: 557
声望力: 27
DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星DeadFire 绝对是天王巨星
下载/声望点数:2407
Reset这个东西有时候真的是不想用,因为有时候真的很需要一些默认的样式,尤其是列表的那些,Reset没了以后,一旦需要列表,那么就得单独给列表加样式,而有些时候是给代码加不上的。

___ DeadFire 的签名 ________________________
           ■ZIY 社区新手报道必读                    ■新手发帖被警告问题集
           ■新手获取声望点必读:如何快速取得下载权限        ■无下载权限的用户请查看:如何获得下载权限
           ■获得一个“感谢”可增加3点声望,70点以上声望自动升级为正式会员,正式会员可下载站内附件资源

___ 开始宣传网站了 : ________________________
           ■猫和狗 ■烈日音乐网 ■Linux 中国 ■田野清香 ■蔚州大酒店
DeadFire 当前离线   回复时引用此帖
imgimg   #3 (permalink) 旧 2009-10-28, 14:23
正式会员
 
imgimg 的头像
 
注册日期: 2009-08-28
帖子: 59
声望力: 2
imgimg 身上有一圈迷人的光环哦imgimg 身上有一圈迷人的光环哦
下载/声望点数:192
比起损失 ...重新添加样式定义

比起开着数个浏览器再加上 IE TESTER 一个一个PX地调整位置舒服多了................

CSS HACK用起来更烦人....

还是RESET了世界清静了..
imgimg 当前离线   回复时引用此帖
↑ 返回顶端 ↑
回复

主题工具


相似的主题
主题 主题作者 版面 回复 最后发表
CSS DIV+CSS网页布局入门 sylee79 Web 设计交流 2 2010-07-10 12:39
CSS 再推荐一个最简单的CSS框架-- META CSS imgimg Web 设计交流 1 2009-10-28 10:24
CSS 15个CSS框架简介 Xiao_T Web 设计交流 4 2009-09-18 19:48
WebApp网站列表: 网站设计相关在线服务列表 Kevin_Zhou 建站技术讨论 1 2008-12-15 15:22
关于CSS框架网页的设计 pctingyu 建站技术讨论 1 2008-10-14 16:04

Automatic Translations (Powered by Powered by Google):
Afrikaans Albanian Arabic Belarusian Bulgarian Catalan Chinese Croatian Czech Danish Dutch English Estonian Filipino Finnish French Galician German Greek Hebrew Hindi Hungarian Icelandic Indonesian Irish Italian Japanese Korean Latvian Lithuanian Macedonian Malay Maltese Norwegian Persian Polish Portuguese Romanian Russian Serbian Slovak Slovenian Spanish Swahili Swedish Taiwanese Thai Turkish Ukrainian Vietnamese Welsh Yiddish