网站制作与编辑9.ppt

　　在“CSS规则定义”对话框中选择“扩展”类别，如图。 9.3.8 扩展 9.3 CSS样式设置 　　1．分页：打印时在样式所控制的对象之前或者之后强行分页。 　　2．光标：在下拉列表中，选择光标显示属性设置。当指针位于样式所控制的对象上时光标指针图像会发生改变。光标属性的相关说明见表。 9.3.8 扩展 9.3 CSS样式设置 属性 说明 属性 说明 Auto 自动改变样式 Crosshair 精确定位+ Default 默认指针 Hand 手形 Move 移动 e-resize 箭头朝右方 ne-resize 箭头朝右上方 nw-resize 箭头朝左上方 n-resize 箭头朝上方 se-resize 箭头朝右下方 sw-resize 箭头朝左下方 s-resize 箭头朝下方 w-resize 箭头朝左方 text 文本I形 Wait 等待 help 帮助 　　3．CSS滤镜：又称过滤器，可以为网页中的元素添加各种效果。主要滤镜及说明见表 9.3.8 扩展 9.3 CSS样式设置 滤镜 说明 滤镜 说明 Alpha 透明的渐进效果 Gray 彩色图片变灰度图 BlendTrans 淡入淡出效果 Invert 底片效果 Blur 风吹模糊的效果 Light 模拟光源效果 Chroma 指定颜色透明 Mask 矩形遮罩效果 DropShadow 阴影效果 RevealTrans 动态效果 FlipH 水平翻转 Shadow 轮廓阴影效果 FlipV 垂直翻转 Wave 波浪扭曲变形效果 Glow 边缘光晕效果 Xray X光照片效果 9.4 CSS样式经典实例 9.4.1 改变鼠标形状 9.4.2 更改超链接的样式 9.4.3 应用CSS滤镜 　　改变鼠标的形状是应用扩展类别中的光标属性来设置的，操作为： 　　1．新建一个网页插入一幅图像并保存网页。 　　2．在CSS样式面板中，单击 按钮，打开“新建CSS规则”对话框，如图所示。 3．输入CSS样式的名称“.shubiao”，“选择器类型”选择“类”选项，“定义在”选择“仅对该文档”。 9.4.1 改变鼠标形状 9.4 CSS样式经典实例 　　4．点击“确定”，打开“.shubiao的CSS规则定义”对话框，切换到“扩展”分类，如图。 9.4.1 改变鼠标形状 9.4 CSS样式经典实例 　　5．在“视觉效果”的“光标”的下拉列表中选择“help”，单击“确定”按钮，样式建立完成。 　　6．选中图像，执行以下操作之一： 　　?在CSS面板中，右击.shubiao样式，在弹出的快捷菜单中选择“套用”命令。 　　?在“属性检查器”的“类”的下拉列表中选择“shubiao”。 　　7．保存网页，在浏览器中鼠标指向图像测试效果。 9.4.1 改变鼠标形状 9.4 CSS样式经典实例 　　不同的超链接效果,可以通过CSS“选择器类型”中的“高级（ID、上下文选择器等）”中进行设置，有四个选项可供选择： 　　a:link：未访问的链接。 　　a:visited：已访问过的超链接。 　　a:hover：鼠标指针移到超链接文字上时的超链接。 　　a:active：正在访问的超链接。 9.4.2 更改超链接的样式 9.4 CSS样式经典实例 　　利用CSS样式更改超链接样式的操作为： 　　1．打开一个带有超链接的网页文档。 　　2．在CSS样式面板中，单击 按钮，打开“新建CSS规则”对话框，在“选择器类型”选择“高级”，在“选择器”中选择“a:link”，如图所示。 9.4.2 更改超链接的样式 9.4 CSS样式经典实例 　　3．“定义在”选择“仅对该文档”，单击“确定”，打开“a:link的CSS规则定义”对话框，如图所示。 9.4.2 更改超链接的样式 9.4 CSS样式经典实例 　　4．在“类型”分类中，设置字体：幼圆，颜色：#00CC00，修饰：无（无下划线）。 　　5．单击“确定”按钮，完成a:link样式的创建。 　　6．重复以上操作分别设置： 　　a:visited，字体：华文行楷，颜色：#660033，修饰：无（无下划线）。 　　a:hover：字体：幼圆，颜色：#FF0000，修饰：下划线。 　　a:active：字体：华文新魏，样式：倾斜，颜色：#0000CC，修饰：下划线。 　　7．保存并在浏览器中预览网页，效果如图所示。 9.4.2 更改超链接的样式 9.4 CSS样式经典实例 　　（一）模糊效果滤镜（blur） 　　1．新建一个网页并插入两幅相同的图像并保存网页。 　　2．在CSS样式面板中，单击 按钮，打开“新建CSS规则”对话框。如图所示。 　　3．名称中输入“.blur”