Reset CSS:只选对的,不选"贵"的

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

 1 /*
 2 KISSY CSS Reset
 3 理念:清除和重置是紧密不可分的
 4 特色:1.适应中文 2.基于最新主流浏览器
 5 维护:玉伯([email protected]), 正淳([email protected])
 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, "\5b8b\4f53", 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

时间: 2024-08-10 23:30:35

Reset CSS:只选对的,不选"贵"的的相关文章

ERP选型:怎样只选对的不选贵的

常言道:万事开头难.ERP选型作为ERP实施的开端也是如此,侧面说明了其难度.又有道:好的开端是成功的一半!又可见其重要性.从方法论的角度和层面分析怎样只选对的,不选贵的——既要保证满足企业管理的需求.又要注重软件的性价比. 选型就是决策,那就先从决策人谈起 ERP选型的决策中,每位参与者的意见都是他理性思维的结果吗?答案是谁都不是一个人在做决定,在一个毫无干扰的真空世界里做决定.相反,你的身边充斥着和你一样的决策者,他们的决策和你的决策相互作用.往往在选型的出发点.目标期望等关键问题上— —即

jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

<!doctype html><html> <head> <meta charset="utf-8"> <title>jQuery实现复选框的全选.反选.并且根据复选框的(checked属性)控制多个对应div的显示/隐藏</title> <script type="text/javascript" src="jquery-1.11.3.min.js"></

jQuery实现复选框的全选与全不选

对于复选框的选中checked属性,实在是无力吐槽. 从上图可以看出,当复选框不设置checked属性时,默认没有被选中:其它三种情况,设置checked属性但不设置属性值即置空,或者将checked属性值设为true/false,都是默认被选中. 我们来看看W3C上的介绍: 结合开头的实例,我们可以不给复选框设置checked属性,利用js设置复选框的checked属性值,如下: 由上不难看出,3默认被选中 基于此,全选与全不选就很好做了,此处只贴从最近的一个项目中截取的部分代码,亲测有效:

如何实现复选框的全选和取消全选效果

如何实现复选框的全选和取消全选效果:在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

zepto全选按钮之全选会根据按钮是否被全部选中更改状态

在做手机端二次开发购物车的时候,发现zepto全选,没找到,或者功能不是自己想要的 后来做好,分享给需要的人 //全选或多选处理      var CheckAll = $('#items_check_all');    var checkbox = $('input[name^="check"]');    var removeUrl = '<{link app=b2c ctl=wap_cart act=remove}>';        //初始化,把所有选中的加上状态

JavaScript - 复选框的全选和取消

复选框的全选和取消 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&

jquery中的全选,全不选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>数据管理</title> &l

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> <script type=&qu