您现在的位置:学赛首页 > 新手教程 > HTML&CSS > 正文
精通CSS:规划、组织和维护样式表
http://www.educity.cn 作者:《精通CSS:高级Web标准解决方案》 来源:希赛网 2007年9月11日 发表评论 进入社区
《精通CSS:高级Web标准解决方案》 章节连载 >>>

    1.3  规划、组织和维护样式表

    站点越大、越复杂、图形越丰富,CSS就越难管理。在本节中,将讨论管理代码的方法,包括将文件分割为多个样式表、按逻辑对样式进行分组以及通过添加注释使代码更容易阅读。

    1.3.1  对文档应用样式

    可以将样式放在style标签之间,从而直接在文档头上添加样式,但是,这不是对文档应用样式的好方法。如果要创建使用相同样式的另一个页面,那么就不得不在新页面上复制CSS。如果以后要修改样式,那么就不得不在两处进行修改,而不是在一处。幸运的是,CSS允许将所有样式放在一个或多个外部样式表中。将外部样式表附着到网页上有两种方法。可以链接它们,也可以导入它们:

    <link href="/css/basic.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
  <!--
  @import url("/css/advanced.css");
  -->
  </style>

    Netscape 4等老式浏览器不理解导入。因此,可以使用导入对老式浏览器隐藏它们不理解的复杂样式。在前面的示例中,链接了一个简单的样式表,其中包含大多数浏览器都能理解的基本样式。然后导入了一个比较高级的样式表,其中包含比较复杂的样式,比如浮动和定位布局。可以利用这种方法分别为老式浏览器和比较现代的版本创建不同的设计。

    并非只能导入到(X)HTML文档中。还可以从另一个样式表导入样式表。因此,可以从(X)HTML页面链接基本样式表,然后将复杂的样式表导入这个样式表(见图1-4):

    图1-4  可以将多个样式表导入一个样式表,然后将这个样式表链接到HTML页面中

    @import url(/css/layout.css);
  @import url(/css/typography.css);
  @import url(/css/color.css);

    这可以降低(X)HTML文档的复杂性,并且允许在一个位置管理所有样式表。导入规则需要放在样式表的最前面,否则它们可能工作不正常。因为先考虑导入的样式表,然后再考虑链接的样式表,所以一定要记住链接的样式表中的规则会覆盖导入的规则。

    尽管从理论上说可以将样式表导入到本身也被导入的样式表中,但是对这种链式结构或多层嵌套的支持不完善。因此,应该避免两层以上的嵌套导入。

    现在使用Netscape 4的人已经非常少了,所以可能不需要太为这种浏览器操心。可以省去简单的链接样式表,直接导入样式。但是Windows的IE 5/6有一种奇怪的特性,它会影响只使用导入规则的页面。当装载受影响的页面时,在最终显示样式之前,页面暂时以无样式的形式显示。这个bug称为“Flash of Unstyled Content”(简称为FOUC)bug。在文档头中放一个link或script元素可以避免这个bug,所以即使不为支持Netscape 4操心,可能仍然需要链接基本的样式表,然后再从那里导入样式。

购买《精通CSS:高级Web标准解决方案》http://shop.csai.cn/itbook/itbookinfo.asp?lbbh=10014414