样式表的高级应用.pptx

管理CSS样式表样式表的高级应用;上课要求;学会管理CSS样式表 学会使用附加外部样式表 了解CSS滤镜的使用方法;1、查看CSS样式 操作步骤： 选择窗口菜单下的CSS样式，打开“CSS样式”面板，单击“全部”。 在“CSS面板”中双击文件名称，打开 “CSS规则定义”对话框。 ; 2、编辑CSS样式 方法1：打开CSS样式面板，选中要编辑的CSS样式，单击面板底部的编辑样式按钮。;方法3：打开CSS样式面板，选中要修改的CSS样式，在面板下方的属性列表框中直接修改属性值，还可以单击添加属性链接，添加新的属性。 ;3、删除CSS样式 方法1：选中要删除的样式，按键盘上的Delete键。 方法2：打开CSS样式面板，选择要删除的样式文件，单击删除CSS规则按钮 。 方法3：打开CSS样式面板，选中要删除的样式文件并单击右键，在弹出的快捷菜单中选择删除命令。 ;4、复制CSS样式 在制作网页时，如果用户需要使用几个类似的CSS样式，可以通过复制CSS样式进行修改来实现。 操作步骤： 打开CSS样式面板，选中要复制的样式，单击右键，从弹出的快捷菜单中选择复制命令。 在复制CSS规则对话框中选择选择器类型，并输入选择器名称。 ; 一般在制作网站时，为保证同一网站中所有网页风格的一致性，都会尽可能地使用同一种样式。 这样就可以将共用的样式保存在外部样式表文件中，然后将其链接至各个网页文档。 这不仅大大减少了工作量，还方便了后期的维护和更新。 ; 操作步骤： 打开站点“草根视频”中的“funny.html”。 单击附加样式表按钮，单击“文件/URL”编辑框右侧的“浏览”按钮。 在文件列表中选择“s1.css”。 回到“链接外部样式表”对话框，在“添加为”列表区选择“链接”单选钮。 在“CSS样式”面板中可看到刚才链接的样式，切换至代码视图，可看到链接样式的代码。 ;;三、CSS滤镜简介;各滤镜及其可实现的效果： Alpha：设置图像透明效果。 BlendTrans：设置混合过渡效果。 Blur：设置模糊效果。 Chroma：将指定的颜色设置为透明。 DropShadow:设置投影阴影。 FlipH:进行水平翻转。 FlipV：进行垂直翻转。 Glow：设置发光效果。 ;Gray：产生灰阶。 Invert：设置反转底片效果 Light：设置灯光投影效果。 Mask：设置遮罩效果。 RevealTrans：设置显示过渡效果。 Shadow：设置阴影效果。 Wave：设置水平与垂直波动效果。 Xray：设置X光照效果。 ; 操作步骤： 打开欧妮雅站点中的“sub3.html”，单击“CSS样式”面板中的“新建CSS规则”按钮。 选择“选择器类型”为“类”，“名称”为“alpha”，定义在“为限该文档”。 打开“.alpha”的CSS规则定义对话框，在左侧的“分类”列表中选择“扩展”，在“filter”下拉列表中选择“Alpha”，并设置Opacity=40。 ;选中“网站留言”下方的图像，在属性检查器上的“类”下拉列表中选择“alpha”，保存文档后预览。 ;Opacity透明度的设置： 范围为0-100 。 0表示完全透明。 100表示不透明。 FinishOpacity：在设置渐变透明效果时指定结束的透明度值。 StartX和StartY：代表透明效果开始的X和Y 坐标。 FinishX和FinishY：代表透明结束的X和Y 坐标。