项目5 使用CSS控制网页元素.

项目5 使用CSS控制网页元素

任务1 使用CSS控制页面、段落、文本的布局
项目5 使用CSS控制网页元素任务3 使用CSS设置超链接属性任务4 使用CSS滤镜产生绚丽效果 ......

任务分析在项目4中制作网页时，我们通过“属性”面板为页面中的部分文本设置了大小和颜色等属性值。在浏览时，网页内的文本才会显得比较协调。这时我们已经在不知不觉中使用了CSS样式。

※ 相关知识一．什么是CSS CSS（Cascading Style Sheet，层叠样式表）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或网页文档的某一部分，通常为文件头部分。通过CSS层叠样式表可以使网站保持同样的风格。如果要更换网页中的某种格式，只需修改CSS层叠样式表即可，为网页和站点的编辑节省大量时间。

※ 相关知识二．CSS分类 1．嵌入式样式表如果样式只在当前网页中使用，可以使用嵌入式样式表。嵌入式样式表一般放在网页头部的一个<style>和</style>标签之间。如： <style type="text/css"> .p { font-family: 宋体; font-size: 12px; } </style> CSS可以通常使用两种方法将指定的样式加载到网页元素上：嵌入式样式表和外部样式表。

※ 相关知识二．CSS分类 2．外部样式表如果样式要在多个网页中使用，可以使用外部样式表，外部样式表是一个以.CSS为后缀的外部文件。网页要使用外部样式表来统一风格只需在<head>中用<Link>标签将外部样式表链接起来即可。例如，在当前网页中使用外部样式表mycss.css中的格式： <link href="mycss.css" rel="stylesheet" type="text/css" /> CSS可以通常使用两种方法将指定的样式加载到网页元素上：嵌入式样式表和外部样式表。

※ 相关知识三．CSS规则对话框单击“CSS”面板中的“新建CSS规则”按钮，可打开“新建CSS规则” 对话框。如图所示。

※ 相关知识三．CSS规则对话框类（可应用于任何标签）：可以在文档窗口的任何区域或文本中应用类样式。选择器类型的含义如下：标签（重新定义特定标签的外观）：重新定义 HTML标记的的默认格式。高级（ID、伪类选择器等）：为特定的组合标签定义层叠样式表，可以使用ID作为属性，以保证文档具有唯一可用的值。

※ 相关知识三．CSS规则对话框 1．“类型”选项用于设置CSS样式的文本格式。字体：可以选择相应的字体。大小：大小就是字号，可以直接填入数字，然后选择单位。样式：设置文字的外观，包括正常、斜体、偏斜体。行高：设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。颜色：设置文字的色彩。进入“规则定义”对话框后，各选项的含义如下：

※ 相关知识三．CSS规则对话框 2．“背景”选项用于设置CSS样式的背景格式。背景颜色：选择固定色作为背景。背景图像：选择图像作为背景。重复：在使用图像作为背景的时，可以使用此项设置背景图像的重复方式。附件：选择图像做背景的时候，可以设置图像是否跟随网页一同滚动。水平位置：设置图像水平方向的位置。垂直位置：设置图像垂直方向的位置。进入“规则定义”对话框后，各选项的含义如下：

※ 相关知识三．CSS规则对话框 3．“区块”选项用于设置CSS样式的区块格式。单词间距：英文单词之间的距离，一般使用默认设置。字母间距：设置英文字母间距，使用正值为增加字母间距，使用负值为减小字母间距。垂直对齐：设置对象的垂直对齐方式。文本对齐：设置文本的水平对齐方式。文字缩进：可以设置首行缩进。进入“规则定义”对话框后，各选项的含义如下：

※ 相关知识三．CSS规则对话框 4．“方框”选项用于设置CSS样式的方框格式。宽：设置对象的宽度。高：设置对象的高度。浮动：可以设置文字等对象的环绕效果。填充：指边框和其中内容之间的空白区域。边界：是指边框外侧的空白区域。进入“规则定义”对话框后，各选项的含义如下：

※ 相关知识三．CSS规则对话框 5．“边框”选项可以给对象添加边框，设置边框的颜色、粗细、样式。样式：设置边框的样式。宽度：设置4个方向边框的宽度。颜色：设置4个方向边框对应的颜色。进入“规则定义”对话框后，各选项的含义如下：

※ 相关知识三．CSS规则对话框 6．“列表”选项设置CSS样式的列表格式。类型：设置引导列表项目的符号类型。项目符号图像：可以选择图像作为项目的引导符号。位置：决定列表项目缩进的程度。进入“规则定义”对话框后，各选项的含义如下：

※ 相关知识三．CSS规则对话框 7．“扩展”选项利用CSS实现一些扩展功能。分页：通过样式来为网页添加分页符号。光标：通过样式改变鼠标形状。过滤器：使用CSS语言实现过滤器（滤镜）效果。进入“规则定义”对话框后，各选项的含义如下：

※ 任务实施一．设置页面样式 1．打开站点example中的company.html文件。 2．在CSS样式面板中单击“全部”按钮，可以看到此网页文件中已经包含了一些CSS样式。如右图所示。由于之前我们在制作网页时设置过一些文本的字体、大小等样式，面板中这四个样式就是在我们操作时由 Dreameaver自动生成的样式。

※ 任务实施一．设置页面样式 3．选中此面板中的“样式”所在行，再单击此面板右下角的“删除样式表”按钮，删除这些样式。 4.逐一选中页面中曾经使用过样式的文本块、单元格等对象，通过“属性”面板将其样式设置为“无”。

