新建CSS样式的最后一步就是设置CSS样式，也就是CSS规则定义，通过设置CSS样式，具体定义字体、字号、行高等类型，以及背景、边框等项目。在CSS规则定义中具体包括类型、背景、区块、方框、边框、列表、定位、扩展8类。

1.设置CSS规则的“类型”

CSS规则的“类型”设置包括字体、大小、粗细、样式、变体、行高、大小写、修饰、颜色9项设置，分别用于设置字体名称、字号大小、字体的加粗程度、字体样式（斜体、偏斜体）、变体、两行之间的距离、英文的大小写设定、各种修饰（下划线、上划线、删除线、闪烁）。其中最为重要的是行高的设定，在Dreamweaver的属性面板中没有设置行高的选项，初学者往往不知在哪设置行高，其实行高的设置是通过CSS样式设置实现的。粗细值设为“400”时相当于正常字体，而设置为“700”时则相当于粗体，如图6-22所示。

图6-22　CSS规则定义中的“类型”设置

2.设置CSS规则的“背景”

在HTML中，背景只能使用单一的色彩或利用图像水平垂直方向的平铺。使用CSS之后，有了更加灵活的设置。该项的主要功能是设置网页的背景，包括背景颜色、背景图像两项设置。其中背景图像又对重复（包括不重复、横向纵向都重复、横向重复、纵向重复）、附件（图像滚动、图像固定）、位置（包括水平位置、垂直位置）进行了设定。设定完成后，网页中的背景颜色、背景图像将以此设定值变更。其中附件设置中的图像滚动是相对整个网页窗口的滚动与固定，如图6-23所示。

图6-23　CSS规则定义中的“背景”设置

3.设置CSS规则的“区块”

这是一组对CSS+DIV版面设置中的区块进行设置的选项，包括单词间距、字母间距、垂直对齐、文本对齐、文字缩进、空格、显示7项设置。其中“空格”确定如何处理元素中的空格，在其右侧选“正常”为收缩空格；“保留”为保留所有空白，包括空格、制表符和回车；“不换行”指仅当遇到br标签时文本才换行。“显示”指定是否以及如何显示元素，如图6-24所示。

图6-24　CSS规则定义中的“区块”设置

4.设置CSS规则的“方框”

“方框”是用来定义各种距离的，凡是和距离有关的，如间距、边距等都在这里设定，包括宽高、填充、边界的设定等。其中“浮动”选项可以将元素移动到页面范围之外；“清除”选项定义不允许层出现应用样式的元素的某个侧边；“填充”定义应用样式的元素内容和元素边界之间的空白大小；“边界”定义应用样式的元素边界和其他元素之间的空白大小，如图6-25所示。

图6-25　CSS规则定义中的“方框”设置

5.设置CSS规则的“边框”

“边框”样式设置可以给对象添加边框，设置边框的颜色、粗细、样式。可分别加上、下、左、右的边框。例如，只加一个下边框，且设为虚线边框，这样可以在所选元素下显示一条虚线。“边框”设置包括样式、宽度、颜色3项内容，可以分别对上、右、下、左4个边框进行设置。

6.设置CSS规则的“列表”(www.daowen.com)

CSS规则的“列表”包括类型设置、项目符号图像设置、位置设定3个部分，如图6-26所示。“类型”设置项目符号或编号的外观。“项目符号图像”可以为项目符号指定自定义图像。单击“浏览”按钮可通过浏览选择图像，或输入图像的路径。“位置”设置列表项文本是否换行和缩进（外部）以及文本是否换行到左边距（内部）。

图6-26　CSS规则定义中的“列表”设置

7.设置CSS规则的“定位”

“定位”是用于“层”设置的一个选项，由于在Dreamweaver中提供了更方便的可视化的层制作功能，因此在实际应用中很少使用这一功能。这一选项还包括上、下、左、右4个方位的置入和裁切，如图6-27所示。

8.设置CSS规则的“扩展”

CSS规则的“扩展”用来实现一些扩展功能，主要包括分页、光标和过滤器3种效果。分页就是指打印网页的内容时在指定位置停止，换页后继续打印在下一页纸上。“分页”是通过样式来为网页添加分页符号的，允许用户指定在某元素之前或之后分页；“光标”是通过样式改变鼠标形状的，鼠标放置于被此项设置修饰的区域上时，形状会发生改变，如Hand（手）、crosshair（交叉十字）等；“滤镜”是指使用CSS语言实现各种滤镜效果，Dreamweaver在下拉列表框中提供了如Alpha（透明效果）、Blru（模糊效果）等多种滤镜效果，如图6-28所示。

图6-27　CSS规则定义中的“定位”设置

图6-28　CSS规则定义中的“扩展”设置