在Dreamweaver中，使用CSS设置页面中的文本格式和定位文本，可以更加灵活自如地控制页面的外观。

1.创建样式表

首先创建包含CSS规则（定义段落文本样式）的外部样式表，操作步骤如下：

（1）单击“文件”菜单→“新建”命令。

（2）在“新建文档”对话框中的“类别”列中选择“基本页”，在“基本页”列中选择“CSS”，然后单击“创建”按钮，如图10-1所示，这时空白样式表出现在文档窗口中。

图10-1　创建样式表

此时“设计”视图和“拆分”视图按钮已被禁用，这是因为CSS样式表是纯文本文件，其内容不会在浏览器中查看。

（3）单击“文件”菜单→“保存”命令，在打开的“另存为”对话框中，将该文件保存到fruit_shopping文件夹（Web站点的根文件夹）中，文件名为fl1.css。

（4）在样式表中键入以下代码：

p｛

font-family："宋体"；

font-size：14px；

color：#FFFFFF；

line-height：150%；

padding：3px；

｝

在输入代码的过程中，Dreamweaver将使用代码提示和建议一些选项，当看到需要的代码时按Enter键。注意，不要忘记在每行结尾处的属性值后面加上一个分号。完成后的代码如图10-2所示。

图10-2　输入代码

（5）保存样式表。

接下来，将该样式表附加到instruction.html页面中。

2.附加样式表

当把样式表附加到Web页面中时，在样式表中定义的规则将应用到页面上的相应元素。例如，当把fll.css样式表附加到instruction.html时，将根据定义的CSS规则设置所有段落文本（用HTML代码中的＜p＞标签设置格式的文本）的格式。具体操作步骤为：

（1）在文档窗口中，打开fruit_shopping文件夹中的instruction.html文件（如果该文件已打开，则单击其选项卡）。

（2）选中页面中的第一段文本，如图10-3所示。(www.daowen.com)

（3）在“属性”面板中查看，并确保使用段落标签设置了该段落的格式。

如果“属性”面板中的“格式”下拉列表中显示“段落”，则已使用段落标签设置了段落的格式。如果“属性”面板中的“格式”下拉列表显示“无”或其他内容，则选择“段落”来设置段落的格式。

图10-3　选定段落文字

（4）在“CSS样式”面板中，单击位于面板右下角的“附加样式表”按钮，打开“链接外部样式表”对话框，如图10-4所示。

图10-4　“链接外部样式表”对话框

（5）在“链接外部样式表”对话框中，单击“浏览”按钮，在打开的对话框中选择已创建的fll.css文件，单击“确定”按钮。

（6）在“属性”面板的“格式”框中重新选中“段落”，可以看到文档窗口中选定的文本将根据外部样式表中的CSS规则来设置格式。

（7）选中第二段文本，从“格式”下拉列表中选中“段落”，应用CSS样式。

3.查看样式表

使用“CSS样式”面板，可以跟踪影响当前所选页面元素的CSS规则和属性，或影响整个文档的规则和属性，还可以在不打开外部样式表的情况下修改CSS属性。

（1）在“CSS样式”面板中，单击“全部”，然后检查CSS规则。在“所有”模式下，CSS面板显示应用到当前文档的所有CSS规则，不管这些规则是在外部样式表中，还是在自身文档中。在“所有规则”窗格中会看到两个主要类别：一个＜样式＞标签类别和一个fll.css类别。

（2）若未展开＜样式＞标签类别，则单击加号（+）展开该类别。

（3）单击正文（body）规则。值为#CCCCCC的background-color属性出现在下面的“属性”窗格中，如图10-5所示。在第9章中，我们曾使用“修改页面属性”对话框设置了页面的背景色，用此方式设置页面属性时，Dreamweaver会编写一个内置于文档的CSS样式，就是在这里看到的背景色。

如果看不到完整的“CSS样式”面板，可折叠其他面板，或者通过拖动窗格之间的边界来更改“CSS样式”面板的长度。

（4）单击加号（+）展开fl1.css类别，单击p规则。在外部样式表中为p规则定义的所有属性和值将显示在下面的“属性”窗格中，如图10-6所示。

（5）在“CSS样式”面板中，单击面板顶部的“正在”，然后检查CSS样式。在“正在”模式中，CSS面板显示当前所选内容的属性摘要。显示的属性与外部样式表中p规则的属性相对应，如图10-7所示。

图10-5　查看body规则

图10-6　查看p规则

图10-7　显示规则