芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
6

打造自己的 Reset.css

作者 芒果/分类 代码/发布于 2009-09-06 22:22

0. 引言

每每有新项目,第一步就是应当使用一个 reset.css 来重置样式。滥用不如不用,直接拿个现成的 reset.css 过来将导致后期各种离奇 bug 的发生。所以最好还是自己写一个 reset.css,并且要明白每一条 reset 都是用来做什么的。reset.css 本意就是重置样式,我始终建议把 .clearfix 放入 layout.css,而把 h1、h2 之类的定义放进 typography.css。 具体如何规划网站 CSS 结构,不在文本讨论之列,可以参考 Smashing Magazine 上的文章,国内有差强人意的中文译版。注意,本文把reset分成了两个部分,一个是纯 reset.css,可以用于任何项目。另一个是用于特定项目的 “reset”,自定义修改的内容,这些内容可以放在 layout.css、typography.css 之类的文件中,他们共同导入到一个 base.css 形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的 reset.css,以及介绍在设置玩 reset.css 之后需要针对不同项目要首先要设置的内容。

1. 基础

牛顿是站在巨人伽利略的肩膀上的,我们也可以这么做。首先我们要选定一个前进的基础。

请永远不要使用:

* { margin: 0; padding: 0; }

这问题太多了,在此不多加表述。

目前比较流行的有 Eric Meyer 的重置样式和 YUI 的重置样式。另有 Condensed Meyer Reset 简化Eric Meyer的样式。有趣的是,Eric 的重置样式也是源于 YUI 的。而那份简化版又把 Eric 的样式简化回 YUI 的样式了。但同时,糟糕的是,网上流传的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的,Eric 专门为有一个 reset.css 页面。而 YUI 当前版本 (2.7.0) 的 reset.css 实际地址里,比上面的页面中还多一些东西。此外,我们还可以基于一些常见的框架,比较著名的比如 Blueprint 或者 Elements CSS Framework(这个的 reset 也是源自于 Eric Meyer 的)。OK,准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的 reset。我这里主要采用 YUI,兼带 Eric 的 reset。

2. 默认色彩

对于页面是不是有默认背景色和前景色,YUI 和 Eric 有着不同的看法。

YUI 重置背景色为白色而文字颜色为黑色。

html {
    color: #000;
    background: #FFF;
}

而 Eric 在当前最新版中让所有颜色为透明,他认为透明才是最原始的颜色。虽然他曾一度认为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了,Eric 并没有给出具体理由。

这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是,如果你的设计本身就是白色背景,那么不要设置背景。一小部分中高水平的用户,他们会自定义网页默认背景色。设置成他们喜欢的背景色,比如浅蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重置则会破坏用户的选择——尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道,更高端的用户会用 Stylish 之类的 Firefox 扩展来自定义页面。但不得不说,只会用“选项”来调背景色的用户更多,不是么?而同时,如果设计本身就有其他背景色,比如黑色、蓝色、绿色之类的,OK,这些设计当然可以设置背景色。但请不要放进 reset.css 里。这里是重置样式的地方,不是你设计的地方。请把你的设计放在更广袤的土地上。

所以,简单说来,NO,不要在 reset 中设置背景色。

那么,文字颜色呢?原则上来说,也是不应该设置文字颜色的。但是IE中的表单元素中 legend 这个对象比较特别,跟主题结合的比较紧密。legend 会默认有自己的颜色(跟当前的主题有关)而不会继承父元素的颜色(即便设了color:inherit;)。

