使用“CSS样式”面板创建新规则比手动键入规则更简便。下面我们使用“CSS样式”面板创建自定义的CSS规则或类样式。

1.创建CSS类样式

在文档窗口中，打开fruit_shopping文件夹中的instruction.html文件后，执行下面的操作：

（1）在“CSS样式”面板中，单击“新建CSS规则”按钮，如图10-8所示。

（2）在“新建CSS规则”对话框中，在“选择器类型”栏中选择“类”；在“名称”文本框中输入“.bd”（所有类样式必须以小数点开头）；在“定义在”下拉列表中选择fll.css。

（3）单击“确定”按钮后，将弹出“CSS规则定义”对话框，表示正在fl1.css文件中创建一个名称为.bd的类样式。

图10-8　“新建CSS规则”对话框

（4）在“CSS规则定义”对话框中，如图10-9所示，在“字体”框中输入“宋体”；在“大小”框中输入16，并在其右边的下拉列表中选择“像素”；在“行高”框中输入150，并在其右侧的下拉列表中选择“%”；在“粗细”下拉列表中选择“粗体”；在“颜色”框中输入#FF0000。然后单击“确定”按钮。

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

（5）在“CSS样式”面板中，选择“全部”，并展开fl1.css类别。可看到，此时已将.bd类样式添加到在外部样式表中定义的规则列表中。(www.daowen.com)

（6）单击.bd规则，该规则的属性将出现在“属性”窗格中。单击“显示设置属性”按钮，在“属性”窗格中仅显示用户设置的属性。

另外，新规则还出现在“属性”面板的“样式”下拉列表中。

2.将类样式应用到文本

把创建的类规则应用到段落文本的操作步骤为：

（1）在文档窗口中，如图10-10所示，选择商店名称“四季春水果行”。

（2）在“属性”面板中，从“样式”下拉列表中选择“bd”。这时“粗体”类样式将应用到选中的文本上。

（3）继续选中文本内容“诚信经营、礼貌待客”，应用“bd”类样式。

（4）保存页面。

图10-10　应用类样式