| 一份适合中文的CSS RESET --- Dawn CSS Reset |
|---|
|
#1 (permalink)
| |
| 正式会员 ![]() ![]() 注册日期: 2009-08-28
帖子: 59
声望力: 2 ![]() ![]() 下载/声望点数: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进行一个简单的评价(一家之言,欢迎各位拍砖):
下边由本人操刀的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的代码; 此帖于 2009-10-27 21:04 被 imgimg 编辑。 |
| | |
|
#2 (permalink)
| |
| 超级版主 ![]() 注册日期: 2008-05-08
帖子: 557
声望力: 27 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 下载/声望点数:2407 |
Reset这个东西有时候真的是不想用,因为有时候真的很需要一些默认的样式,尤其是列表的那些,Reset没了以后,一旦需要列表,那么就得单独给列表加样式,而有些时候是给代码加不上的。
___ DeadFire 的签名 ________________________ ■ZIY 社区新手报道必读 ■新手发帖被警告问题集 ■新手获取声望点必读:如何快速取得下载权限 ■无下载权限的用户请查看:如何获得下载权限 ■获得一个“感谢”可增加3点声望,70点以上声望自动升级为正式会员,正式会员可下载站内附件资源 ___ 开始宣传网站了 : ________________________ ■猫和狗 ■烈日音乐网 ■Linux 中国 ■田野清香 ■蔚州大酒店 |
| | |
| ↑ 返回顶端 ↑ |
![]() |
| 主题工具 | |
| |
相似的主题 | ||||
| 主题 | 主题作者 | 版面 | 回复 | 最后发表 |
| 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 |