www.baike369.com
百科369 > CSS教程 > CSS使用、维护和组织样式表

CSS使用、维护和组织样式表


CSS使用样式表

CSS虽然有多种方式的样式表可以根据需要随意运用,但是在实际应用中,本着表现与内容分离的原则,在这里推荐使用外部样式表。优点如下:

  • 独立于(X)HTML文件,便于修改。
  • 多个文件可以引用同一个样式表文件,从而保持页面外观的统一。
  • 同一个样式表文件,浏览器只需要下载一次,就可以在其它同样链接了该文件的页面内使用。
  • 浏览器会先显示(X)HTML内容,然后再根据样式表文件进行渲染,从而使访问者可以更快地看到内容。

由于可以同时使用多个外部样式表,因此可以把样式分类存放在不同的文件中,在不同的页面中调用不同的外部样式文件。例如一个网站的首页可以使用下面的代码:

<link rel="stylesheet" href="basic.css" type="text/css" media="screen" />/*页面公用样式*/
<link rel="stylesheet" href="home.css" type="text/css" media="screen" />/*页面专用样式*/

而其“博客”频道,则可以使用:

<link rel="stylesheet" href="basic.css" type="text/css" media="screen" />/*页面公用样式*/
<link rel="stylesheet" href="blog.css" type="text/css" media="screen" />/*博客专用样式*/

而其“论坛”频道,则可以使用:

<link rel="stylesheet" href="basic.css" type="text/css" media="screen" />/*页面公用样式*/
<link rel="stylesheet" href="bbs.css" type="text/css" media="screen" />/*论坛专用样式*/

不过在特殊情况下,也要灵活使用内部样式表和行内样式。例如,由于浏览器先载入(X)HTML文件,后载入外部样式表文件,然后再进行渲染,因此,大型网站为了防止首页加载后可能出现的无样式的情况,会对首页采用内部样式表的方法。


CSS维护和组织样式表

对于小型网站,也许一个样式表文件就可以容纳所需要的样式规则,但是对于中大型网站,样式表文件可能会变得庞大无比,每个栏目也许都有自己独特的样式,而不同的开发人员,对于样式的命名以及调用都有自己的偏好。

那么如何来组织这些样式表文件也成为一个很重要的问题。下面将介绍比较好的管理样式表的方法:

1. 分目录放置

将针对不同媒体的样式表放置在不同的文件夹可以利于查找和管理。例如:

1)在网站的根目录建立“CSS”文件夹。

2)在“CSS”文件夹内建立针对不同的媒体建立不同的文件夹,如“screen”、“print”等文件夹。

3)将相应的文件放置在这些文件夹内。

2. 多个样式表

在一个网站中,往往不同的栏目和页面有一部分使用相同的样式,而另一部分使用不同的样式。例如,每个页面的头部导航可能是一样的,但是注册页面需要表单的样式,而普通的内容页则不需要。

按照不同的功能模块把样式放在不同的文件内,只在需要的(X)HTML文件内调用相应的文件。例如:

  • 将最基本的样式规则(字体控制、颜色等)保存在“default.css”文件内。
  • 将对表单元素的样式规则保存在“form.css”文件内。
  • 将控制版面布局的样式规则保存在“layout.css”文件内等。

同时,可以使用@import将几个CSS文件组成1个CSS文件以方便在(X)HTML文件内调用。例如在“home.html”文件内使用外部样式表base.css,而在“base.css”文件内使用@import。如下所示:

<script type="text/javascript"></script>
<style type="text/css" media="all">
<!--
@import url(default.css);
@import url(layout.css);
-->
</style>
Copyright© 2011-2016 www.baike369.com All Rights Reserved