网页设计与制作课件第9章 节 在网页中应用CSS样式.ppt

类型：设置项目符号或编号的外观。 项目符号图像：在其后的文本框中，设置自定义符号图像的路径。 位置：设置列表文本是否缩进、换行及是否换行到左边距。 （3）选择需要的选项进行设置后，单击“确定”按钮，完成“列表”样式的设置。 阶段7 设置定位 （1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。 （2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类”列表中选择“定位”选项。 类型：确定定位对象的方法，有相对、绝对、固定和静态4种选择。 显示：确定对象的初始显示条件，有继承、可见和隐藏3种状态。 Z轴：确定层的堆叠顺序，值越大，层排放顺序越靠上。 溢位：确定当层的内容超出层的大小时的显示方式。 置入：设置对象层的位置和大小。 裁切：定义层的可见部分。 （3）选择需要的选项进行设置后，单击“确定”按钮，完成“定位”样式的设置。 阶段8 设置扩展 （1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。 （2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类”列表中选择“扩展”选项。 分页：设置在打印网页时有关分页的参数。 视觉效果：设置可视化效果，为光标设置新的外观或为图像添加滤镜效果。 （3）选择需要的选项进行设置后，单击“确定”按钮，完成“扩展”样式的设置。 任务4 管理CSS样式 阶段1 修改CSS样式 在创建了CSS样式后，还可以修改样式中的参数 （1）选择“窗口→CSS样式”命令打开“CSS样式”面板，选择需要修改的样式，然后单击“CSS样式”面板上的“编辑样式”按钮 。 （2）在打开的“.style1的CSS规则定义”对话框中，按照需要进行修改，然后单击“确定”按钮。 （3）在单击“确定”按钮后，“CSS样式”面板中的样式就会自动更新为新定义的样式。 阶段2 删除CSS样式 要删除CSS样式很简单，只需要在“CSS样式”面板中选中要删除的样式（左图），然后单击面板底部的“删除CSS规则”按钮 即可（右图）。 阶段3 复制CSS样式 （1）在Dreamweaver中创建一个CSS样式，然后打开“CSS样式”面板，选择要复制的CSS样式。 （2）在选择的CSS样式上单击鼠标右键，在弹出的快捷菜单中选择“复制”命令。 （3）在打开的“重制CSS规则”对话框中设置CSS样式的名称和其他参数，然后单击“确定”按钮。 （4）在“CSS样式”面板中可以看到复制的CSS样式。 任务5 应用CSS高级样式 阶段1 创建CSS链接样式 使用CSS可以为网页中的多处链接应用不同的链接样式，使网页中的链接更加漂亮美观。 （1）在Dreamweaver新建一个文件，选择“窗口→CSS样式”命令（左图），打开“CSS样式”面板（右图）。 （2）在“CSS样式”面板中单击“新建CSS规则”按钮（左图），打开“新建CSS规则”对话框（右图）。 （3）在“选择器类型”中选择“高级”选项，在“选择器”文本框中输入“.linkA a:link”，在“定义在”中选择“仅对该文档”，然后单击“确定”按钮。 （4）在打开的“.linkA a:link的CSS规则定义”对话框中进行设置，在“颜色”中设置字体颜色为“#333333”，在“修饰”中选择“无”复选框，然后单击“确定”按钮。 （5）单击“确定”按钮后，完成该样式设置，在“CSS样式”面板中可以看到刚刚创建的链接样式。 （6）重复前面的操作，新建一个CSS规则，在“选择器”文本框中输入“.linkA a:visited”，然后单击“确定”按钮。 （7）在打开的“.linkA a:visited的CSS规则定义”对话框中进行设置，在“颜色”中设置字体颜色为“#996600”，在“修饰”选项中选择“无”复选框，然后单击“确定”按钮。 （8）重复上面的操作，新建一个样式“.linkA a:hover”，在其定义对话框中设置颜色为“#333333”，在“修饰”选项中选择“无”复选框，然后单击“确定”按钮。 （9）重复上面的操作，新建一个样式“.linkA a:active”，在其定义对话框中设置颜色为“#333333”，在“修饰”选项中选择“无”，然后单击“确定”按钮。 第9章 在网页中应用CSS样式 CSS样式简介 任务1 创建CSS样式 任务2 设置CSS样式 任务3 管理CSS样式 任务4 应用CSS高级样式 任务5 本章导读 要创建一个漂亮的网页，掌握设置CSS样式是必不可少的，CSS样式可以实现网页中几乎所有的样式效