第9章 CSS样式使用-YS.ppt

1、,网页设计与制作,第1章 网页设计概述 第2章 HTML语言基础 第3章 Dream weaver 基础 第4章 网页中的基础元素 第5章 网页页面布局 第6章 网页中的层和时间轴 第7章 表单的应用 第8章 在网页中使用行为 第9章 CSS样式使用 第10章 网页中的多媒体应用 第11章 模板和库 第12章 站点测试和发布 第13章 Flash 简介 第14章 Fireworks 简介,$ 知识目标 了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法 8 能力目标 了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法,第9章 CSS样式使用,

2、9.1 CSS样式概述 9.2 使用CSS样式 9.3 CSS样式设置 9.4 CSS样式经典实例 本章小结,第9章 CSS样式使用,9.1 CSS样式概述,9.1.1 认识CSS样式 9.1.2 CSS样式的类型 9.1.3 CSS样式面板,CSS样式表（Cascading Style Sheets，简称CSS），又称为层叠式样式表，由W3C（World Wide Web Consortium）组织开发的。CSS样式是预先定义的一个格式的集合，包括字体、大小、颜色、对齐方式等。利用CSS样式可以使整个站点的风格保持一致，是网页设计中用途最广泛、功能最强大的元素之一。 层叠样式表用于控制网页样

3、式并允许将样式与网页内容分离的一种标记性语言。CSS将网页的外观设计从网页内容中独立出来单独管理。要改变网页的外观时，只需更改CSS样式。,9.1.1 认识CSS样式,9.1 CSS样式概述,定义CSS样式表,CSS样式定义由三部分构成： 选择符（selector）、 属性（properties）、 属性值（value）。 定义CSS样式的格式为： 选择符属性:属性值;属性:属性值 CSS样式需要在内部的 中进行定义或引用外部CSS文件，在部分使用。,CSS的样式规则由两部分组成：选择器和声明。选择器就是样式的名称，包括自定义的类，HTML标签和CSS选择器（高级样式）： 自定义CSS规则类：

4、指根据用户的需要创建一个CSS样式属性，可应用到文字，图片等网页元素中。 HTML标签规则：可以对HTML语言中的某一标签进行重新定义。 CSS选择器样式（高级样式）：重新定义特定元素组合的格式设置，或重新定义CSS允许的其他选择器的格式设置，还可以重新定义包含特定id属性的标签的格式设置。,9.1.2 CSS样式的类型,9.1 CSS样式概述,单击菜单栏中“窗口”|“CSS样式”命令或用组合键Shift+F11键打开CSS样式面板，如图所示。 “全部”模式 “正在”模式,9.1.3 CSS样式面板,9.1 CSS样式概述,1CSS样式面板有“全部”和“正在”两种模式。 “全部”模式：显示两个

5、窗格：“所有规则”窗格（上部）和“属性”窗格（下部）。 “正在”模式：显示三个窗格：显示文档中当前所选内容的CSS属性的“所选内容的摘要”窗格，显示所选属性的位置的“规则”窗格，以及CSS属性的“属性”窗格。 2面板中主要功能按钮如下： ：表示附加或链接外部样式表。 ：新建样式表。 ：编辑选中的样式表。 ：删除选中的样式表,9.1.3 CSS样式面板,9.1 CSS样式概述,9.1 CSS样式概述,CSS的应用方式有以下两种： 外部CSS样式表：以扩展名为.css的文件而存在，文件中内容即是所有样式的选择和声明。该文件可做为共享文件，让多个文档共同引用并应用，达到站点文件样式的一致性。同时，如

6、果修改该样式表文件，所有引用的文档都将改变其样式，达到网站迅速改版的目的。导入：import 或 链接: link import url(CSS/colors1.css); 内部CSS样式表：只存在于当前文档中，并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。,9.2 使用CSS样式,9.2.1 创建CSS样式 9.2.2 附加外部CSS样式 9.2.3 应用CSS样式 9.2.4 编辑CSS样式 9.2.5 删除CSS样式,（一）创建样式表文件 1单击菜单栏中“文件”|“新建”命令，打开新建文档对话框。 2在对话框左侧“类别”中选择“CSS样式表”类别，在中间

