我们上网的人都有这样的经验,将浏览器
的显示字体变大或变小,网页中的文本也
会随着发生改变。实际上好的网页却不
会发生这种现象，无论我们怎样改变浏
览器的显示字体大小，网页中的文本保
持着原有外观,这就是 CSS样式的作用 。
有了 CSS样式，我们可以快速准确保页
面的布局与外观在各种浏览器中保持一
致。
主要内容：
一、什么是 CSS样式？
二,CSS的语法
三、放置 CSS代码
四,CSS样式面板
五,CSS的属性
六、使用 Dreamweaver 创建 CSS实例
七、本节小结
什么是 CSS样式？
CSS是, Cascading Style Sheet”的缩写，
有些书上把它翻译成, 层叠样式表,
或, 级联样式表, （简称为 样式表 ），
它实质上是对 HTML标记制定的一个
统一的标准、控制文本或文本区外观
的一组属性。换句话说,CSS样式表
是一个格式设置的集合，用来控制网
页中各种元素的显示效果。使用 CSS
样式表，用户可以有更大的灵活性来
控制精确的页面显示效果。
样式表有自己独特的书写方法，它们一般被定义成以
下形式的语法：
? HTML标记（或标签），如 P,Body,Div,Table等。
（特别提示：在这里使用 HTML标记时，是不带尖括
号的，所以不能写成,<P>,<Body>,<Div>、
<Table>等。）
? 标记属性、属性值
这两个参数是一一对应的，每个属性与属性值之间用
分号, ；, 分开。
HTML标记 {标记属性,属性值 ;标记属性,属性值 ;
标记属性,属性值 ;标记属性,属性值 ;,...}。
CSS的语法
注意在 CSS中属性名称的写法：
凡属性名由两个或两个以上的单词构成
时，单词之间用, -”号隔开，例如，背景
颜色属性应书写为,background-color,
字体大小,font-size,文字下划线,text-
decoration,等。（而在脚本语言中的书
写规定是第二个或第二个以上的单词用
连写且第一个字母大写来表示：例如
backgroundColor,fontSize，
textDecoration等。） 请注意区别！
下面是一段比较典型的 CSS代码：
p{font-family:“宋体, ; font-size:9pt; line-
height:12pt; color:#000000}
td{font-family:“楷体＿ GB2312”; font-size:20pt;
font-style:italic;font-weight:800; text-
decoration:blink;color:#000000}
a:hover{background-color:#ffccff;color:#ff6666;
text-decoration:underline; float:left}
a:link{color:#ff33ff; text-decoration:none}
a:visited{color:#6600ff; text-decoration:none}
a:active{color:green; text-decoration:none;
background-color:#ffccff; float:right}
这段代码共有 6段，分别实现 两种功能,
? 前两行的格式分别为 p{…… }和 td{…… }，作
用是对网页中文字的字体、大小、颜色等进行
设置。
? 后 4行均是 a:命令词 {…… }的格式，是对超级
链接文本的控制。
下面分别解释这 6段 CSS代码：
1）、第一段 p{…… }中的 【 font-family:“宋
体, 】,指定网页文字的字体。 【 font-
size:9pt 】,指定网页文字的字号的大小,pt是
表示文字大小的单位。
【 line-height:12pt 】,指定行与行的垂直距离，
即行高。 【 color:#000000 】,指定网页的颜
色,#000000代表黑色，为十六进制数。
第二段 td{…… }中的设置是对网页表格里的文
字进行控制。
2）、链接文本的变化控制（例中的后 4行）
第三段,a:hover{background-color,#ffccff;
color:#ff6666; text-decoration:underline;
float:left}（ hover表示鼠标指针指向链接文
字时，链接文字的背景颜色为 #ffccff，前景
颜色为 #ff6666，链接显示下划线，文字向
左浮动）。
第四段,a:link{color:#ff33ff; text-decoration,
none }（ link表示链接未被访问时，链接颜色
为 #ff33ff，链接无下划线）。
第五段,a:visited{color:#6600ff; text-
decoration:none}（ visited表示链接被访问后，
链接的颜色为 #6600ff，链接无下划线）。
第六段,a:active{color:green; text-
decoration:none; background-color:#ffccff;
float:right}（ active表示鼠标点击链接时，链
接前景颜色为绿色，背景色为 #ffcc99，链接
无下划线，文字向右浮动）。
放置 CSS代码
CSS样式代码写好后，它在 HTML中以 style
标记出现，它将如何放到 HTML中呢？
将 CSS样式放入 HTML中有 2种方法：
1）、外部文件方式 ----将 CSS代码写成一个
扩展名为,,css”的文件（可以用任何一个
文本编辑器中写，也可以用软件创建），
在 HTML文档中加以引用，进行网页整
体风格的控制。
提示,使用 CSS外部文件的优点，可以在
每个 HTML文件中引用它，从而使整个
网页的风格能够保持一致。
2）、内部文档头方式 ----将 CSS样式直接定义
在一个文件的 <head>和 </head>标记之间，
其产生的范围只局限于此 HTML文件。
提示,这种方式的主要用处是，在网页整体
风格已经统一的前提下，可针对具体页面
进行调整。
可见，各种放设置 CSS代码的方式各有用途，
在统一整个站点的风格时，用第一种方式。
在确定某个页面风格时，用第二种方式。
综上所述,CSS语法是比较复杂的，如果
大家对 HTML标记语言不熟练，用代码就
显得非常困难。怎么办？
Dreamweaver系统为我们提供了对 CSS样式
表的完美支持，我们不必深入了解 CSS源
代码，通过使用 Dreamweaver中的 CSS样
式编辑器，就可以轻松地创建出绝对符合
专业标准的 CSS样式。
对同学们的要求：熟练掌握 Dreamweaver工
具创建不同的 CSS样式。
CSS样式面板
1,CSS样式面板的作用：
使用 CSS样式面板可以创建 CSS样式、
查看 CSS样式的属性或将 CSS样式应用
到网页文档中的元素上。
2、如何打开 CSS样式面板？
操作方法：选择设计面板中的 【 CSS样式 】
命令，可以打开 CSS样式面板，如下图
所示：
面板列表窗口
显示 CSS样式名称
将样式
应用到
文档中
附加样
式表 新建样
式表
编辑样
式表
删除样
式表
面板中的菜单
操作按钮
单击新建 CSS
样式按钮，可
以打开 【 新建
样式 】 对话框，
如下图所示：
在上图所示对话框中，显示了 Dreamweaver中
可以运用的样式共分为 3大类：
【 创建自定义样式（ class） 】,与文本处理程
序（如 Word等）中应用样式类似，用户可以
自己定义样式应用于文档的文本中。
【 重新定义 HTML标记 】,它可以对某一具
体的标记进行重新定义。例如 H1，当用户
创建或修改 H1标记的 CSS样式时，所有用
H1标记进行格式化的文本都将立即更换。
【 使用 CSS选择器 】,会对某一具体的标记
组合（例如 a:link,a:visited,a:hover、
a:active表示只要在网页中使用了超级链接
就应用该样式）应用样式。
CSS的属性
CSS属性有很多种分类，我们以 Dreamweaver
MX中对 CSS属性的分类为准，来学习 CSS
各类属性的作用。
CSS属性在 Dreamweaver MX中被分为 8大类：
类型、背景、区块、盒子、边框、列表、
定位、扩展。
进入 Dreamweaver MX，打开定义样式对话框，
分别解释 8大类的属性。
一、类型属性
该类属性主要是用于定义网页中文本的字体、
颜色及字体风格等。 （包含 9种 CSS属性）
二、背景属性
该类属性主要是在网页的元素后面加入固定
的背景色或图象。（包含 6种 CSS属性）
三、区块属性
该类属性主要是控制网页块中内容的间距、
对齐方式、文字缩进等。（这里指的块，我
们可以理解为段落，它包含 6种 CSS属性）
四、盒子（框盒）属性
该类属性主要是用于将网页中的块元素
都看作是包在一个盒子中。 （包含 6种
CSS属性）
五、边框属性
该类属性主要针对盒子边框的。（包含 3
种 CSS属性）
六、列表属性
该类属性主要是控制列表的各元素的。
（包含 3种 CSS属性）
七、定位属性
该类属性主要用于精确地控制网页中元
素（主要针对层）的位置。（包含 6种
CSS属性）
八、扩展属性
该类属性包含两部分：
1、分页：其作用是为打印的页面设置分页
符。
2、视觉效果：其作用是为网页中的元素施
加特殊效果。是什么呢?----就是滤镜,
CSS的另一类属性 ----滤镜属性
滤镜可以为网页中的元素施加各种奇妙的滤镜
效果,Dreamweaver系统提供了 15种滤镜：
1）,Alpha滤镜
作用：让对象呈现半透明的效果，其各项参数及
功能如下：
Opacity:设置图片的不透明度，单位为, 百分
比,,值从 0~100,0表示完全透明,100表示
完全不透明。
FinishOpacity:这是一个同 Opacity一起使用的选择
性参数，当同时设定这两个参数时，可以制作
出透明渐进的效果。值从 0~100,0表示完全透
明,100表示完全不透明。
Style:当制作透明渐进效果时，用它来指定渐
进的显示形状。数值 0：没有渐进； 1：直
线渐进； 2：圆形渐进； 3：矩形辐射。
StartX(Y)渐进开始的 X（ Y）坐标值。
FinishX(Y)渐进结束的 X（ Y）坐标值。
2）,Blur滤镜
作用：让对象产生风吹模糊的效果，其各项
参数及功能如下：
Add:是否使 Blur滤镜起作用，值为 0（或为
false）表示 Blur滤镜不起作用，值为 1（或
为 true）表示 Blur滤镜起作用。
Direction:设置模糊方向，取值范围,0~360
度,45度一个间隔，实际是八个方向。
Strength：指定模糊的半径大小，单位是像
素，默认值是 5，取值范围为自然数。
3）,Chroma滤镜
作用：把图片中的某个颜色变成透明的,使
用了该滤镜后,原图片中的一部分颜色就
好像没有了一样。它只有一个参数：
Color:用来指定透明的颜色，即不显示出来
的颜色。
4）,Dropshadow滤镜
作用：让 HTML对象产生下落式的阴影，常
用在文字或图象上。参数为：
Color:指定阴影的颜色。
OffX:指定阴影相对于对象在水平方向偏移量。
参数值正（负）数表示阴影在对象的右
（左）方。
OffY:指定阴影相对于对象在垂直方向偏移量。
参数值正（负）数表示阴影在对象的上
（下）方。
Positive:指定阴影的透明程度。 0表示透明，
没有阴影效果。非 0表示显示阴影的效果。
5）,FlipH和 FlipV滤镜
作用：可使网页中的对象产生水平和垂直
翻转的效果，这两个滤镜均没有参数设
置，可以直接使用。
6）,Glow滤镜
作用：可让 HTML对象的外轮廓上产生一
种光晕效果。参数为：
Color:指定晕开阴影的颜色。
Strength:指定晕开阴影的范围，设定值从
0~255，数字越大晕开阴影范围越大，反
之越小。
7）,Gray滤镜
作用：可将一个彩色图片变为灰色调的效
果，该滤镜也没有参数，可以直接使用。
8）,Invert滤镜
作用：可以使图象产生照片底片的效果，
一般适用于图象对象。
9）,Light滤镜
作用：可以使 HTML对象产生一种模拟光
源的投射效果。
10）,Mask滤镜
作用：可以为对象建立一个覆盖于表面的膜，其效
果是盖住对象，被盖住的对象不显示，一般适用
于图象对象。其参数为：
Color:遮罩的颜色。
11）,Shadow滤镜
作用,Shadow滤镜与 Dropshadow滤镜非常相似，
也是使网页中的对象产生下落式的阴影效果。两
者不同之处的是 Dropshadow没有渐进感，而
Shadow有渐进的阴影感，感觉上更真实一些。
12）,Xray滤镜
作用,会显示图片的轮廓，就像 X光的照片一样，
该滤镜没有参数设定。
13）,Wave滤镜
作用：可以使网页中的对象在垂直方向上产
生波浪的变形效果，其参数为：
Add:表示是否使用该滤镜,0表示, 否,,非
0表示, 是, 。
Freq:设置波动的数量，选择自然数。
LightStrength:设置波浪效果的光照强度，数
值从 0~100,0表示最弱,100表示最强。
Phase:波浪起始相位。从 0~100的百分数值，
例如,25相当于 90°,而 50相当于 180° 。
Strength:设置波浪摇摆的幅度，取值是自然数。
可以被 CSS滤镜应用的 HTML标记
并不是所有的 HTML标记都可以施加 CSS滤
镜，可以 可以被 CSS滤镜应用的部分 HTML标
记有以下标记：
Body(网页主体 ) TD(一个单元格 )
Button(HTML按钮 ) TR(表格的一行 )
Div(图层 ) Table(整个表格 )
Img或 Image(图象 ) Marquee(滚动的走马灯 )
使用 Dreamweaver 创建 CSS的实例
用实际例字来演示如何使用 Dreamweaver
MX 工具创建各种 CSS样式，以实现网
页的奇特的显示效果。
例 1、为图象设置风吹过似的 CSS样式。
例 2、设置链接文本的 4种状态。
例 3、使用 CSS滤镜为网页设置渐变效果。
本节主要介绍了 CSS样式表的语法、属
性,CSS样式编辑器的应用，以及 CSS
在网页制作中的作用。
重点要求熟练掌握 DreamweaverMX工
具来创建各种需求的 CSS样式。
的显示字体变大或变小,网页中的文本也
会随着发生改变。实际上好的网页却不
会发生这种现象，无论我们怎样改变浏
览器的显示字体大小，网页中的文本保
持着原有外观,这就是 CSS样式的作用 。
有了 CSS样式，我们可以快速准确保页
面的布局与外观在各种浏览器中保持一
致。
主要内容：
一、什么是 CSS样式？
二,CSS的语法
三、放置 CSS代码
四,CSS样式面板
五,CSS的属性
六、使用 Dreamweaver 创建 CSS实例
七、本节小结
什么是 CSS样式？
CSS是, Cascading Style Sheet”的缩写，
有些书上把它翻译成, 层叠样式表,
或, 级联样式表, （简称为 样式表 ），
它实质上是对 HTML标记制定的一个
统一的标准、控制文本或文本区外观
的一组属性。换句话说,CSS样式表
是一个格式设置的集合，用来控制网
页中各种元素的显示效果。使用 CSS
样式表，用户可以有更大的灵活性来
控制精确的页面显示效果。
样式表有自己独特的书写方法，它们一般被定义成以
下形式的语法：
? HTML标记（或标签），如 P,Body,Div,Table等。
（特别提示：在这里使用 HTML标记时，是不带尖括
号的，所以不能写成,<P>,<Body>,<Div>、
<Table>等。）
? 标记属性、属性值
这两个参数是一一对应的，每个属性与属性值之间用
分号, ；, 分开。
HTML标记 {标记属性,属性值 ;标记属性,属性值 ;
标记属性,属性值 ;标记属性,属性值 ;,...}。
CSS的语法
注意在 CSS中属性名称的写法：
凡属性名由两个或两个以上的单词构成
时，单词之间用, -”号隔开，例如，背景
颜色属性应书写为,background-color,
字体大小,font-size,文字下划线,text-
decoration,等。（而在脚本语言中的书
写规定是第二个或第二个以上的单词用
连写且第一个字母大写来表示：例如
backgroundColor,fontSize，
textDecoration等。） 请注意区别！
下面是一段比较典型的 CSS代码：
p{font-family:“宋体, ; font-size:9pt; line-
height:12pt; color:#000000}
td{font-family:“楷体＿ GB2312”; font-size:20pt;
font-style:italic;font-weight:800; text-
decoration:blink;color:#000000}
a:hover{background-color:#ffccff;color:#ff6666;
text-decoration:underline; float:left}
a:link{color:#ff33ff; text-decoration:none}
a:visited{color:#6600ff; text-decoration:none}
a:active{color:green; text-decoration:none;
background-color:#ffccff; float:right}
这段代码共有 6段，分别实现 两种功能,
? 前两行的格式分别为 p{…… }和 td{…… }，作
用是对网页中文字的字体、大小、颜色等进行
设置。
? 后 4行均是 a:命令词 {…… }的格式，是对超级
链接文本的控制。
下面分别解释这 6段 CSS代码：
1）、第一段 p{…… }中的 【 font-family:“宋
体, 】,指定网页文字的字体。 【 font-
size:9pt 】,指定网页文字的字号的大小,pt是
表示文字大小的单位。
【 line-height:12pt 】,指定行与行的垂直距离，
即行高。 【 color:#000000 】,指定网页的颜
色,#000000代表黑色，为十六进制数。
第二段 td{…… }中的设置是对网页表格里的文
字进行控制。
2）、链接文本的变化控制（例中的后 4行）
第三段,a:hover{background-color,#ffccff;
color:#ff6666; text-decoration:underline;
float:left}（ hover表示鼠标指针指向链接文
字时，链接文字的背景颜色为 #ffccff，前景
颜色为 #ff6666，链接显示下划线，文字向
左浮动）。
第四段,a:link{color:#ff33ff; text-decoration,
none }（ link表示链接未被访问时，链接颜色
为 #ff33ff，链接无下划线）。
第五段,a:visited{color:#6600ff; text-
decoration:none}（ visited表示链接被访问后，
链接的颜色为 #6600ff，链接无下划线）。
第六段,a:active{color:green; text-
decoration:none; background-color:#ffccff;
float:right}（ active表示鼠标点击链接时，链
接前景颜色为绿色，背景色为 #ffcc99，链接
无下划线，文字向右浮动）。
放置 CSS代码
CSS样式代码写好后，它在 HTML中以 style
标记出现，它将如何放到 HTML中呢？
将 CSS样式放入 HTML中有 2种方法：
1）、外部文件方式 ----将 CSS代码写成一个
扩展名为,,css”的文件（可以用任何一个
文本编辑器中写，也可以用软件创建），
在 HTML文档中加以引用，进行网页整
体风格的控制。
提示,使用 CSS外部文件的优点，可以在
每个 HTML文件中引用它，从而使整个
网页的风格能够保持一致。
2）、内部文档头方式 ----将 CSS样式直接定义
在一个文件的 <head>和 </head>标记之间，
其产生的范围只局限于此 HTML文件。
提示,这种方式的主要用处是，在网页整体
风格已经统一的前提下，可针对具体页面
进行调整。
可见，各种放设置 CSS代码的方式各有用途，
在统一整个站点的风格时，用第一种方式。
在确定某个页面风格时，用第二种方式。
综上所述,CSS语法是比较复杂的，如果
大家对 HTML标记语言不熟练，用代码就
显得非常困难。怎么办？
Dreamweaver系统为我们提供了对 CSS样式
表的完美支持，我们不必深入了解 CSS源
代码，通过使用 Dreamweaver中的 CSS样
式编辑器，就可以轻松地创建出绝对符合
专业标准的 CSS样式。
对同学们的要求：熟练掌握 Dreamweaver工
具创建不同的 CSS样式。
CSS样式面板
1,CSS样式面板的作用：
使用 CSS样式面板可以创建 CSS样式、
查看 CSS样式的属性或将 CSS样式应用
到网页文档中的元素上。
2、如何打开 CSS样式面板？
操作方法：选择设计面板中的 【 CSS样式 】
命令，可以打开 CSS样式面板，如下图
所示：
面板列表窗口
显示 CSS样式名称
将样式
应用到
文档中
附加样
式表 新建样
式表
编辑样
式表
删除样
式表
面板中的菜单
操作按钮
单击新建 CSS
样式按钮，可
以打开 【 新建
样式 】 对话框，
如下图所示：
在上图所示对话框中，显示了 Dreamweaver中
可以运用的样式共分为 3大类：
【 创建自定义样式（ class） 】,与文本处理程
序（如 Word等）中应用样式类似，用户可以
自己定义样式应用于文档的文本中。
【 重新定义 HTML标记 】,它可以对某一具
体的标记进行重新定义。例如 H1，当用户
创建或修改 H1标记的 CSS样式时，所有用
H1标记进行格式化的文本都将立即更换。
【 使用 CSS选择器 】,会对某一具体的标记
组合（例如 a:link,a:visited,a:hover、
a:active表示只要在网页中使用了超级链接
就应用该样式）应用样式。
CSS的属性
CSS属性有很多种分类，我们以 Dreamweaver
MX中对 CSS属性的分类为准，来学习 CSS
各类属性的作用。
CSS属性在 Dreamweaver MX中被分为 8大类：
类型、背景、区块、盒子、边框、列表、
定位、扩展。
进入 Dreamweaver MX，打开定义样式对话框，
分别解释 8大类的属性。
一、类型属性
该类属性主要是用于定义网页中文本的字体、
颜色及字体风格等。 （包含 9种 CSS属性）
二、背景属性
该类属性主要是在网页的元素后面加入固定
的背景色或图象。（包含 6种 CSS属性）
三、区块属性
该类属性主要是控制网页块中内容的间距、
对齐方式、文字缩进等。（这里指的块，我
们可以理解为段落，它包含 6种 CSS属性）
四、盒子（框盒）属性
该类属性主要是用于将网页中的块元素
都看作是包在一个盒子中。 （包含 6种
CSS属性）
五、边框属性
该类属性主要针对盒子边框的。（包含 3
种 CSS属性）
六、列表属性
该类属性主要是控制列表的各元素的。
（包含 3种 CSS属性）
七、定位属性
该类属性主要用于精确地控制网页中元
素（主要针对层）的位置。（包含 6种
CSS属性）
八、扩展属性
该类属性包含两部分：
1、分页：其作用是为打印的页面设置分页
符。
2、视觉效果：其作用是为网页中的元素施
加特殊效果。是什么呢?----就是滤镜,
CSS的另一类属性 ----滤镜属性
滤镜可以为网页中的元素施加各种奇妙的滤镜
效果,Dreamweaver系统提供了 15种滤镜：
1）,Alpha滤镜
作用：让对象呈现半透明的效果，其各项参数及
功能如下：
Opacity:设置图片的不透明度，单位为, 百分
比,,值从 0~100,0表示完全透明,100表示
完全不透明。
FinishOpacity:这是一个同 Opacity一起使用的选择
性参数，当同时设定这两个参数时，可以制作
出透明渐进的效果。值从 0~100,0表示完全透
明,100表示完全不透明。
Style:当制作透明渐进效果时，用它来指定渐
进的显示形状。数值 0：没有渐进； 1：直
线渐进； 2：圆形渐进； 3：矩形辐射。
StartX(Y)渐进开始的 X（ Y）坐标值。
FinishX(Y)渐进结束的 X（ Y）坐标值。
2）,Blur滤镜
作用：让对象产生风吹模糊的效果，其各项
参数及功能如下：
Add:是否使 Blur滤镜起作用，值为 0（或为
false）表示 Blur滤镜不起作用，值为 1（或
为 true）表示 Blur滤镜起作用。
Direction:设置模糊方向，取值范围,0~360
度,45度一个间隔，实际是八个方向。
Strength：指定模糊的半径大小，单位是像
素，默认值是 5，取值范围为自然数。
3）,Chroma滤镜
作用：把图片中的某个颜色变成透明的,使
用了该滤镜后,原图片中的一部分颜色就
好像没有了一样。它只有一个参数：
Color:用来指定透明的颜色，即不显示出来
的颜色。
4）,Dropshadow滤镜
作用：让 HTML对象产生下落式的阴影，常
用在文字或图象上。参数为：
Color:指定阴影的颜色。
OffX:指定阴影相对于对象在水平方向偏移量。
参数值正（负）数表示阴影在对象的右
（左）方。
OffY:指定阴影相对于对象在垂直方向偏移量。
参数值正（负）数表示阴影在对象的上
（下）方。
Positive:指定阴影的透明程度。 0表示透明，
没有阴影效果。非 0表示显示阴影的效果。
5）,FlipH和 FlipV滤镜
作用：可使网页中的对象产生水平和垂直
翻转的效果，这两个滤镜均没有参数设
置，可以直接使用。
6）,Glow滤镜
作用：可让 HTML对象的外轮廓上产生一
种光晕效果。参数为：
Color:指定晕开阴影的颜色。
Strength:指定晕开阴影的范围，设定值从
0~255，数字越大晕开阴影范围越大，反
之越小。
7）,Gray滤镜
作用：可将一个彩色图片变为灰色调的效
果，该滤镜也没有参数，可以直接使用。
8）,Invert滤镜
作用：可以使图象产生照片底片的效果，
一般适用于图象对象。
9）,Light滤镜
作用：可以使 HTML对象产生一种模拟光
源的投射效果。
10）,Mask滤镜
作用：可以为对象建立一个覆盖于表面的膜，其效
果是盖住对象，被盖住的对象不显示，一般适用
于图象对象。其参数为：
Color:遮罩的颜色。
11）,Shadow滤镜
作用,Shadow滤镜与 Dropshadow滤镜非常相似，
也是使网页中的对象产生下落式的阴影效果。两
者不同之处的是 Dropshadow没有渐进感，而
Shadow有渐进的阴影感，感觉上更真实一些。
12）,Xray滤镜
作用,会显示图片的轮廓，就像 X光的照片一样，
该滤镜没有参数设定。
13）,Wave滤镜
作用：可以使网页中的对象在垂直方向上产
生波浪的变形效果，其参数为：
Add:表示是否使用该滤镜,0表示, 否,,非
0表示, 是, 。
Freq:设置波动的数量，选择自然数。
LightStrength:设置波浪效果的光照强度，数
值从 0~100,0表示最弱,100表示最强。
Phase:波浪起始相位。从 0~100的百分数值，
例如,25相当于 90°,而 50相当于 180° 。
Strength:设置波浪摇摆的幅度，取值是自然数。
可以被 CSS滤镜应用的 HTML标记
并不是所有的 HTML标记都可以施加 CSS滤
镜，可以 可以被 CSS滤镜应用的部分 HTML标
记有以下标记：
Body(网页主体 ) TD(一个单元格 )
Button(HTML按钮 ) TR(表格的一行 )
Div(图层 ) Table(整个表格 )
Img或 Image(图象 ) Marquee(滚动的走马灯 )
使用 Dreamweaver 创建 CSS的实例
用实际例字来演示如何使用 Dreamweaver
MX 工具创建各种 CSS样式，以实现网
页的奇特的显示效果。
例 1、为图象设置风吹过似的 CSS样式。
例 2、设置链接文本的 4种状态。
例 3、使用 CSS滤镜为网页设置渐变效果。
本节主要介绍了 CSS样式表的语法、属
性,CSS样式编辑器的应用，以及 CSS
在网页制作中的作用。
重点要求熟练掌握 DreamweaverMX工
具来创建各种需求的 CSS样式。
