第 9章 CSS层叠样式表的应用
9.1 关于 CSS样式表
9.2 创建新的 CSS样式
9.3 【 CSS样式 】 面板的使用
9.1 关于 CSS样式表
一、使用 CSS的优点
1,控制页面中的每一个元素（精确定位）。
2,对 HTML语言处理样式的最好补充。
3,把内容和格式处理相分离，减少工作量。
9.1 关于 CSS样式表
二,CSS的类型
自定义 CSS样式
? 自定义 CSS样式（也称为类样式），可以将样式属性设
置为任何文本范围或文本块。
HTML标签样式
? HTML标签样式，用于重新定义特定标签，如 H1的格式。
创建或更改 H1标签的 CSS样式时，所有用 H1标签设置了
格式的文本都立即更新。
CSS选择器样式
? CSS选择器样式重定义特定标签组合的格式（如每当 H2
标题出现在表格单元格内时都应用 td h2）,或重定义包
含特定 id属性的所有标签的格式。
9.1 关于 CSS样式表
三,CSS样式在网页文档中的 3种存在方式
1,外部文件方式
? 外部 CSS样式文件，是一系列存储在一个单独
的外部文件,css文件（并非 HTML文件）中的
CSS样式。
? CSS文件的引用是在 HTML的 <head></head>标
签之间编写下列语句,
<head>
<link rel=”stylesheet” href=”style.css”
type=”text/css” media=”screen”>
</head>
其中的 Style.css文件应为已编好的样式表文件。
9.1 关于 CSS样式表
三,CSS样式在网页文档中的 3种存在方式
2.内部文档头方式
? 内部 （ 或嵌入式 ） CSS样式表, 是一系列包含
在 HTML文档 head部分的 style标签 内的 CSS样式 。
? 将风格直接定义在文档头 <head></head>之间,
如,
<head>
<style type=”text/css”>
<!—
样式表的具体内容
-->
</style>
</head>
9.1 关于 CSS样式表
三,CSS样式在网页文档中的 3种存在
方式
3.直接插入式
? 直接插入式很简单, 只需在每个 HTML标
签后书写 CSS属性即可 。
? 例如：规定一个 Table标志中的字为红
色, 字体大小为 10pt,则可书写如下,
<Table style=”color:red;font-size:10pt”>
9.2 Dreamweaver中创建新的 CSS样式
1,在, 页面属性, 中设置
切换到, 代码, 视图，可以看到对, 页面属性, 进
行的设置，变成了一段 CSS样式代码，嵌在文档头
<head></head>之间
9.2 Dreamweaver中创建新的 CSS样式
2,文本编辑
Dreamweaver MX 2004在属性检查器中
增加了, 样式, 选项，这一选项的功能
是在设计页面时进行添加字体、设置颜
色、大小等样式操作时,,样式, 中套
用样式；
如果套用的 CSS样式不是文字，而是表格，
同样可以在属性面板中设置 CSS。 在属性
面板中都有一个类别（ Class）,在这里
就可以设计表格的 CSS样式。
9.3 【 CSS样式 】 面板的使用
1,CSS样式面板
? 【窗口】｜【 CSS样式】命令
附加样式
新建样式
编辑样式
删除样式
9.3 【 CSS样式 】 面板的使用
3,CSS样式面板
? 【窗口】｜【 CSS样式】命令
? 在,CSS样式”面板的底部有 4个功能按钮，它
们各自的作用是,
【附加样式表】 按钮：可调出, 链接外部样式表, 对
话框，从中选择要 链接到或导入 到当前文档中的 外部
样式表 。
【新建 CSS样式】 按钮：单击后可弹出, 新建 CSS样式,
对话框，使用, 新建 CSS样式, 对话框可以选择要创建
的样式类型。
【 编辑样式表】 按钮：单击后可弹出,CSS样式定义”
对话框。编辑当前文档或外部样式表中的任何样式。
【删除 CSS样式】 按钮：删除, CSS样式, 面板中的所
选样式，并从应用该样式的所有元素中删除样式。
9.3 【 CSS样式 】 面板的使用
9.2.1 创建新的 CSS样式
1,打开, 新建 CSS样式, 对话框
2,定义要创建的 CSS样式的类型
? 创建自定义样式（ Class）
? 重定义标签
? 使用 CSS选择器
, 选择器, 下拉列表中提供的选择器包
括,a,active,a,hover,a,link 和 a,visited。
3,选择定义样式的位置
? 新建样式表文件,用于创建外部样式表。
? 仅对该文档,在当前文档中嵌入样式。
9.3 【 CSS样式 】 面板的使用
9.2.2 编辑 CSS样式
1,定义 CSS样式类型属性
2,定义 CSS样式背景属性
3,定义 CSS样式区块属性
4,定义 CSS样式方框属性
5,定义 CSS样式边框属性
6,定义 CSS样式列表属性
7,定义 CSS样式扩展属性
1,定义 CSS类型属性
使用, CSS样式定义, 对话框中的, 类型, 类
别可以定义 CSS样式的基本字体和类型设置。
2,定义 CSS样式背景属性
使用, CSS样式定义, 对话框中的, 背景, 类
型，可以定义 CSS样式的背景设置。可以网页
中的任何元素应用背景属性。
3,定义 CSS样式区块属性
使用, CSS样式定义, 对话框中的, 区块, 类
别, 可以定义标签和属性的间距和对齐设置 。
4,定义 CSS样式方框属性
使用, CSS样式定义, 对话框中的, 方框, 类
别可以为控制元素在页面上的放置方式的标
签和属性定义设置 。
5,定义 CSS样式边框属性
使用, CSS样式定义, 对话框中的, 边框, 类
别可以定义元素周围的边框的设置 （ 如宽度,
颜色和样式 ） 。
6,定义 CSS样式列表属性
使用, CSS样式定义, 对话框中的, 列表, 类
别可以为列表标签定义列表设置 （ 如项目符
号大小和类型 ） 。
7,定义 CSS样式定位属性
,定位, 样式属性使用, 层, 首选参数中定
义层的默认标签, 将标签或所选文本块更改
为新层 。
8,定义 CSS样式扩展属性
,扩展, 样式属性包括过滤器, 分页和指针
选项, 它们中的大部分不受任何浏览器的支
持, 或者仅受 Internet Explorer 4.0和更
高版本的支持 。
8,定义 CSS样式扩展属性
1) Alpha滤镜：设置透明度 。 其参数格式是,
Alpha(Opacity=?,Finishopacity=?,
Style=?,StartX=?,StartY=?,
FinishX=?,FinishY=?)
8,定义 CSS样式扩展属性
2) BlendTrans滤镜：设置淡入 /淡出效果 。 其参
数格式是,
BlendTrans (Duration=?)
其中, Duration表示淡入 /淡出的时间 。
3) Blur滤镜：设置 3D效果 。 其参数格式是,
Blur (Add=?,Direction=?,Strength=?)
4) Chroma滤镜：设置透明色 。 其参数格式是
Chroma (Color=?)
其中, Color是要设置为透明的颜色 。
8,定义 CSS样式扩展属性
5) DropShadow滤镜：设置文本或图像的阴影
效果, 应用在文本上时, 其效果更加明显 。
其参数格式是,
DropShadow (Color=?,OffX=?,OffY=?,
Positive=?)
6) FlipH滤镜：将元素水平反转 。
7) FlipV滤镜：将元素垂直反转 。
8) Glow滤镜：设置发光效果, 其参数格式是,
Glow (Color=?,Strength=?)
8,定义 CSS样式扩展属性
9) Gray滤镜：将图像设置为黑白效果 。
10) Invert滤镜：将图像设置为底片效果 。
11) Light滤镜：设置物体的投影 。
12) Mask滤镜：设置透明遮罩, 其参数格式
是,
Mask (Color=?)
其中, Color表示设置底色, 让对象遮住底色
的部分透明 。
8,定义 CSS样式扩展属性
13) RevealTrans滤镜：设置页面切换时的过渡效
果, 其参数格式是,
RevealTrans (Duration=?,Transition=?)
14) Shadow滤镜：设置阴影效果, 其参数格式是,
Shadow (Color=?,Direction=?)
15) Wave滤镜：设置波纹效果, 其参数格式是,
Wave (Add=?,Freq=?,LightStrength=?,
Phase=?,Strength=?)
16) Xray滤镜：设置 X光效果,。
