首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 网页制作CSS教程

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

来源: 互联网    日期:2009-3-4
 

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。



文章共6页:  [1] [2] [3] [4] [5] [6]


更多的编写适合所有项目的通用的reset.css请到论坛查看: http://BBS.TC711.COM



【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源: 互联网    日期:2009-3-4   

发 表 评 论
查看评论

  您的大名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容: 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网,如有侵犯您的版权或其他问题,请通知管理员,我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报