• 一份适合中文的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的代码；
  • 相关阅读:
    面向对象的----多态性
    UIWebView控件
    UIImageView控件
    UIDatePicker控件
    UIActivityIndicatorView控件
    UIProgressView控件
    XIB文件链接controller文件&&加载rootviewcontroller
    UISegmentedControl控件
    UISlider控件
    UISwitch控件
  • 原文地址：https://www.cnblogs.com/tangge/p/2059328.html
Copyright © 2020-2023  润新知