CSS教程

关注公众号 jb51net

关闭
网页制作 > CSS > CSS教程 >

编写适合所有项目的通用的reset.css

佚名


本文就是来介绍如何写一个合适所有项目的通用的reset.css,以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。
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。