zoukankan      html  css  js  c++  java
  • Reset CSS:只选对的,不选"贵"的

      玉伯和正淳一起整理的一份 reset.css: 

     1 /*
     2 KISSY CSS Reset
     3 理念:清除和重置是紧密不可分的
     4 特色:1.适应中文 2.基于最新主流浏览器
     5 维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
     6 */
     7 
     8 /* 清除内外边距 */
     9 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
    10 dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
    11 pre, /* text formatting elements 文本格式元素 */
    12 fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
    13 th, td { /* table elements 表格元素 */
    14     margin: 0;
    15     padding: 0;
    16 }
    17 
    18 /* 设置默认字体 */
    19 body,
    20 button, input, select, textarea { /* for ie */
    21     /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    22     font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
    23 }
    24 
    25 h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
    26 h2 { font-size: 16px; }
    27 h3 { font-size: 14px; }
    28 h4, h5, h6 { font-size: 100%; }
    29 
    30 address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
    31 code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
    32 small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
    33 
    34 /* 重置列表元素 */
    35 ul, ol { list-style: none; }
    36 
    37 /* 重置文本格式元素 */
    38 a { text-decoration: none; }
    39 a:hover { text-decoration: underline; }
    40 
    41 abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
    42     border-bottom: 1px dotted;
    43     cursor: help;
    44 }
    45 
    46 q:before, q:after { content: ''; }
    47 
    48 /* 重置表单元素 */
    49 legend { color: #000; } /* for ie6 */
    50 fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
    51 /* 注:optgroup 无法扶正 */
    52 button, input, select, textarea {
    53     font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
    54 }
    55 
    56 /* 重置表格元素 */
    57 table {
    58     border-collapse: collapse;
    59     border-spacing: 0;
    60 }
    61 
    62 /* 重置 hr */
    63 hr {
    64     border: none;
    65     height: 1px;
    66 }
    67 
    68 /* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
    69 html { overflow-y: scroll; }

    测试过的浏览器:IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+       

     解释一些和 YUI cssreset 的差异点:

    1 清除内外边距的元素,去掉了 div, code(在测试浏览器中,没发现有边距), 增加了 button(感觉是 YUI 遗漏了). 
    2 去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中,没有发现差异。(要设的话,推荐background: transparent) 
    3 对于 address, caption, …, em, strong 等文本格式元素,做了调整。保留了 strong 和 th 的粗体。 
    4 对 abbr 和 acronym 做了调整,使得在非 ie6 下可视性更好。 
    5 去掉了 sup 和 sub 的样式,直接用浏览器默认的即可。 
    6 对于 input, select, textarea 表单元素,去掉了针对 ie 的 inherit, 只保留了 font-size 的 inherit hack. 因为其它 hack 经测试已失效。 
    7 增加了一些元素的默认样式。

    此外,对整体代码的组织形式做了调整,按照元素的类别将代码进行了分组

    如何使用

    请记住:永远不存在万能解决方案,永远没有银弹。

    因此我的建议和 Eric 是一样的:请根据具体需求,适量裁剪和修改后再使用

    比如针对淘宝,可以在 reset.css 的基础上,修改为 reset-taobao.css.

    如果是个人博客,我个人喜欢的一个方案是:reset-blog.css.

    相关测试页面请查看:cssreset svn.
    真实使用时,请用压缩后的版本:reset-min.css.

    对于 reset.css 本身,我们期待它能尽量多的适用于各种场景,但不期待它能解决所有问题。目前而言,reset.css 里的默认样式,是玉伯和正淳等各位同事和朋友们实践经验的总结,算是“精挑细选”,但不期待能解决所有问题。

    最后,期待你的参与和建议。如果这份 reset.css 能有幸在你的项目中得到使用,则非常期待你的反馈。

    作者建议:

    1.真是项目中可以这样:Reset css +fonts.css /base.css/layout.css.......相结合的方式

    2.在reset css中 没用到的元素可以直接拿掉,减少代码量

    3.在reset css中做好版本维护信息,方便扩展

    最后建议:

    网上所有的Reset css 都不是你自己的Reset css ,包括玉伯整理的这个,使用前请深思本文开头的话,量身打造,只选对的,不选"贵"的。

    本文转载自http://www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html

  • 相关阅读:
    【转】iPython入门技巧
    Python——IPython和NumPy
    Python——类与对象,异常处理
    Python——函数,模块,简单文件读写
    给对象的key 设置成变量
    antd 表单validateFields validateFieldsAndScroll方法不执行
    css 设置禁用
    where与having区别
    重温robotframework--day1
    Linux下查看文件内容的命令
  • 原文地址:https://www.cnblogs.com/yiguozhi/p/5525105.html
Copyright © 2011-2022 走看看