从某些角度来说,可以想当然地认为设置字体颜色人数远小于设置背景色的人数;以及认为就算设置了背景色,人们看到 legend 元素是黑色的也不会觉得奇怪。因此,YUI 在其 reset 中设置了 legend{color: #000;} 是无可厚非的。

但反过来说,把这个放到 typography.css 或者 form.css 里岂不是更好?不同的页面设计,其对 legend 的色彩要求很可能是不同的,放在 reset.css 里重复定义是没有必要的。因此这条 CSS 规则可以作为在 reset.css 之后首先应当设置的规则。

3. padding 和 margin

曾经一度流行的代码:

* { margin: 0; padding: 0; }

也就是出于这个目的。让各个元素的 padding 和 margin 都归零,尤其是那些 h1 和 p 以及 ul/ol/li 之类的元素,还有,body 本身也是有 margin 的。清除元素的 padding 和 margin 是很有用的。

YUI 这样做:

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

而 Eric 这样做:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

可以看到,Eric 把几乎所有的元素都写上了规则。而 YUI 只把有 padding 和 margin 的元素清空样式,而其他元素则不动。我个人比较偏好 YUI 的做法,因为他这样可以避免给一些无关元素带上不必要的样式。导致元素过多时的性能下降。但 Eric 的也有可取之处,他这样写,整个 reset.css 可以小上不少字节,对服务器的压力会小一些。但进一步想,这种做法跟用 * 来选择所有元素还有什么区别呢?这已经几乎囊括了所有元素了!你怎么用呢?看你自己喜好了。

4. 边框

YUI 里:

fieldset, img {
    border: 0;
}
abbr, acronym {
    border: 0;
    font-variant: normal;
}

Eric 已经在上一条中把所有的边框都清掉了,还是推荐用 YUI 的,理由同上。

5. 外边框 (outline)

这个就是元素获取焦点时的虚线框,在 ie 之外的浏览器上可以像下面 Eric 做的那样,通过设置 outline 来消除。

/* remember to define focus styles! */
:focus {
    outline: 0;
}

而 YUI 则没有设置这一条。而在 Eric 的样式中,可以看到 Eric 的提醒:务必重新定义获取焦点后的样式!
这点其实很重要,出于可访问性的角度出发,那些不便于使用鼠标的人基本上都是用 tab 导航来浏览网页的。获取焦点的元素有特定样式的话可以极大帮助这类群体的用户,通常建议设置成跟 :hover 一样。经常设计上会因为这个虚线框而大打折扣。因此这条保留在 reset 中,并且作为 reset.css 之后及早定义的规则。

另外,对于在 Firefox 之类的支持 outline 的浏览其中,除了获取焦点的元素外,浏览器本身并没有给元素设置 outline 属性,所以,像 Eric 那样把所有元素的 outline 设成 0,我就觉得没有太大必要了。

6. 字体样式 (font style/weight/size/variant)

YUI 里,分成了多条:

address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
    font-style: inherit;
    font-weight: inherit;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
abbr, acronym {
    border: 0;
    font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
    *font-size: 100%;
}

Eric 则在他最终版的 reset 中去掉了关于这些的样式重置,只保留了

font-size: 100%;

理由见下文。
但通常情况下,我认为还是重置一下这些样式好,比如 strong 元素,很多时候只是语义而已,并非希望他真的加粗。可能会有背景色或者其他方式来强调。而之所以这里都用了 inherit 这个继承属性而不是定义

font-weight: normal;

可以在 Eric 先前的 reset 文章中看到。这是为了防止——父元素字体加粗了,而没有一个子元素继承加粗属性(因为设置了 normal 属性)——这种情况的发生。所以把 YUI 中设置 h1-h6 的样式以及 abbr 和 acronym 的两句样式都改成 inherit 会比较好。

此外,对于 h1-h6 的字体大小定义,建议放到专门的 typography.css 里,不建议放在 reset.css 里。所以这里我同样倾向于用 YUI 的策略,全部重置。

但是很不幸,在 ie6/ie7 当中,不论是 strong 还是 h1-h6,亦或是 em 等元素,设置了 inherit 均无法继承父元素属性,依然保持自己的特色。这就带来了浏览器差异,样式重置本身是为了避免浏览器差异的,但现在带来了浏览器差异,是万万不可取的。对于这个问题我考虑了很久,到底是为了统一所有浏览器都重置成 normal(YUI 的想法),还是放弃重置这些元素,让他们顺其自然,来保证在所有浏览器中样式一样(Eric 的想法)。我最后决定采用 YUI 的做法。因为,无论重置成 normal 还是不重置,这些元素都无法继承父元素属性。既然如此,那么退而求其次,保证这些元素都恢复到普通外观,避免在设计的时候还要重置样式。
不得不说,这种妥协是仅仅针对 IE6 和 IE7 的,也许在 5 年后,老板和客户都不要求支持 IE7 的时候,我们可以放心大胆得使用 inherit 了。

此外,YUI 并没有给 code kbd samp tt 这几个元素重置字体大小。但实际上在 IE 中,他们都会被缩小显示。所以此处应当给予重置 font-size: 100%;

7. 行高 (line-height)

对于行高,YUI 并没有给出重置定义,而 Eric 则给出了重置:

body {
    line-height: 1;
}

行高默认所有元素都会继承的,所以给 body 设置行高为1就足够了。通常行高设为 1 时候,英文照常阅读,但中文就无法阅读了,行间距过于紧密导致容易看错行。通常在中文环境下得设置1.4到1.5才能是用户正常阅读。我建议是 1.5,这样算出来的值也是整数。比如字体大小 12px 的时候行高是 18px,字体大小 16px 时行高 24px。看起来也会比较舒服。此外,还有一个不设置成 1 的重要原因是:IE 下,行高为 1 时,中文字顶部会被削掉几像素,字体加粗时尤为明显。所以,重置的原则是好的,但切不可重置为 1。

8. 列表样式

YUI 用了:

li {
    list-style: none;
}

Eric 用了:

ol, ul {
    list-style: none;
}

尽管我没有测试出 YUI 的有什么问题,但我始终觉得设置 ol 和 ul 会比较稳妥。而且,波及的元素更少,性能应该更高一点。虽然下载量会多 3 字节。

9. 表格元素

在表格方面,都比较统一。均是:

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Eric 还提醒到,需要在 html 中设置 cellspacing=”0″ 来达到完美重置效果。
但此外 YUI 还设置了

caption, th {
    text-align: left;
}

让 caption 和 th 元素不要居中。作为重置,是可取的。建议添加此规则。

10. 上下标以及 baseline

YUI 写成

sup {
    vertical-align: baseline;
}
sub {
    vertical-align: baseline;
}

似乎没有优化,不知道为何没有写到一起去。而 Eric 则在最开始那条中就已经定义。而其中的问题是,YUI 这样定义了,但没有重置字体大小,这点是有所遗憾的。既然是重置样式,就彻底一些,所以建议改成这样的:

sup, sub {
    font-size: 100%;
    vertical-align: baseline;
}

同样对于 Eric 把所有元素都放到了 Baseline 上,包括上标下标。Eric 的解释是,强制让设计师精确定位这些元素的垂直偏移。

11. 插入和删除 (ins/del)

对于这个问题,YUI 直接清除了 ins 的下划线和 del 的删除线这两个文本装饰:

del, ins {
    text-decoration: none;
}

而 Eric 保留了删除线:

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

如何取舍?我选择 Eric 的,为什么我这里不追求完美的样式重置了呢?很简单,我这个 reset 的目标是为了让我们写页面的时候尽量避免浏览器默认样式,以及不同浏览器之间默认样式差异带来的问题。而del元素删除线的文本装饰,我相信没有人会反对的。有人会加上其他样式,比如字体变淡之类的,但对于 del 如此强语义的元素来说,没有什么比用删除线更能表达含义的了。而不像上面那个 focus 样式,未必人人喜欢虚线框。但似乎又没有什么浏览器默认不给 del 元素加删除线,故这条可以省略。
所以,这里我只重置 ins 样式,别忘了给 ins 元素在等下也添加一些样式。

12. 引用元素的引号

某些浏览器中,q 或者 blockquote 前后会出现引号。这个并不是谁都喜欢的。所以需要重置他。
YUI 的比较简单,只重置了 q:

q:before,
q:after {
    content: '';
}

而 Eric 则比较周到,把 q 和 blockquote 都重置了。

blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

OK,就决定用 Eric 的了,对于样式重置,细致一点周到一点总没有错。

13. 链接

对于链接,YUI 和 Eric 都没有采取样式重置,但从我思考许久后还是决定把链接样式重置放进来。究其原因,还是因为样式重置一来要彻底,二来对于链接样式并非所有设计师都喜欢用下划线装饰。因此,我还是建议把链接的下划线重置掉。

a {
    text-decoration: none;
}

但这样做有点粗糙。真正有下划线样式的其实只有 :link 和 :visited 所以改成下面这样比较好:

:link, :visited {
    text-decoration: none;
}

此外,对于链接颜色,可以作为 reset 后急需设置的规则来处理。直接放入 reset.css 中不是很合适。

14. 我的重置样式

总结上面种种规则,这里给出一下我的 CSS 重置规则,BSD 协议发布,请随意使用。测试样本(这个是从 YUI 那里复制过来的,感谢 YUI 为此做出的贡献。)
下载:reset.css  reset-min.css

/*
Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved.
http://shawphy.com/2009/03/my-own-reset-css.html
Based on YUI http://developer.yahoo.com/yui/reset/
and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
Licensed under the BSD License:
http://creativecommons.org/licenses/BSD/
version: 1.1 | 20090303
*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
fieldset, img {
    border: 0;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
    font-style: normal;
    font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
abbr, acronym {
    border: 0;
    font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
code, kbd, samp, tt {
    font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
    *font-size: 100%;
}
body {
    line-height: 1.5;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th {
    text-align: left;
}
sup, sub {
    font-size: 100%;
    vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
    text-decoration: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

15. 完成一个初步的 CSS 框架

之前提到了,样式重置作为一个所有项目可以使用的共性存在,而不同的项目应当有其个性。当然还有其他一些共性,不属于样式重置的部分,但同样重要。再往下讲就可以做一个 CSS 框架了。CSS 框架所要考虑的内容远比一个 CSS Reset 要考虑的多很多,这里只是点到为止,不做更多展开。

layout.css

首先除了 reset.css 之外要建立的 layout.css,这里目前主要推荐放入 .clearfix。清除浮动很重要。但这不属于样式重置,放在布局当中正合适。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

此外,layout.css 中还可以放入自己常用的布局,比如

#wrap{margin:0 auto;width:960px;}

之类的规则。看个人喜好而定。

typography.css

这里可以放置很多规则,非常重要的是以下三个:

:focus, a, ins

这三个是被重置掉的,但又很重要的内容,建议在 reset 之后立即在 typography 中设定全站样式,保持样式统一。
ins 可以单独设置,:focus 最好设置成跟 :hover 一样,而 a 的样式还是按照 LoVe,HAte 的法则来设置。

h1-h6 系列也是之前被重置掉的。可以考虑在这里设置样式。按站点特性来定。我个人是不喜欢全局定义 hx 系列的字体大小的,统一为 100% 我觉得挺好。

接下来要设置的是 font-family 属性,可以参考射雕的文章。另外,小麦的文章中提到,表单元素的字体在 IE 中都不能继承父元素的字体,所以要单独设置。

至于其他需要全局设置的,可以参考前文中的叙述,找到相应的部分添加到 typography.css 中即可。这样就可以在保证 reset.css 通用性的情况下,使不同的项目又有个性。尽量保证 reset.css 在所有项目中都是一样的。有利于项目的开发。最后不要忘记在写表格的时候加 cellspacing=”0″ 来达到完美重置效果。

转载自 打造自己的 reset.css | 走走停停看看

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/create-your-own-reset-css/" title="打造自己的 Reset.css" rel="bookmark">打造自己的 Reset.css | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 6 条群众意见

  1. Hobo /2009-09-07 08:09

    对于我这种从来都是直接写 CSS,然后哪有问题折腾哪的人来说,真的是很重要的教程。 回应

    #1
  2. 服装批发 /2009-09-07 18:15

    嗯,我也拿来和 EC 的那个参考一下。 回应

    #2
  3. hiro /2009-09-07 20:25

    我喜欢 YUI 的 reset,不过会加上自己网站中常用的标签! 回应

    #3
  4. 万戈 /2009-09-07 22:07

    真正真正地学习了! 回应

    #4
  5. ?
    打造自己的 Reset.css | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-07-08 08:03

    […] 转载至:打造自己的 Reset.css | 芒果小站 分类: html, 其它 标签: 临时 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟CSS 左右两栏自适应布局详解 CSS 的优先权基于 YUI 2.8 的层染色褪色效果兼容不同浏览器的 CSS Hack 写法利用 iframe 假装异步提交表单PHP 动态输出 X-UA-Compatible 参数CSS 边框重叠鼠标悬停效果神奇的 CSS 元素透明法JavaScript 中的对象引用机制 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #5
  6. ?
    button出现的不明空白 - web前端 - 开发者问答 /2013-05-02 15:56

    […] http://mangguo.org/create-your-own-reset-css/ 这里没把button的margin […] 回应

    #6

下面我简单说几句