7、“CSS样式表”栏选择需要的样式，右侧是样式表预览图。 3点击“创建”按钮，新建了一个CSS样式表文件，如图所示。 编辑样式表后，单击菜单栏中“文件”|“保存”命令，则可以保存一个外部的样式表文件。,9.2.1 创建CSS样式,9.2 使用CSS样式,（二）在CSS样式面板中创建CSS样式表文件 1在CSS样式面板中，单击“新建” 按钮，打开“新建CSS规则”对话框： 2设置选择器类型为“类”，名字为.dazi，定义在“新建样式表文件”，单击“确定”按钮，打开“保存样式表文件”对话框。 3. 选择器中4种选择的说明,9.2.1 创建CSS样式,9.2 使用CSS样式,选择符,类选择符 使用自命

8、名的标识符定义CSS样式。类选择符样式的定义格式为： 类选择符属性:属性值; 选择符前面自动加“.”表示这是一个类选择符 ID选择符 使用自命名的标识符定义CSS样式。ID选择符样式的定义格式为： #ID选择符属性;属性值; 选择符前面加“#”表示这是一个ID选择符。,选择符,标记选择符 CSS样式的选择符可以是HTML标记，这种样式重新定义了特定标记的外观。使用标记选择符定义CSS样式的格式为： 标记选择符属性:属性值;,CSS属性,在“CSS规则定义”对话框的“分类”列表框中，共有类型、背景、区块、方框、边框、列表、定位、扩展等八大类。,3保存样式表文件，同时打开“.dazi的CSS规则定

9、义的对话框，如图所示。 4在“类型”选项中，设置字体字号等项目，完成后单击“确定”按钮，新建的样式出现在样式面板中，如图所示。 解释：px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。,9.2.1 创建CSS样式,9.2 使用CSS样式,1打开CSS样式表面板。 2 执行以下操作之一： 单击CSS面板底部的“附加样式表”按钮 或者右键单击CSS样式面板，在弹出的快捷菜单中选择“附加样式表”命令。 3打开“链接外部样式表”对话框，如图所示。,9.2

10、.2 附加外部CSS样式,9.2 使用CSS样式,链接：,导入： ,4点击“浏览”按扭，选择要添加的样式文件。添加的形式有两种： “链接”：网页与样式表文件的关系是链接关系，而且不将样式表的信息导入网页中。 “导入”：将外部样式表文件的信息导入到当前网页文档中。 5单击“确定”按钮。这样外部的CSS样式就会链接或导入到当前文档中。,9.2.2 附加外部CSS样式,9.2 使用CSS样式,1首先要打开需要链接CSS样式的文档，选中文字或图片等网页元素。 2执行以下操作之一： 在属性检查器中的“样式”下拉列表中选择编辑好的样式，如选择“dazi”，如图所示。 在CSS样式面板中，右击要应用的样式名

11、称（如.dazi），在弹出的快捷菜单中选择“套用”。 3所选的文字应用了CSS样式。 4取消样式的应用，只需在选择己应用样式的文本，在“属性检查器”中的“样式”下拉列表中选择“无”即可。,9.2.3 应用CSS样式,9.2 使用CSS样式,在CSS样式面板中选择要编辑的样式名称，然后点击面板下方的 按钮，会弹出“CSS规则定义”对话框，在对话框中可以对CSS样式重新编辑。 9.2.5 删除CSS样式 在CSS样式面板中选择要删除的CSS样式名称，点击 按钮，就可以删除掉CSS样式。,9.2.4 编辑CSS样式,9.2 使用CSS样式,9.3 CSS样式设置,9.3.1 类型 9.3.2 背景

