项目5 使用CSS控制网页元素
任务1 使用CSS控制页面、段落、文本的布局 项目5 使用CSS控制 网页元素 任务3 使用CSS设置超链接属性 任务4 使用CSS滤镜产生绚丽效果 ......
任务1 使用CSS控制页面、段落、文本的布局 任务分析 在项目4中制作网页时，我们通过“属性”面板为页面中的部分文本设置了大小和颜色等属性值。在浏览时，网页内的文本才会显得比较协调。这时我们已经在不知不觉中使用了CSS样式。
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 一．什么是CSS CSS（Cascading Style Sheet，层叠样式表）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或网页文档的某一部分，通常为文件头部分。 通过CSS层叠样式表可以使网站保持同样的风格。 如果要更换网页中的某种格式，只需修改CSS层 叠样式表即可，为网页和站点的编辑节省大量时间。
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 二．CSS分类 1．嵌入式样式表 如果样式只在当前网页中使用，可以使用嵌入式样式表。嵌入式样式表一般放在网页头部的一个<style>和</style>标签之间。如： <style type="text/css"> .p { font-family: 宋体; font-size: 12px; } </style> CSS可以通常使用两种方法将 指定的样式加载到网页元素上： 嵌入式样式表和外部样式表。
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 二．CSS分类 2．外部样式表 如果样式要在多个网页中使用，可以使用外部样式表，外部样式表是一个以.CSS为后缀的外部文件。网页要使用外部样式表来统一风格只需在<head>中用<Link>标签将外部样式表链接起来即可。 例如，在当前网页中使用外部样式表mycss.css中的格式： <link href="mycss.css" rel="stylesheet" type="text/css" /> CSS可以通常使用两种方法将 指定的样式加载到网页元素上： 嵌入式样式表和外部样式表。
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 三．CSS规则对话框 单击“CSS”面板中的“新建CSS规则”按钮 ，可打开“新建CSS规则” 对话框。如图所示。
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 三．CSS规则对话框 类（可应用于任何标签）：可以在文档窗口的 任何区域或文本中应用类样式。 选择器类型的含义如下： 标签（重新定义特定标签的外观）：重新定义 HTML标记的的默认格式。 高级（ID、伪类选择器等）：为特定的组合标签 定义层叠样式表，可以使用ID作为属性，以保证 文档具有唯一可用的值。
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 三．CSS规则对话框 1．“类型”选项 用于设置CSS样式的文本格式。 字体：可以选择相应的字体。 大小：大小就是字号，可以直接填入数字，然后选择单位。 样式：设置文字的外观，包括正常、斜体、偏斜体。 行高：设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。 颜色：设置文字的色彩。 进入“规则定义”对话框后， 各选项的含义如下：
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 三．CSS规则对话框 2．“背景”选项 用于设置CSS样式的背景格式。 背景颜色：选择固定色作为背景。 背景图像：选择图像作为背景。 重复：在使用图像作为背景的时，可以使用此项设置背景图像的重复方式。 附件：选择图像做背景的时候，可以设置图像是否跟随网页一同滚动。 水平位置：设置图像水平方向的位置。 垂直位置：设置图像垂直方向的位置。 进入“规则定义”对话框后， 各选项的含义如下：
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 三．CSS规则对话框 3．“区块”选项 用于设置CSS样式的区块格式。 单词间距：英文单词之间的距离，一般使用默认设置。 字母间距：设置英文字母间距，使用正值为增加字母间距，使用负值为减小字母间距。 垂直对齐：设置对象的垂直对齐方式。 文本对齐：设置文本的水平对齐方式。 文字缩进：可以设置首行缩进。 进入“规则定义”对话框后， 各选项的含义如下：
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 三．CSS规则对话框 4．“方框”选项 用于设置CSS样式的方框格式。 宽：设置对象的宽度。 高：设置对象的高度。 浮动：可以设置文字等对象的环绕效果。 填充：指边框和其中内容之间的空白区域。 边界：是指边框外侧的空白区域。 进入“规则定义”对话框后， 各选项的含义如下：
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 三．CSS规则对话框 5．“边框”选项 可以给对象添加边框，设置边框的颜色、粗细、样式。 样式：设置边框的样式。 宽度：设置4个方向边框的宽度。 颜色：设置4个方向边框对应的颜色。 进入“规则定义”对话框后， 各选项的含义如下：
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 三．CSS规则对话框 6．“列表”选项 设置CSS样式的列表格式。 类型：设置引导列表项目的符号类型。 项目符号图像：可以选择图像作为项目的引导符号。 位置：决定列表项目缩进的程度。 进入“规则定义”对话框后， 各选项的含义如下：
任务1 使用CSS控制页面、段落、文本的布局 ※ 相关知识 三．CSS规则对话框 7．“扩展”选项 利用CSS实现一些扩展功能。 分页：通过样式来为网页添加分页符号。 光标：通过样式改变鼠标形状。 过滤器：使用CSS语言实现过滤器（滤镜）效果。 进入“规则定义”对话框后， 各选项的含义如下：
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 一．设置页面样式 1．打开站点example中的company.html文件。 2．在CSS样式面板中单击“全部”按钮 ，可以看到 此网页文件中已经包含了一些CSS样式。如右图所示。 由于之前我们在制作网页时设置过一些文本的字体、 大小等样式，面板中这四个样式就是在我们操作时由 Dreameaver自动生成的样式。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 一．设置页面样式 3．选中此面板中的“样式”所在行 ，再单击此面板 右下角的“删除样式表”按钮 ，删除这些样式。 4.逐一选中页面中曾经使用过样式的文本块、单元格等 对象，通过“属性”面板将其样式设置为“无”。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 一．设置页面样式 5．单击“属性”面板中的“页面属性” 按钮 ，打开“页面属性”对话 框，设置页面属性如右图所示。 6．单击“确定”，这些样式就被建立 到当前网页文件中了。网页中有了 背景图片，且文字也设置成了宋体、 12像素，页面的四个边距均为2像素。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 二．设置段落样式 1．在CSS样式面板中单击右下方的 “新建CSS规则”按钮 ，打开“新建 CSS规则”对话框。 在“选择器类型”选项中选择“标签”，在“标签”下拉列表中选择“p”，在“定义在”选项中选择“仅对该文档”。如右图所示。设置完毕后，单击“确定”按钮。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 二．设置段落样式 2．在“p的CSS规则定义”对话框中选择 “类型”选项，设置字体为“宋体”，大小为 “12像素”，行高为“1.5倍行高”。如右图 所示。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 二．设置段落样式 3．再选择“方框”选项，设置边界值： 上、下均为0像素，左右均为8像素。 如右图所示。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 二．设置段落样式 4．单击“确定”按钮完成段落的CSS设置。 由于是对p标签（段落标记）设置的样式，所以此时网页中所有的段落都会使用这个样式表的属性设置。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 三．设置文本样式 1．在CSS样式面板中单击“新建CSS规则”按钮 ，在打开的 “新建CSS规则”对话框中，设置“选择器类型”为“类”，在“标签” 中输入“.text”，在“定义在”选项中选择“仅对该文档”。单击 “确定”按钮。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 三．设置文本样式 2．在“.text的CSS规则定义”对话框中选 择“类型”选项，设置粗细为“粗体”，颜色 为“#FFFFFF”（白色）。如右图所示。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 三．设置文本样式 3．通过“标签选择器”选中导航菜单所在的 表格，在“属性”面板中设置样式为“text”。 如右图所示。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 三．设置文本样式 用同样的方法再建立一个“.bottom”样式，如下： 1．新建“.bottom”类。如下图所示。 2．样式中的属性值分别是：字体为“宋体”；字号为“12像素”，行高 为“1.5倍行高”；颜色为“#FFFFFF”。 3．通过“标签选择器”选中网页底部的单元格，将其样式设置成.bottom。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 四．设置列表样式 1．在CSS样式面板中单击“新建CSS规则”按钮 ，在打开的 “新建CSS规则”对话框中，设置“选择器类型”为“类”；在“标签” 中输入“.list”；在“定义在”选项中选择“仅对该文档”。单击 “确定”按钮。 2．在“.list的CSS规则定义”对话框中选择“类型”选项，设置字体 为“宋体”，大小为“12像素”，行高为“2倍行高”。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 四．设置列表样式 3．选择“区块”选项，设置文字缩进为 “30像素”。如右图所示。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 四．设置列表样式 4．选择“列表”选项，设置项目符号图像 为“images/dot.gif”，位置为“外”。 如右图所示。
任务1 使用CSS控制页面、段落、文本的布局 ※ 任务实施 四．设置列表样式 5．单击“确定”按钮完成段落的CSS设置。 6．选中网页“栏目导航”中的列表（在“标签选择器”中单击<ul>标记）， 在“属性”面板中设置其样式为“.list”。
任务1 使用CSS控制页面、段落、文本的布局 列表样式应用前后的效果是 明显不同的，如下图所示。 没有使用.list样式的效果 使用.list样式后的效果 返回
任务2 使用CSS控制表格元素的外观 任务分析 本任务我们将使用CSS对“栏目导航”和“联系方式”两个区域进一步进行美化。设置文本颜色为“白色”，对这行标题使用列表样式，并且用“images\title01.jpg”图片作单元格的背景。
任务2 使用CSS控制表格元素的外观 ※ 任务实施 1．打开站点example中的company.html文件。 ※ 任务实施 1．打开站点example中的company.html文件。 1．打开站点example中的company.html文件。 2．在CSS样式面板中单击“新建CSS规则”按钮 ，在打开的“新建 CSS规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入 “.tab_title”；在“定义在”选项中选择“仅对该文档”。单击“确定”按钮。 2．在CSS样式面板中单击“新建CSS规则”按钮 ，在打开的“新建 CSS规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入 “.tab_title”；在“定义在”选项中选择“仅对该文档”。单击“确定”按钮。 3．选择“类型”选项，设置文本字体为“宋体”，大小为“12像素”，行高 为“1.5倍行高”，粗细为“粗体”，颜色为“#FFFFFF”。
任务2 使用CSS控制表格元素的外观 ※ 任务实施 4．选择“类型”选项，设置背景图像为 ※ 任务实施 4．选择“类型”选项，设置背景图像为 “images/title01.jpg”，如右图所示。
任务2 使用CSS控制表格元素的外观 ※ 任务实施 5．选择“列表”选项，设置背景图像为 “images/dot1.jpg”，位置为“外”， ※ 任务实施 5．选择“列表”选项，设置背景图像为 “images/dot1.jpg”，位置为“外”， 如右图所示。
任务2 使用CSS控制表格元素的外观 ※ 任务实施 6．通过“标签选择器”选中“栏目导航”所在的单元格，在“属性”面板中 ※ 任务实施 6．通过“标签选择器”选中“栏目导航”所在的单元格，在“属性”面板中 设置样式为“tab_title”。 7．同样的方法设置“联系方式”单元格样式。
任务2 使用CSS控制表格元素的外观 网页的浏览效果 返回
任务3 使用CSS设置超链接属性 任务分析 本任务要为company.html网页的导航菜单及各板块建立超链接。并为超链接设置美观的CSS样式，存储为外部样式表，不仅可将样式作用于当前网页，也可供其他网页所调用。
任务3 使用CSS设置超链接属性 ※ 相关知识 一．利用CSS设置超链接的四种状态 超链接有四种显示状态，含义如下： ※ 相关知识 一．利用CSS设置超链接的四种状态 超链接有四种显示状态，含义如下： a:link——超链接默认状态； a:visited——已访问过的超链接状态； a:hover——鼠标指向的超链接状态； a:active——鼠标正在点击的超链接状态。 在“新建CSS规则”对话框中选择“高级”，则在选择器的下拉列表中可以看到这四种超链接样式规则。 如右图所示。
二．将网页中不同位置的超链接设置成不同的样式 任务3 使用CSS设置超链接属性 ※ 相关知识 二．将网页中不同位置的超链接设置成不同的样式 如果网页不同区块的内容超链接样式要求不同，则可以在“新建 CSS规则”对话框中将超链接样式名前加上该区块元素的ID名或者 类名，即可设置出专门针对某些区块或某些标记的超链接样式。这 样就能在同一个网页中制作出不同的超链接样式。
任务3 使用CSS设置超链接属性 ※ 任务实施 一．建立超链接的四种状态CSS样式 ※ 任务实施 一．建立超链接的四种状态CSS样式 1．打开站点example中的company.html文件。 2．在CSS样式面板中单击“新建CSS规则按钮” ，打开“新建CSS 规则”对话框。在“选择器类型”选项中选择“高级”，在“选择器”选项中 选择“a:link”，在“定义在”选项中选择“<新建样式表文件>”。设置 完毕后，单击“确定”按钮。
任务3 使用CSS设置超链接属性 ※ 任务实施 一．建立超链接的四种状态CSS样式 3．弹出“保存样式表文件为”对话框。 ※ 任务实施 一．建立超链接的四种状态CSS样式 3．弹出“保存样式表文件为”对话框。 如右图所示。输入样式表文件名为 “a_css.css”，保存位置是站点 文件夹mwmw中的css文件夹。 单击“保存”按钮。
任务3 使用CSS设置超链接属性 ※ 任务实施 一．建立超链接的四种状态CSS样式 4．在弹出的“a:link的CSS规则定义” ※ 任务实施 一．建立超链接的四种状态CSS样式 4．在弹出的“a:link的CSS规则定义” 对话框中，选择“类型”，设置字体为 “宋体”，大小为“12像素”，颜色为 “黄色（#FFFF00）”，修饰为“无”。 如右图所示。
任务3 使用CSS设置超链接属性 ※ 任务实施 一．建立超链接的四种状态CSS样式 ※ 任务实施 一．建立超链接的四种状态CSS样式 5．同样的方法建立“a:visited”样式。属性设置与“a:link”样式相同。 6．再建立“a:hover”样式。属性设置中除颜色为“#FFFFFF”外， 其他属性与“a:link”样式相同。 7．再建立“a:active”样式。属性设置中除颜色为“#66FF66”外， 其他属性与“a:link”样式相同。
任务3 使用CSS设置超链接属性 ※ 任务实施 一．建立超链接的四种状态CSS样式 ※ 任务实施 一．建立超链接的四种状态CSS样式 8．选中导航菜单中的“网站首页”四个字，在“属性”面板的“链接”中 选择home.html文件。如下图所示。
任务3 使用CSS设置超链接属性 ※ 任务实施 一．建立超链接的四种状态CSS样式 ※ 任务实施 一．建立超链接的四种状态CSS样式 9．按F12浏览网页。Dreamweaver会弹出一个提示对话框， 单击“是”，保存a_css.css样式表文件，并进行浏览。如下图所示。 10．观察鼠标操作超链接时，文字是否按我们设置的样式进行变化。
任务3 使用CSS设置超链接属性 ※ 任务实施 二．为导航菜单建立完整的超链接 导航菜单中的每一项目都对应着一个网页，虽然目前还没有创建这些 ※ 任务实施 二．为导航菜单建立完整的超链接 导航菜单中的每一项目都对应着一个网页，虽然目前还没有创建这些 网页，为了学习的方便，我们在此先为这些项目创建超链接。如下表 所示。为以后的学习任务做好准备。 栏目 超链接目标 网站首页 home.html 在线预订 mark.html 公司介绍 company.html 加盟连锁 case.html 行业动态 news.html 招聘信息 job.html 美食展示 product.html 联系我们 contact.html 餐厅环境 environment.html
任务3 使用CSS设置超链接属性 ※ 任务实施 三．在网页中调用外部样式表 1．打开home.html文件。 ※ 任务实施 三．在网页中调用外部样式表 1．打开home.html文件。 2．在“CSS样式”面板中单击右下方的“附加 样式表”按钮 ，打开“链接外部样式表” 对话框，如右图所示。定位到css文件夹中的 a_css.css，“添加为”使用“链接”方式， 单击“确定”即可。
任务3 使用CSS设置超链接属性 ※ 任务实施 三．在网页中调用外部样式表 3．参照company.html中的超链接设置，为当前网页 ※ 任务实施 三．在网页中调用外部样式表 3．参照company.html中的超链接设置，为当前网页 的导航菜单设置超链接。 4．为网页各区块右上方的“更多…”设置相应的超链接，如下： “酒店简介”右侧的“更多…”——company.html； “今日推介”右侧的“更多…”——product.html； “餐馆环境”右侧的“更多…”——environment.html； “行业动态”右侧的“更多…”——news.html。
任务3 使用CSS设置超链接属性 ※ 任务实施 三．在网页中调用外部样式表 5．为网页右下方的各图像逐一设置超链接，均为 ※ 任务实施 三．在网页中调用外部样式表 5．为网页右下方的各图像逐一设置超链接，均为 product.html。如下图所示。
任务3 使用CSS设置超链接属性 ※ 任务实施 四．在网页中设置不同的超链接样式 ※ 任务实施 四．在网页中设置不同的超链接样式 在home.html网页的左下方“行业动态”中有5行新闻标题， 现在我们为其设置超链接目标为“article/read1.html”。并 将这块超链接的使用不同的样式。
任务3 使用CSS设置超链接属性 ※ 任务实施 四．在网页中设置不同的超链接样式 ※ 任务实施 四．在网页中设置不同的超链接样式 1．将光标定位在新闻行中。再单击“CSS面板”右下方的“新建CSS规则” 按钮 ，打开“新建CSS规则”对话框。在“选择器类型”选项中选择“高级”， 在“选择器”中输入“.list a:link”，在“定义在”选项中选择“仅对该文档”。如 下图所示。单击“确定”按钮。
任务3 使用CSS设置超链接属性 ※ 任务实施 四．在网页中设置不同的超链接样式 ※ 任务实施 四．在网页中设置不同的超链接样式 2．在弹出的“.list a:link的CSS规则定义”对话框中，选择“类型”，设置 字体为“宋体”，大小为“12像素”，颜色为“黑色（#000000）”，修饰为 “无”。 注：由于新闻标题使用了“list”样式，在建立新的超链接样式时，就用“.list a:link”作样式名，表示此超链接样式只对使用“list”样式的对象有效。
任务3 使用CSS设置超链接属性 ※ 任务实施 四．在网页中设置不同的超链接样式 ※ 任务实施 四．在网页中设置不同的超链接样式 3．同样的方法建立“.list a:visited”样式，设置字体为“宋体”，大小为 “12像素”，颜色为“黑色（#000000）”，修饰为“无”。 4．同样的方法建立“.list a:hover”样式，设置字体为“宋体”，大小为 “12像素”，颜色为“#0000CC”，修饰为“无”。
任务3 使用CSS设置超链接属性 ※ 任务实施 四．在网页中设置不同的超链接样式 ※ 任务实施 四．在网页中设置不同的超链接样式 5．同样的方法建立“.list a:active”样式，设置字体为“宋体”，大小为 “12像素”，颜色为“#000099”，修饰为“无”。 6．保存，浏览网页。 返回
任务4 使用CSS滤镜产生绚丽效果 任务分析 本任务使用CSS的Alpha滤镜来设置company.html中的图像显示效果和home.html中的文本显示效果。
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 CSS滤镜主要应用于IE浏览器，可以给网页中的文字、图像等 ※ 相关知识 二、滤镜类型及参数设置 CSS滤镜主要应用于IE浏览器，可以给网页中的文字、图像等 元素添加特殊效果。比如设置透明度、发光、翻转、阴影等。 滤镜在HTML中的语法是： filter：fiitername(parameters)
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 1．Alpha滤镜： 制作透明效果，其语法是： ※ 相关知识 二、滤镜类型及参数设置 1．Alpha滤镜： 制作透明效果，其语法是： filter：Alpha(opacity=?，finishopacity=?，style=?， startx=?，starty=?，finishx=?，finishy=?) 相关参数解析： opacity：元素透明度，当它为0时表示完全透明，为100时表示完全不透明；finishopacity：结束区域的透明度，取值与opacity相同； style：透明区域的形状，0代表单一颜色的矩形，l代表线形，2代表放射状圆形，3代表放射状矩形； startx：渐变透明效果开始处的X坐标； starty：渐变透明效果开始处的Y坐标； finishx：渐变透明效果结束处的X坐标； finishy：渐变透明效果结束处的Y坐标。
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 2．Blur滤镜 制作模糊效果，其语法是： ※ 相关知识 二、滤镜类型及参数设置 2．Blur滤镜 制作模糊效果，其语法是： filter：Blur(add=?，direction=?，strength=?) 常用滤镜及其 参数介绍如下： 相关参数解析： add：图像是否被制作成模糊效果，可以是true或false，默认是true； direction：模糊的角度.O表示垂直向上，顺时针走向，默认向左的值为270； strength：模糊程度的大小，一般为整数，单位是像素。
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 3．Chroma 把指定的颜色设置为透明，其语法是： ※ 相关知识 二、滤镜类型及参数设置 3．Chroma 把指定的颜色设置为透明，其语法是： filter：Chroma(color=?) 常用滤镜及其 参数介绍如下： 相关参数解析： color：要设置成透明的颜色。
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 4.DropShadow 制作投射阴影效果，可以指定阴影的偏移量 ※ 相关知识 二、滤镜类型及参数设置 4.DropShadow 制作投射阴影效果，可以指定阴影的偏移量 filter：DropShadow(color=?，offx=?，offy=?,positive=?) 常用滤镜及其 参数介绍如下： 相关参数解析： color：阴影的颜色； offx：水平方向阴影的偏移量，一般为整数； offy：垂直方向阴影的偏移量，一般为整数； positive：给非透明像素部分建立可见阴影，true是给非透明像素部分建立可见阴影，false则是给透明的像素部分建立可见的阴影。
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 5．FlipH滤镜 ※ 相关知识 二、滤镜类型及参数设置 5．FlipH滤镜 制作水平翻转效果，其语法是： filter：FlipH 常用滤镜及其 参数介绍如下： 6．FlipV滤镜 制作垂直翻转效果，其语法是：filter：F1ipV
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 7．Glow滤镜 制作发光效果，其语法是： ※ 相关知识 二、滤镜类型及参数设置 7．Glow滤镜 制作发光效果，其语法是： Filter：Glow(color=?，strength=?) 常用滤镜及其 参数介绍如下： 相关参数解析： color：发光的颜色； strength：发光的强度，一般为整数，单位是像素。
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 8．Gray ※ 相关知识 二、滤镜类型及参数设置 8．Gray 将彩色图片转为灰度显示，其语法是：Filter：Gray 常用滤镜及其 参数介绍如下： 9．Invert滤镜 将色彩、饱和度以及亮度值完全反转建立底片效果， 其语法是：Filter：Invert
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 10．Mask滤镜 设置遮罩效果，其语法是： ※ 相关知识 二、滤镜类型及参数设置 10．Mask滤镜 设置遮罩效果，其语法是： Filter：Mask(Color=?) 常用滤镜及其 参数介绍如下： 相关参数解析： Color:指定遮罩的颜色。
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 11.Shadow滤镜 ※ 相关知识 二、滤镜类型及参数设置 11.Shadow滤镜 制作阴影效果，可以指定阴影的方向，其语法是： filter：shadow(color=?，direction=?) 常用滤镜及其 参数介绍如下： 相关参数解析： color：阴影的颜色； direction：阴影的角度，0表示垂直向上，顺时针走向，默认向左的值是270。
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 12．Wave滤镜 ※ 相关知识 二、滤镜类型及参数设置 12．Wave滤镜 制作波纹效果，其语法是：filter：Wave(add=?，freq=?， lightstrength=?，phase=?，strength=?) 常用滤镜及其 参数介绍如下： 相关参数解析： add：是否要添加波纹效果，默认为true； freq：波纹的频率； lightstrength：可以对于波纹增强光影的效果，取值范围0到100： phase：设置正弦波的偏移量； strength：振幅大小。
任务4 使用CSS滤镜产生绚丽效果 ※ 相关知识 二、滤镜类型及参数设置 13．Xray 常用滤镜及其 ※ 相关知识 二、滤镜类型及参数设置 13．Xray 设置X光照效果，其语法是：filter：Xray 常用滤镜及其 参数介绍如下：
任务4 使用CSS滤镜产生绚丽效果 ※ 任务实施 2．在CSS样式面板中单击新建CSS规则按钮 ，打开“新建 ※ 任务实施 1．打开站点example中的company.html文件。 2．在CSS样式面板中单击新建CSS规则按钮 ，打开“新建 CSS规则”对话框。在“选择器类型”选项中选择“高级”，在“选 择器”选项中选择“.myfilter”，在“定义在”选项中选择“仅对 该文档”。如下图所示。单击“确定”按钮。
任务4 使用CSS滤镜产生绚丽效果 ※ 任务实施 3．在“.myfilter的CSS规则定义”对话框中选择“扩展”，设置过滤器为 ※ 任务实施 3．在“.myfilter的CSS规则定义”对话框中选择“扩展”，设置过滤器为 “Alpha(Opacity=100, FinishOpacity=0, Style=3)”。如下图 所示。单击“确定”。
任务4 使用CSS滤镜产生绚丽效果 ※ 任务实施 4．选中网页中的图像，在“属性”面板中设置“类”为“myfilter”。 ※ 任务实施 4．选中网页中的图像，在“属性”面板中设置“类”为“myfilter”。 5．按F12，保存并游览网页。
任务4 使用CSS滤镜产生绚丽效果 ※ 任务实施 6．在IE浏览器窗口中会出现一行提示信息，如下图所示。这是IE浏览器 ※ 任务实施 6．在IE浏览器窗口中会出现一行提示信息，如下图所示。这是IE浏览器 的安全设置提示，点击这行提示，在快捷菜单中选择“允许阻止的内容”， 即可正常显示滤镜效果了。
任务4 使用CSS滤镜产生绚丽效果 company.html中 的图像显示效果 原图显示效果 添加滤镜后的显示效果
任务4 使用CSS滤镜产生绚丽效果 ※ 任务实施 设置home.html中的滤镜方法与此类似，操作如下 ： ※ 任务实施 设置home.html中的滤镜方法与此类似，操作如下 ： 1．打开站点example中的company.html文件。
任务4 使用CSS滤镜产生绚丽效果 ※ 任务实施 2．在CSS样式面板中单击“新建CSS规则”按钮 ，打开“新建 ※ 任务实施 2．在CSS样式面板中单击“新建CSS规则”按钮 ，打开“新建 CSS规则”对话框。在“选择器类型”选项中选择“高级”，在“选 择器”选项中选择“.myfilter”，在“定义在”选项中选择“仅对 该文档”。如下图所示。单击“确定”按钮。
任务4 使用CSS滤镜产生绚丽效果 ※ 任务实施 3．在“.myfilter的CSS规则定义”对话框中选择“类型”，设置字体为 ※ 任务实施 3．在“.myfilter的CSS规则定义”对话框中选择“类型”，设置字体为 “宋体”，大小为“12像素”，颜色为“#FFFFFF”。 4．在“.myfilter的CSS规则定义”对话框中选择“扩展”，设置过滤器为 “Alpha(Opacity=50, FinishOpacity=100, Style=2)”。单击“确定”。 5．在网页中选中“今日推介”所在的单元格，在“属性”面板中设置“样式”为 “myfilter”，即可。
任务4 使用CSS滤镜产生绚丽效果 home.html中 的文本显示效果 原文本显示效果 添加滤镜后文本显示效果 返回
Thank You !