《自己写重置样式Reset》由会员分享，可在线阅读，更多相关《自己写重置样式Reset（11页珍藏版）》请在金锄头文库上搜索。
1、自己写重置样式 Reset.css2009-3-3 18:57:02 已被阅读： 233 发表评论0、引言每每有新项目，第一步就是应当使用一个 reset.css 来重置样式。滥用不如不用，直接拿个现成的 reset.css 过来将导致后期各种离奇 bug的发生。所以最好还是自己写一个 reset.css，并且要明白每一条 reset 都是用来做什么的。reset.css 本意就是重置样式，我始终建议把.clearfix 放入 layout.css,而把 h1、h2 之类的定义放进 typography.css。 具体如何规划网站 CSS 结构，不在文本讨论之列，可以参考Smashing Ma
2、gazine 上的文章，国内有差强人意的中文译版。注意，本文把 reset 分成了两个部分，一个是纯 reset.css，可以用于任何项目。另一个是用于特定项目的“reset”，自定义修改的内容，这些内容可以放在 layout.css、typography.css 之类的文件中，他们共同导入到一个 base.css 形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的 reset.css，以及介绍在设置玩 reset.css 之后需要针对不同项目要首先要设置的内容。1、基础牛顿是站在巨人伽利略的肩膀上的，我们也可以这么做。首先我们要选定一个前进的基础。请永远不要使用* marg
3、in: 0; padding: 0; 这问题太多了，在此不多加表述。目前比较流行的有 Eric Meyer 的重置样式和 YUI 的重置样式。另有 Condensed Meyer Reset 简化 Eric Meyer 的样式。有趣的是，Eric 的重置样式也是源于 YUI 的。而那份简化版又把 Eric 的样式简化回 YUI 的样式了 。但同时，糟糕的是，网上流传的比较广的 (尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的，Eric 专门为有一个 reset.css 页面。而 YUI 当前版本(2.7.0)的 reset.css实际地址里，比上面的页面中还多一些东西。此外
4、，我们还可以基于一些常见的框架，比较著名的比如 Blueprint 或者 Elements CSS Framework（这个的 reset 也是源自于 Eric Meyer 的）。OK，准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的reset。我这里主要采用 YUI，兼带 Eric 的 reset。2、默认色彩对于页面是不是有默认背景色和前景色，YUI 和 Eric 有着不同的看法。YUI 重置背景色为白色而文字颜色为黑色。html color: #000;background: #FFF;而 Eric 在当前最新版中让所有颜色为透明，他认为透明才是最原始的颜色。虽然他曾一度认
5、为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了，Eric 并没有给出具体理由。这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是，如果你的设计本身就是白色背景，那么不要设置背景。一小部分中高水平的用户，他们会自定义网页默认背景色。设置成他们喜欢的背景色，比如浅蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重置则会破坏用户的选择尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道，更高端的用户会用 Stylish 之类的 Firefox 扩展来自定义页面。但不得不说，只会用 “选项 ”来调背景色的用户更多，不是么？而同时，如果设计本身就有
6、其他背景色，比如黑色、蓝色、绿色之类的，OK，这些设计当然可以设置背景色。但请不要放进 reset.css 里。这里是重置样式的地方，不是你设计的地方。请把你的设计放在更广袤的土地上。所以，简单说来，NO，不要在 reset 中设置背景色。那么，文字颜色呢？原则上来说，也是不应该设置文字颜色的。但是 IE 中的表单元素中 legend 这个对象比较特别，跟主题结合的比较紧密。legend 会默认有自己的颜色（跟当前的主题有关）而不会继承父元素的颜色（即便设了 color:inherit;）。从某些角度来说，可以想当然地认为设置字体颜色人数远小于设置背景色的人数；以及认为就算设置了背景色，人们看
7、到 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 都归零，尤其
8、是那些 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, ifr
9、ame,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
10、: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;可以看到，Eric 把几乎所有的元素都写上了规则。而 YUI 只把有 padding 和 margin 的元素清空样式，而其他元素则不动。我个人比较偏好 YUI 的做法，因为他这样可以避免给一些无关元素带上不必要的样式。导致元素过多时的性能下降。但 Eric 的也有可取之处，他这样写，整个 reset.css 可以小上不少字节，对服务器的压力会小一些。但进一步想，这种做法跟用 * 来选择所有元素
11、还有什么区别呢？这已经几乎囊括了所有元素了！你怎么用呢？看你自己喜好了。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 则没有设置这一条
12、。而在 Eric 的样式中，可以看到 Eric 的提醒：务必重新定义获取焦点后的样式！这点其实很重要，出于可访问性的角度出发，那些不便于使用鼠标的人基本上都是用 tab 导航来浏览网页的。获取焦点的元素有特定样式的话可以极大帮助这类群体的用户，通常建议设置成跟:hover 一样。经常设计上会因为这个虚线框而大打折扣。因此这条保留在 reset中，并且作为 reset.css 之后及早定义的规则。另外，对于在 Firefox 之类的支持 outline 的浏览其中，除了获取焦点的元素外，浏览器本身并没有给元素设置 outline 属性，所以，像Eric 那样把所有元素的 outline 设成 0
13、，我就觉得没有太大必要了。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,sele
14、ct, 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%;理由见下文。但通常情况下，我认为还是重置一下这些样式好
15、，比如 strong 元素，很多时候只是语义而已，并非希望他真的加粗。可能会有背景色或者其他方式来强调。而之所以这里都用了 inherit 这个继承属性而不是定义font-weight: normal;可以在 Eric 先前的 reset 文章 中看到。这是为了防止父元素字体加粗了，而没有一个子元素继承加粗属性（因为设置了 normal）这种情况的发生。所以把 YUI 中设置 h1-h6 的样式以及 abbr 和 acronym 的两句样式都改成 inherit 会比较好。此外，对于 h1-h6 的字体大小定义，建议放到专门的 typography.css 里，不建议放在 reset.css
16、里。所以这里我同样倾向于用 YUI 的策略，全部重置。但是很不幸，在 ie6/ie7 当中，不论是 strong 还是 h1-h6,亦或是 em 等元素，设置了 inherit 均无法继承父元素属性，依然保持自己的特色。这就带来了浏览器差异，样式重置本身是为了避免浏览器差异的，但现在带来了浏览器差异，是万万不可取的。对于这个问题我考虑了很久，到底是为了统一所有浏览器都重置成 normal（YUI 的想法），还是放弃重置这些元素，让他们顺其自然，来保证在所有浏览器中样式一样（Eric 的想法）。我最后决定采用 YUI 的做法。因为，无论重置成 normal 还是不重置，这些元素都无法继承父元素属性。既然如此，那么退而求其次，保证这些元素都恢复到普通外观，避免在设计的时候还要重置样式。不得不说，这种妥协是仅仅针对 IE6 和 IE7 的，也许在 5 年后，老板和客户都不要求支持 IE7 的时候，我们可以放心大胆得使用 inherit了。此外，YUI 并没有给 code kb
