网站建设与管理PPT电子课件教案-第6章 使用CSS样式.ppt

* Mask滤镜 语法：｛Filter: Mask(Color=?)｝ 作用：将对象内容的透明像素用Color参数指定的颜色作一个遮罩，为对象建立一个覆盖于表面的膜，其效果就好像戴有色眼镜看物体一样。 参数：Color参数指定遮罩颜色。 * RevealTrans滤镜 语法： {filter:revealtrans(duration=?,transition=?)} 作用：设置页面切换时的过渡效果 参数：Duration参数设置转换完成所需的时间，单位为秒。transition用来指定切换方式，共有24种方式，取值范围是0～23。 * Shadow滤镜 语法：｛Filter: Shadow(Color=?, Direction=?)｝ 作用：该滤镜可以在指定的方向建立对象的投影 参数：Color指定投影色；Direction参数设置投影的方向，其中0度代表垂直向上，然后每45度为一个单位。 * Wave滤镜 语法：｛Filter: Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)｝ 作用：使对象产生波纹效果 参数：Add参数表示是否显示原对象，0表示不显示，非0表示显示；Freq参数是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹；LightStrength参数用于设置波纹效果的光照强度，取值范围是0~100；Phase参数用来设置正弦波的偏移量；Strength参数代表波形振幅大小。 * 6.5 深入了解CSS * 6.6 CSS样式表应用示例 1．设置超链接的风格 在默认情况下超级链接都呈现为蓝色且有下划线，看上去不大美观，在Dreamweaver中可以通过设置CSS样式改变超链接的风格。下面步骤设置超链接的风格为无下划线，黑色，并且鼠标悬停变色。 （1）新建网页文件，并打开“CSS样式”面板。 （2）单击“新建CSS样式”按钮打开新建对话框，在“选择器类型”域中选择“高级”，在“选择器”下拉列表框中选中“a：link”，然后单击“确定”按钮。 （3）在“CSS样式定义”对话框中选择“类型”属性，设置“颜色”为黑色，“大小”为10像素，“修饰”为无。 （4）单击“新建CSS样式”按钮打开新建对话框，在“选择器类型”域中选择“高级”，在“选择器”下拉列表框中选中“a：hover”，然后单击“确定”按钮。 （5）在“CSS样式定义”对话框中选择“类型”属性，设置“颜色”为红色，“大小”为14像素，“修饰”为无。 （6）在网页中输入几行文字，并创建超链接。 （7）按F12预览页面，发现超链接没有下划线，当把鼠标指向超链接时，链接文字变大且变为红色。 * 创建应用于整站的外部CSS样式表 用Dreamweaver在某网页中创建了一种CSS样式后，如果需要其他的网页中应用该样式，不必重新创建该CSS样式，只要将这些CSS样式都存放在外部CSS样式表文件中，便可以供任何网页文件调用。Dreamweaver中提供多种方式创建外部CSS样式表文件，以下是其中三种常用方式： （1）在网页中“新建CSS样式”时选择存放在新建样式表文件中 （2）选择“文件”“新建”直接创建CSS文件 （3）基于系统提供的CSS样式集模板创建CSS文件 网站设计人员通常将CSS样式放在几个独立的外部文件中，供全站网页链接调用，以实现整个网站风格一致，并且通过修改外部CSS样式文件可简单快捷地更新全站风格。 * 外部CSS样式表文件示例 a{text-decoration: none} a:link{color: #1791d9; font-family: 宋体; text-decoration: none} a:visited{color: #1791d9; font-family:宋体; text-decoration: none} a:active{font-family:宋体; text-decoration: none} a:hover{border-bottom: 0px dotted; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #ff6600; text-decoration: none} body{ font-size: 12px; color: #666666; font-family:宋体; background-color: #ffffff; scrollbar-face-color: #e4e4e4; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #a0a0a0