※ 任务实施一．设置页面样式 5．单击“属性”面板中的“页面属性” 按钮，打开“页面属性”对话框，设置页面属性如右图所示。 6．单击“确定”，这些样式就被建立到当前网页文件中了。网页中有了背景图片，且文字也设置成了宋体、 12像素，页面的四个边距均为2像素。

※ 任务实施二．设置段落样式 1．在CSS样式面板中单击右下方的 “新建CSS规则”按钮，打开“新建 CSS规则”对话框。在“选择器类型”选项中选择“标签”，在“标签”下拉列表中选择“p”，在“定义在”选项中选择“仅对该文档”。如右图所示。设置完毕后，单击“确定”按钮。

※ 任务实施二．设置段落样式 2．在“p的CSS规则定义”对话框中选择 “类型”选项，设置字体为“宋体”，大小为 “12像素”，行高为“1.5倍行高”。如右图所示。

※ 任务实施二．设置段落样式 3．再选择“方框”选项，设置边界值：上、下均为0像素，左右均为8像素。如右图所示。

※ 任务实施二．设置段落样式 4．单击“确定”按钮完成段落的CSS设置。由于是对p标签（段落标记）设置的样式，所以此时网页中所有的段落都会使用这个样式表的属性设置。

※ 任务实施三．设置文本样式 1．在CSS样式面板中单击“新建CSS规则”按钮，在打开的 “新建CSS规则”对话框中，设置“选择器类型”为“类”，在“标签” 中输入“.text”，在“定义在”选项中选择“仅对该文档”。单击 “确定”按钮。

※ 任务实施三．设置文本样式 2．在“.text的CSS规则定义”对话框中选择“类型”选项，设置粗细为“粗体”，颜色为“#FFFFFF”（白色）。如右图所示。

※ 任务实施三．设置文本样式 3．通过“标签选择器”选中导航菜单所在的表格，在“属性”面板中设置样式为“text”。如右图所示。

※ 任务实施三．设置文本样式用同样的方法再建立一个“.bottom”样式，如下： 1．新建“.bottom”类。如下图所示。 2．样式中的属性值分别是：字体为“宋体”；字号为“12像素”，行高为“1.5倍行高”；颜色为“#FFFFFF”。 3．通过“标签选择器”选中网页底部的单元格，将其样式设置成.bottom。

※ 任务实施四．设置列表样式 1．在CSS样式面板中单击“新建CSS规则”按钮，在打开的 “新建CSS规则”对话框中，设置“选择器类型”为“类”；在“标签” 中输入“.list”；在“定义在”选项中选择“仅对该文档”。单击 “确定”按钮。 2．在“.list的CSS规则定义”对话框中选择“类型”选项，设置字体为“宋体”，大小为“12像素”，行高为“2倍行高”。

※ 任务实施四．设置列表样式 3．选择“区块”选项，设置文字缩进为 “30像素”。如右图所示。

※ 任务实施四．设置列表样式 4．选择“列表”选项，设置项目符号图像为“images/dot.gif”，位置为“外”。如右图所示。

※ 任务实施四．设置列表样式 5．单击“确定”按钮完成段落的CSS设置。 6．选中网页“栏目导航”中的列表（在“标签选择器”中单击<ul>标记），在“属性”面板中设置其样式为“.list”。

列表样式应用前后的效果是明显不同的，如下图所示。没有使用.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）”，修饰为“无”。如右图所示。

※ 任务实施一．建立超链接的四种状态CSS样式 5．同样的方法建立“a:visited”样式。属性设置与“a:link”样式相同。 6．再建立“a:hover”样式。属性设置中除颜色为“#FFFFFF”外，其他属性与“a:link”样式相同。 7．再建立“a:active”样式。属性设置中除颜色为“#66FF66”外，其他属性与“a:link”样式相同。

※ 任务实施一．建立超链接的四种状态CSS样式 8．选中导航菜单中的“网站首页”四个字，在“属性”面板的“链接”中选择home.html文件。如下图所示。

※ 任务实施一．建立超链接的四种状态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”。并将这块超链接的使用不同的样式。

※ 任务实施四．在网页中设置不同的超链接样式 1．将光标定位在新闻行中。再单击“CSS面板”右下方的“新建CSS规则” 按钮，打开“新建CSS规则”对话框。在“选择器类型”选项中选择“高级”，在“选择器”中输入“.list a:link”，在“定义在”选项中选择“仅对该文档”。如下图所示。单击“确定”按钮。

※ 任务实施四．在网页中设置不同的超链接样式 2．在弹出的“.list a:link的CSS规则定义”对话框中，选择“类型”，设置字体为“宋体”，大小为“12像素”，颜色为“黑色（#000000）”，修饰为 “无”。注：由于新闻标题使用了“list”样式，在建立新的超链接样式时，就用“.list a:link”作样式名，表示此超链接样式只对使用“list”样式的对象有效。

※ 任务实施四．在网页中设置不同的超链接样式 3．同样的方法建立“.list a:visited”样式，设置字体为“宋体”，大小为 “12像素”，颜色为“黑色（#000000）”，修饰为“无”。 4．同样的方法建立“.list a:hover”样式，设置字体为“宋体”，大小为 “12像素”，颜色为“#0000CC”，修饰为“无”。

※ 任务实施四．在网页中设置不同的超链接样式 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 !

项目5 使用CSS控制网页元素.

Similar presentations

Presentation on theme: "项目5 使用CSS控制网页元素."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

项目5 使用CSS控制网页元素.

Similar presentations

Presentation on theme: "项目5 使用CSS控制网页元素."— Presentation transcript:

Similar presentations

About project

反馈