1.5.1  导入样式表

当希望样式化整个站点而不是单个页面时，较好的管理样式表的方法是将它们完全从Web页面中移除，放到单独的文件中，然后导入需要的文件。这样针对不同的布局(如Web布局和打印布局)就有了不同的样式表，而不会改变HTML。

可以通过两种不同的方法达到此目的，一种是使用CSS的@import指令，如下所示：

<style>

@import url("/css/styles.css");

</style>

这一语句告诉浏览器从/css文件夹中取出名为styles.css的样式表。@import命令是非常灵活的，如可以创建导入其他样式表的样式表等。但要确保在任何外部样式表中没有<style>或</style>标记，否则就不行。

1. 从HTML内部导入CSS

也可以用HTML<link>标记包括进样式表，如下所示：

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

这与@import指令的效果是一样的，除了<link>是个HTML标记，而不是个有效的样式指令外。因此，它不能用于从一个样式表中导入另一个样式表，也不能放在<style>…</style>标记对中。

正如可以在CSS中使用多个@import指令包括多个外部样式表一样，也可以在HTML中使用任意多条<link>语句。

1.5.2  局部样式设置

也可以分情况单独设置或覆盖当前页面上的特定样式，方法是直接在HTML中插入样式语句，如下所示(该样式语句使标记中的文本为蓝色斜体)：

<div style="font-style:italic; color:blue;">Hello</div>

但这应只限于最特殊的情况，因为它破坏了内容和布局的分离性。

1.5.3  ID和类

设置元素样式的更好方法是在HTML中给它赋一个ID，如下所示：

<div id='iblue'>Hello</div>

该语句声明了ID为iblue的div元素的内容应采用在相应#iblue样式设置中定义的样式。匹配的CSS语句如下所示：

#iblue { font-style:italic; color:blue; }

注意符号#的使用，它指定只有名称为iblue的ID用这一语句样式化。

如果想对多个元素应用同一样式，不必给每个元素都指定一个不同的ID，可指定一个类对它们一起进行管理，如下所示：

<div class="iblue">Hello</div>

其声明了这个元素(及其他使用该类的元素)的内容应采用在相应iblue类中定义的样式。如果应用类，可在页面头部或在外部样式表中使用下列样式设置为类设置样式：

.iblue { font-style:italic; color:blue; }

类语句不使用#符号(这是为ID保留的)，而是以(.)符号开头。

注意：

除了使用单个ID或类外，还有很多对元素应用样式的方式。第2章有详细介绍。