下面首先在“CSS规则定义”对话框中为新规则建立简单的属性，然后在“属性”窗格中设置较复杂的属性。具体操作方法如下：

（1）打开fl1.css文件，或单击其选项卡来显示该文件，如图10-11所示。

图10-11　创建导航新规则

（2）在该文件的.bd类样式后面键入以下代码：

.navigation｛

｝

这是一个空规则。

（3）保存fl1.css文件。

（4）打开instruction.html文件，在面板中，选择“全部”模式的.navigation规则，然后单击面板右下角的“编辑样式”图标。

（5）在弹出的“CSS规则定义”对话框的“类型”栏中，如图10-12所示，在“字体”框中输入“宋体”；在“大小”和单位下拉列表中分别选择“18”和“像素”；在“样式”下拉列表中选择“正常”；在“修饰”栏中选择“无”；在“粗细”下拉列表中选择“粗体”；在“颜色”框中输入#FF0000。

图10-12　“CSS规则定义”对话框

（6）在“CSS规则定义”对话框的“区块”栏中，在“文本对齐”下拉列表中选择“居中”，然后单击“确定”按钮。

（7）在“CSS样式”面板中，选中.navigation规则，单击“显示列表视图”按钮，如图10-13所示。列表视图可使“属性”窗格按字母顺序显示所有可用属性。(www.daowen.com)

图10-13　显示列表视图

（8）单击background-color属性右边的列，输入十六进制值#00CCFF，如图10-14所示，然后按Enter键。

（9）找到display属性，在右边的列中单击一次，然后从下拉列表中选择block，如图10-15所示。

图10-14　输入属性值

图10-15　选择属性值

（10）找到padding属性，在右边的列中单击一次，输入值8px，然后按Enter键。

（11）找到width属性，在右边的列中单击一次，在文本框中输入140，从下拉列表中选择像素，然后按Enter键。

（12）单击“只显示设置属性”按钮，在“属性”窗格中显示出用户设置的属性，如图10-16所示。在fll.css文件的文档窗口中，可看到Dreamweaver已经把指定的所有属性添加到该文件中。

（13）保存并关闭fll.css文件。

图10-16　已设置的属性