CSS样式表文件

2.2.3　CSS样式表文件

建设网站时，通常要把一个CSS样式应用到整个站点的所有网页中去，这可以通过CSS样式表文件来实现，CSS样式表文件是将多个CSS样式定义集中保存在一起的一个文件，文件扩展名为.css。当其他网页要使用此样式表文件中的样式时，只要把此样式表文件链接到这些网页就可以了。创建CSS样式表文件的方法有两种。

1. 单独新建CSS样式表文件

使用菜单“文件”−>“新建”命令，打开“新建文档”对话框，在该对话框中选择“页面类型”为CSS，如图2-15所示，单击“创建”按钮，即可进入新建CSS代码文件的窗口。

图2-15　“新建文档”对话框

或者在Dreamweaver CS4中未打开任何文件时，选择“新建”下“CSS”(见图2-1)，也可新建CSS文件。

这时出现的新建CSS样式文件窗口是一个代码窗口。单击在CSS样式面板下的按钮，或者在属性面板里选择“CSS”并单击“编辑规则”来新建CSS样式，打开“新建CSS规则”对话框，如图2-16所示。假如要在该样式文件里为段落标签p新建一个样式，则在该对话框的“选择器类型”中选择“标签”，在选择器名称中选择“p”，规则定义采用默认。单击“确定”按钮，进入图2-10所示的对话框，在该对话框中，对标签p的显示属性进行具体设置。

图2-16　标签样式的定义

采用同样的方法，在该CSS样式文件中创建几种不同的样式，代码如下。

h2 {　　　　　　　　　　　　　　　/∗ 定义h2的样式 ∗/

font-family: "黑体";

font-size: 24px;

color: #F00;　　　　　　　　　　　 /∗ 在CSS中，用3位十六进制数表示颜色 ∗/

}

p {　　　　　　　　　　　　　　　　/∗ 定义标签p的样式 ∗/

font-family: "楷体_GB2312";

font-size: 18px;

font-style: normal;

color: #000;

text-align: center;

}

.class1 {　　　　　　　　　　　　　/∗ 定义一个样式类 ∗/

font-family: "华文新魏";

font-size: 18px;

font-style: normal;

color: #000;

}

#id-css1 {　　　　　　　　　　　　　/∗ 定义一个ID样式 ∗/

font-family: "方正姚体";

font-size: 14px;

color: #0F0;

}

保存文件，并将文件命名为type0.css。查看文件面板，如图2-17所示，可以看到站点内多了一个名为type0.css的样式文件。

也可以在新建CSS文件窗口中，通过直接输入代码来编辑CSS样式文件。

2. 在创建CSS样式的同时新建一个CSS样式表文件

在编辑网站内一个网页时，单击CSS样式面板下按钮，出现“新建CSS规则”对话框，在对话框中选择样式类型、名称，再在下面的“规则定义”中选择“新建样式表文件”，如图2-18所示。

图2-17　新建CSS文件后站点内的文件

图2-18　将新建CSS样式存储到一个新的CSS文件里

单击“确定”按钮，出现“将样式表文件另存为”对话框，在文件名文本框中输入CSS样式表文件名(如type.css)，其他选项采用默认设置，如图2-19所示。

图2-19　给新建CSS样式文件命名

单击“保存”按钮，出现CSS样式定义的对话框(见图2-10)，在该对话框中设置类样式.waibufont1的各种属性，设置完毕，单击“确定”按钮。这时，可以在网页代码的head头部内自动增加一行链接外部CSS样式文件的代码：

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

这说明在创建CSS样式的同时创建了样式文件，自动链接到当前网页中。

打开站点的文件面板，可以看到当前站点里多了一个名为type.css的文件。查看CSS样式面板，可以看到一个名为“.waibufont1”的CSS样式位于type.css下(图中样式类.fontclass1和.fontclass0是前面已经定义的样式)，如图2-20所示。

图2-20　新建的外部CSS样式文件

双击CSS面板的.waibufont1样式，可再一次打开.waibufont1样式设置对话框，可进一步修改该样式的属性。

3. 将新建CSS样式保存到已有的外部CSS样式表文件里

在编辑一个网页时，要将新建CSS样式保存到外部样式文件里(这里的外部文件是指网页以外，但应该在站点以内的文件)，首先需要将样式文件链接到当前网页中。将网页链接样式文件的方法有link模式和import模式(1.7节有详细阐述)，可使用以下两种方法之一。

一种方法是直接在网页代码的head元素内加入如下代码：

<link href="path&filename.css" rel="stylesheet" type="text/css" />

其中"path&filename.css"是样式文件的路径和名称。

另一种方法是单击CSS样式面板下的链接按钮，在弹出的对话框中选择样式文件，并在单选项“链接”(link)、“导入”(import)中选择一种链接方式，如图2-21所示。单击“确定”按钮，即将样式文件链接到当前网页中。

图2-21　链接样式文件的方法

链接好CSS文件type.css以后，创建新的CSS样式，在“新建CSS规则”对话框(见图2-18)的“规则定义”下拉列表框里选择type.css，即可新建CSS样式并保存到type.css样式文件里。

注意：在站点中有相同样式的文字、表格、层等最好使用同一个CSS样式，注意色彩不要太过繁杂，可以参照一些较有名气的站点学习网页的布局和色彩的搭配。