12、9.3.2 区块 9.3.4 方框 9.3.5 边框 9.3.6 列表 9.3.7 定位 9.3.8 扩展,css盒子模型,css盒子模型,实例,9.3.1 类型 类型属性主要用来定义文字的字体、大小、样式、颜色等属性。,9.3 CSS样式设置,类型属性,类型属性,字体（font-family），设定时，需考虑浏览器中有无该字体。 大小（font-size），注意度量单位。 粗细（font-weight），除了normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置方式。 样式（font-style），也就是字型。 行高（line

13、-height），就是行距。注意，行距只能是以字体大小值为参照 变形（font-variant），可以将正常文字一半尺寸后大写显示，但IE目前不支持这项属性。 大小写（text-transform），这项属性能轻而易举地控制字母大小写，有首字大写（capitalize、大写（uppercase）、小写（lowercase）和无（none，使所有继承文字和变形参数被忽略，文字将以正常形式显示）等4种。 修饰（text-decoration），用于控制链接文本的显示形态，有下划线（underline）、无下划线（overline）、删除线（line-through）、闪烁（blink）和无（non

14、e ，使上述效果均不会发生）等5种修饰方式。但IE4不支持文字闪烁。,“类型”类别主要用于定义文本属性，具体为： 1字体：设置字体或字体组。 2大小：选择或键入字体的大小，单位可以选择“像素（px）”、“点数（pt）”等。 3粗细：设置字体的粗细程度。 4样式：选择文本的字体格式有正常、斜体和偏斜体三种，偏斜体是指文本为倾斜的字体格式。 5变量：设置文字变形的字体格式。此项在Dreawmeaver8文档窗口中不显示，Internet Explorer6.0版本以上显示，Netscape Navigator不支持。,9.3.1 类型,9.3 CSS样式设置,6行高：设置文本的行间距。有两个选项：

15、正常：自动设置文本间行的高度；（值）：设置文本之间的行距的具体数值。 7大小写：设置字体的大小写方式。 8修饰：选择需要的复选框，给文字添加修饰。 9颜色：设置文字的颜色。,9.3.1 类型,9.3 CSS样式设置,类型属性,以新建的类“.word”为例，来说明如何设置类型属性。应用“.word”样式的文字效果如图所示：,背景属性设定对象的背景颜色或背景图像。,9.3.2 背景,9.3 CSS样式设置,背景属性,CSS样式背景属性:,背景属性,背景颜色（background-color），设置背景颜色。 背景图像（background-image），设置网页背景图像。 重复（backgroun

16、d-repeat），控制背景图像的平铺方式，有不重复（no-repeat）、重复（repeat，沿水平、垂直方向平铺）、横向重复（repeat-X，图像沿水平方向平铺）和纵向重复（repeat-Y，沿图像垂直方向平铺）等4种选择。 附加（background-attachment），用于控制背景图像是否会随页面的滚动而一起滚动。有固定（fixd，文字滚动时，背景图像保质固定）和滚动（scroll，背景图像随文字内容一起滚动）两种选择。 水平位置/垂直位置（background-position），确定背景图像的水平、垂直位置。共有左对齐（left）、右对齐（right）、顶部（top）、底部（

17、bottom）、居中（center）和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控制）等6种选择。,1背景颜色：设置背景颜色。 2背景图像：设置背景图像，通过后面的“浏览”按钮可以选择一个图像作为背景。(用英文路径及文件名) 3重复：表示背景图像的填充方式，有四个选项： “不重复”：图像不重复，只是应用CSS样式的网页元素前面显示一次。 “重复”：图像会在水平和垂直方向重复。 “水平重复”：背景图像在水平方向上重复。 “纵向重复”：背景图像在垂直方向上重复 4附件：在下拉菜单中选择背景图像的显示方式。 5“水平位置”和“垂直位置”：设置背景图像相对于元素的初始位置。,9

