新编Dreamweaver_CS3动态网页设计与制作教程.pptVIP

　　CSS指令以规则的方式给出，一个样式表是这些规则的集合。规则是组成HTML或者被称为“选择器”的自定义标记的语句。例如，下面列出了一个使所有t1内容的颜色变成在color中给出的红色的CSS规则。.t1 { color: #FF0000 ;} 1. 操作步骤可以在“CSS样式”面板中创建样式表。1)? CSS样式面板在Dreamweaver CS3下，选择【窗口】→【CSS样式】(快捷键为Shift+F11)命令，打开【CSS样式】面板，如图9.1所示。 　　② 单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。　　③ 选择【类(可应用于任何标签)】，然后在“名称”后的下拉列表框中输入这个样式的名称。注意，类名称必须以英文句点开头，并且包含任何字母和数字组合，例如“.css1”。　　④ 在【定义在】中选择【仅对该文档】。然后单击【确定】按钮，完成设置，将弹出【.css1的CSS规则定义】对话框，如图9.3所示。 　　(2) 标签。标签用来重新定义某种类型页面元素的格式。制作后，不需要选中表格对象，就可以直接应用到页面中去。具体操作如下：　　① 选择【窗口】→【CSS样式】(快捷键为Shift+F11)命令，打开【CSS样式】面板。　　② 单击【CSS样式】面板中的【新建CSS规则】按钮，弹出【新建CSS规则】对话框。　　③ 选择【标签(重新定义特定标签的外观)】，在【标签】后的下拉列表框里选择一个HTML标签，也可以直接在【标签】后的下拉列表框里输入这个标签，例如输入“td”，如图9.4所示。 　　④ 在【定义在】中选择【仅对该文档】，然后单击【确定】按钮，完成设置，将弹出【td的CSS规则定义】对话框，如图9.5所示。　　(3) 高级。高级样式为具体的某个标签组合或所有包含特定ID属性的标签定义格式。具体操作如下：　　① 选择【窗口】→【CSS样式】(快捷键为Shift+F11)命令，打开【CSS样式】面板。 　　② 单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。　　③ 选择【高级(ID、伪类选择器等)】，在【选择器】后的下拉列表框里输入一个HTML标签，也可以直接在【选择器】后的下拉列表框里选择一个HTML标签。提供的标签包括a:active、a:hover、a:link和a:visited。 　　●? a:active：超链接文本被激活时的显示样式。　　●? a:hover：光标移到超链接文本上时的显示样式。　　●? a:link：正常的未被访问过的超链接文本的显示样式。　　●? a:visited：被访问过的超链接文本的显示样式。　　这里选择“a:link”，如图9.6所示。　　④ 在【定义在】中选择【仅对该文档】，然后单击【确定】按钮，完成设置，将弹出【a:link的CSS规则定义】对话框，如图9.7所示。 2. 相关知识点CSS样式面板的操作；CSS样式表的创建；CSS样式表的编辑和删除。 　　1. 操作步骤　　设置控制浏览器中的文字大小的操作步骤如下：　　(1) 打开【.css1的CSS规则定义】对话框，如图9.8所示，在左边的【分类】选框里选择【类型】项。 　　(2) 设置“字体”为“宋体”，“大小”为“36像素”，单击【确定】按钮，CSS样式即创建完成。　　(3) 在【CSS样式】面板中，列出了所有样式标签中定义的所有样式的样式表，如图9.9所示。　　(4) 在【CSS样式】面板中，选择样式?.css1，单击鼠标右键，选择【套用】命令，如图9.10所示。或者在【属性】面板的【样式】下拉列表框中直接选择样式，如图9.11所示。 　　(5) 这样，所选择的样式就可以应用到选中的段落或字符中，如图9.12所示。　　2. 相关知识点　　CSS类型模式中字体属性的设置；　　CSS样式表的应用。 　　1. 操作步骤　　设置行间距的具体操作步骤如下：　　(1) 单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。　　(2) 选择【类(可应用于任何标签)】，在“名称”后的下拉列表框中输入.p1，如图9.13所示。 　　(3) 打开【.p1的CSS规则定义】对话框，如图9.14所示，在左边的【分类】选框里选择【类型】，设置“行高”为“30像素”，单击【确定】按钮，CSS样式即创建完成。　　(4) 选中需要应用样式的段落，对所选段落应用样式?.p1，如图9.15所示。　　2. 相关知识点　　CSS类型模式中行间距的设置。 　　1. 操作步骤　　为图片添加边框效果的具体操作步骤如下：　　(1) 单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。　　(2) 选择【类(可应用于任何标签)】，在“名称”后的