“CSS 样式”面板具有两种视图或模式。使用“应用样式”视图可应用自定义或类 CSS 样式；使用“编辑样式”视图可以对已应用于文档的样式进行更改。在这两种视图中工作时都可以创建新样式。

如果“CSS 样式”面板尚未打开，请打开它（“窗口”>“CSS 样式”）。


在“CSS 样式”面板中，单击面板底部的“新建 CSS 样式”按钮 (+)。
“新建 CSS 样式”对话框随即出现。



对文档中的任何标签都可以应用 CSS 样式。您要创建的第一种样式将重定义 body 标签的样式属性。

在“新建 CSS 样式”对话框中，对于“类型”选择“重定义 HTML 标签”。
在“标签”弹出菜单中选择“body”。
在“定义在”中选择“仅对该文档”。
从现在起，我们将对此文档应用该样式，稍后您会看到如何导出该样式，以便可以在站点的其他页面中使用它。您的对话框应类似于下面这样：



单击“确定”。
“CSS 样式定义”对话框随即出现。



设置下列“类型”设置：
在“字体”弹出菜单中选择“Arial, Helvetica, sans serif”。

在“大小”弹出菜单中选择 12 和像素。
在“颜色”中单击颜色选择器，然后使用滴管选择白色。

应用新样式后，几乎区分不出文档中的超级链接。让我们创建一种链接样式。

在“CSS 样式”面板中，单击位于面板底部的“新建 CSS 样式”按钮 (+)。
“新建 CSS 样式”对话框随即出现。

在“类型”中选择“使用 CSS 选择器”。
在“选择器”弹出菜单中选择“a:link”。
在“定义在”中选择“仅对该文档”。
单击“确定”。

为链接设置下列“类型”属性：
在“修饰”中选择“上划线”。

在“颜色”中的文本框中输入 #FFCC99。

单击“确定”。
要看到应用于链接的样式，必须在浏览器中查看页面，按 F12 键可以预览页面。

导出样式以创建外部样式表
您到目前为止所创建的 CSS 样式仅应用于此文档。内部样式表仅应用于用来创建它们的文档。现在，您将学习如何创建一个外部样式表，它包含您在此文档中定义的样式。

选择“文件”>“导出”>“导出 CSS 样式”。
“导出 CSS 样式”对话框随即出现。

在该对话框的“保存在”(Windows) 或“位置”(Macintosh) 弹出式菜单中，定位到您的本地站点文件夹。
在“文件名”(Windows) 或“另存为”(Macintosh) 中，将该文件命名为 mystyle.css。
备注： 可以将 CSS 样式表命名为您希望的任何名称；但下面的情况除外，即名称必须小写并且不能包含空格。

单击“保存”。

您将把刚才创建的 CSS 样式表附加到站点内的另一个文档中。您将使用的文档与应用样式前的原始 css_start.htm 文件相同。

在 Dreamweaver 中，如果“站点”面板尚未打开，请打开它（“窗口”>“站点”）。
在“站点”面板中找到名为 css_start2.htm 的文件，然后双击它在“文档”窗口中将其打开。
在“CSS 样式”面板中，单击位于面板底部的“附加样式表”按钮。


“链接外部样式表”对话框随即出现。

在“文件/URL”文本框中输入 mystyle.css 的路径；或者单击“浏览”并在出现的对话框中定位到 mystyle.css 文件，然后单击“确认”选择它。
在“链接外部样式表”对话框中，对于“添加为”选择“链接”。