18、.3.2 背景,9.3 CSS样式设置,背景属性,背景属性主要用来定义页面的背景颜色或背景图像。应用背景颜色和背景图像的效果如图所示。,背景图案固定不滚动,1.先新建一个CSS的类，起名：bj 2.进入CSS浮动面板，按上面的参数设置 3.选中在CSS面板上右键点击 .bj 类套用 4.形成标签： 5.浏览可见效果,9.3.3 区块 区块属性主要用来定义间距和对齐方式。,9.3 CSS样式设置,区块属性,单词间距（word-spacing），主要用于控制文字间相隔的距离。有正常（normal）和值（自定义间隔值）两种选择方式。当选择值时，可用的单位有英吋（in）、厘米（cm）、毫米（mm）、点

19、数(pt）、 字母间距（letter-spacing），其作用与字符间距类似，也有正常（normal）和值（自定义间隔值）两种选择方式。 垂直对齐（vertical-align），控制文字或图像相对于其母体元素的垂直位置。共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（sub，将元素以下标的形式显示）,上标（super，将元素以上标的形式显示）、顶部（top ，将元素顶部同最高的母体元素对齐）、文本顶对齐（text-top，将元素的顶部同母体元素文字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的底部同最低的母体元

20、素对齐）及值（自定义）等9种选择。 文本对齐（text-align），设置块的水平对齐方式。共有左对齐（left）、右对齐（right）、居中（center）和均分（justify）等4种选择。 文字缩进（text-indent），控制块的缩进程度。 空白间距（white-space），在HTML中，空格是被省略的；在CSS中则使用属性（white-space）控制空格的输入。共有正常（normal）、保留（pre）和不换行（nowrap）等3种选择。,1单词间距：选择或设置单词间的间距。 2字母间距：选择或设置字母间的间距。 3重直对齐：设置元素在垂直位置上的对齐方式。 4文本对齐：设置文本

21、的对齐方式。 5文字缩进：文本框中输入具体数值，精确设置文本的首行缩进的大小。 6空格：设置文本处理空格的方式。“正常”收缩空白；“保留”即保留所有空白，包括空格、制表符和回车；“不换行”指当用户强行换行时才换行，否则不会自动换行。 7显示：设置是否显示及如何显示元素。,9.3.3 区块,9.3 CSS样式设置,区块属性,区块属性主要用来定义间距和对齐方式。具体操作步骤及代码如下：,9.3.4 方框 方框属性主要用来定义元素在页面上的位置。 可以控制文本区域的大小、位置、与边界的距离等。,9.3 CSS样式设置,方框属性,方框属性,宽（width），确定盒子本身的宽度，可以使盒子的宽度不依靠它

22、所包含的内容多少。 高（height），确定盒子本身的高度。 浮动（float），设置块元素的浮动效果。 清除（clear），用于清除设置的浮动效果。 边距（margin），控制围绕边框的边距大小。其中包含4个属性：margin-top控制上边距的宽度、margin-right控制右边距的宽度、margin-bottom控制下边距的宽度、margin-left控制左边距的宽度。 边界（padding），确定围绕块元素的空格填充数量，其中包含4个属性：padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-l

23、eft控制左留白的宽度。,1宽和高：设置元素的宽度和高度。宽和高定义的对象多为图片，表格，层等。 2浮动：设置元素的浮动位置。如选择左对齐，则将元素放置到左页面的空白处。 3清除：设置元素的哪一边允许分层。如左对齐：表示不允许分层出现在元素的左侧。 4填充：设置元素内容与元素边框之间的间距。取消选择“全部相同”选项可设置元素各个边填充的具体数值。 5边界：设置元素边界和其他元素间距。,9.3.4 方框,9.3 CSS样式设置,方框属性,方框属性主要用来定义元素在页面上的位置。应用在样式中设置的方框属性后的效果如图所示，可以控制文本区域的大小、位置、与边界的距离等。,边框属性用来设置对象的边框颜

24、色、类型以及粗细。 1样式：设置边框的外观样式。取消选择“全部相同”选项，可分别设置各边框样式。 2宽度：设置元素边框的粗细。 3颜色：设置边框的颜色。,9.3.5 边框,9.3 CSS样式设置,边框属性,CSS样式边框属性,边框属性(续表),边框属性,宽（border-width），控制边框的宽度，其中分为4个属性：border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。 颜色（border-color），设置各边框的颜色。若要使边框的四边显示不同的颜色

25、，可在设置中分别列出。如， p: #ff0000 #009900 #0000ff #55cc00 浏览器将四种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺时针）。 样式（border-style），设定边框的样式，共有无（none）、虚线（dotted）、点划线线（dotted）、点划线（dashed）、实线（solid）、双线（double ）、槽状（grove）、脊状（ridge）、凹陷（inset）和凸起（outset）等9种。,边框实例,边框属性用来定义元素周围的边框，例如边框的宽度、颜色和样式等。应用边框属性样式的表格效果如图所示，表格边框为1像素虚线。,列表属性主要用

26、来定义列表各种属性，如列表项目符号、位置等。,9.3.6 列表 列表属性主要用来定义列表各种属性，如列表项目符号、位置等。,9.3 CSS样式设置,列表属性,类型（list-style-type），确定列表每一项前使用的符号，共有圆点（disc）、圆圈（circle）、方形（square）、数字（decimal）、小写罗马数字（lower-roman ）、大写罗马数字（upper-roman）、小写字母（lower-alpha）和大写字母（upperalpha）等8种。 项目图像（list-style-image），其作用是将列表前面的符号换为图形。 位置（list-style-positio

27、n），用于描述列表位置，有内（outside）和外（inside）两种选择。,1类型：设置项目符号或编号的外观。如可以选择圆点、方块、数字、罗马数字等。 2项目符号图像：可以为项目符号指定图像。 3位置：设置列表项文本是否换行和缩进以及文本是否换行到左边距。有二个选项： “内”：当列表项超出范围后会自动换行，将显示在旁边的空白上，不进行任何缩进。 “外”：当列表项超出范围后会自动换行，以缩进方式显示。,9.3.6 列表,9.3 CSS样式设置,9.3.7 定位 定位属性主要用来定义层的大小、位置、可见性、溢出方式、剪辑等属性。,9.3 CSS样式设置,定位属性,定位属性,类型（position

28、），用于确定定位的类型，共有绝对（absolute）、相对（relative）和静态（static）等3种选择。 Z轴（z-index），用于控制网页中块元素的叠放顺序，可为元素设置重叠效果。该属性的参数值使用纯整数，值为0时，元素在最下层，适用于绝对定位或相对定位的元素。 显示（visibility）使用该属性可将网页中的元素隐藏，共有继承（inherit，继承母体要素的可视性设置）、可见（visible）和隐藏（hidden）等3种选择。 溢出（overflow），在确定了元素的高度和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性其中共有可见（visible，扩大面积以显示所有内

29、容）、隐藏（hidden，隐藏超出范围的内容）、滚动（scroll，在元素的右边显示一个滚动条）和自动（auto，当内容超出元素面积时，显示滚动条）等4种选择。 定位，当为元素确定了绝对定位类型后，该组属性决定元素在网页中的具体位置。该组属性包含4个子属性，分别是左（属性名为left，控制元素左边的起始位置）、上（属性名为top，控制元素上面的起始位置）、 宽或高（与盒子类属性面板中宽或高的属性作用相同）。 剪辑（clip），当元素被指定为绝对定位类型后，该属性可以把元素区域切成各种形状，但目前提供的只有方形一种。属性值为rect(top right bottom left)，即：rect(t

30、op right bottom left)，属性值的单位为任何一种长度单位。,1类型：在下拉列表中选择定位层的方式。 2显示：确定层的初始显示条件。如果不指定可见性属性，则默认情况为显示。 3Z轴：设置Z轴层的堆叠顺序。 3溢位：确定在层的内容超出层的宽度和高度时的处理方式。 4置入：设置层的位置和大小。 5裁切：定义层的可见部分。,9.3.7 定位,9.3 CSS样式设置,定位属性,应用定位属性的层如图所示，“属性检查器”中列出了相应的属性，层宽300像素，高200像素，位置距离页面上边界100像素，距离页面左边界50像素，显示方式为可见。,9.3.8 扩展 可以使用鼠标指针属性（curor

31、）设置鼠标指针的呈现形态和滤镜使用。,9.3 CSS样式设置,1分页：打印时在样式所控制的对象之前或者之后强行分页。 2光标：在下拉列表中，选择光标显示属性设置。当指针位于样式所控制的对象上时光标指针图像会发生改变。光标属性的相关说明见表。,9.3.8 扩展,9.3 CSS样式设置,3CSS滤镜：又称过滤器，可以为网页中的元素添加各种效果。主要滤镜及说明见表,9.3.8 扩展,9.3 CSS样式设置,9.4 CSS样式经典实例,9.4.1 改变鼠标形状 9.4.2 更改超链接的样式 9.4.3 应用CSS滤镜,改变鼠标的形状是应用扩展类别中的光标属性来设置的，操作为： 1新建一个网页插入一幅图

32、像并保存网页。 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样式，在弹出的快捷菜单中选择“套用”命令。

33、在“属性检查器”的“类”的下拉列表中选择“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打开一个带有超链接的网页文档。

34、 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，修饰：无（无下划线）。

35、 a:hover：字体：幼圆，颜色：#FF0000，修饰：下划线。 a:active：字体：华文新魏，样式：倾斜，颜色：#0000CC，修饰：下划线。 7保存并在浏览器中预览网页，效果如图所示。,9.4.2 更改超链接的样式,9.4 CSS样式经典实例,9.4 CSS样式经典实例,Alpha：设置透明层次blur：创建高速度移动效果，即模糊效果Chroma：制作专用颜色透明DropShadow：创建对象的固定影子FlipH：创建水平镜像图片FlipV：创建垂直镜像图片glow：加光辉在附近对象的边外gray：把图片灰度化invert：反色light：创建光源在对象上mask：创建透明掩膜在对象

36、上shadow：创建偏移固定影子wave：波纹效果Xray：使对象变的像被x光照射一样,9.4.3 应用CSS滤镜,效果,（一）模糊效果滤镜（blur） 1新建一个网页并插入两幅相同的图像并保存网页。 2在CSS样式面板中，单击 按钮，打开“新建CSS规则”对话框。如图所示。 3名称中输入“.blur”，“选择器类型”选择“类”，“定义在”选择“仅对该文档”。,9.4.3 应用CSS滤镜,9.4 CSS样式经典实例,4设置完成后，单击“确定”按钮，打开“.blur的CSS规则定义”对话框，切换到“扩展”分类。 5在“滤镜”中选择Blur滤镜，参数设置如下：Blur(Add=true, Dire

37、ction=135,Strength=20)。如图所示,9.4.3 应用CSS滤镜,9.4 CSS样式经典实例,6设置完成后，单击“确定”，创建的CSS样式出现在CSS面板。 7选中文档中的右侧图像，执行以下操作之一： 在CSS面板中，右击.blur样式，在弹出的快捷菜单中选择“套用”命令。 在属性检查器的“类”的下拉列表中选择“blur”。 8保存并在浏览器中预览网页，效果如图所示。,9.4.3 应用CSS滤镜,9.4 CSS样式经典实例,9.4 CSS样式经典实例,补充：怎么使网页全部变成灰色的 1、单个网页变灰，在里加CSS的 style=FILTER: Gray，即： 2、全站所有网页变灰，在css文件里定义如下： bodyfilter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 经过以上两个方法，能马上使网页中的“图片、文字”颜色变黑白模式。如果你的网页前面有W3C声明（ ），需要将body改为html即可：htmlfilter:gray(); 3、对于flash文件，需加如下透明代码： 由于火狐不支持这些滤镜，故以上方法仅在IE中有效。,（二）阴影效果滤镜（shadow） 1新建一个网页并在网页中插入表格输入文本，如图所示，保存文档。 2在CSS样式面板中，单击 按钮，打开“新建C