Get documents about "ç¬¬ä¸€ç« CSS层å æ ·å¼è¡¨ï¼ˆåŸºç¡€ç¯‡ï¼‰
Document Sample
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
第一章 CSS 层叠样式表（基础篇）
，就是“层叠样式表”。将 CSS 引入到网页中是网页编辑的一大革命吧~通过设
置 CSS，我们可以随意地控制网页中字体的大小、颜色等，便于统一网站的整体
风格； 可以方便地为网页中的各个元素设置背景颜色和图片并进行精确的定位控
制；可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊等只有
在图象处理软件中才能实现的效果；可以与脚本语言相结核，在网页中实现很多
动态滤镜效果。
下面我们就来详细说明 CSS 的语法和在网页中的编辑。由于这篇内容较多，就分
为两篇讲解。
本篇的主要内容是：
CSS 的语法
如何将 CSS 添加到页面中
用 DW 的 CSS 编辑器编辑 css 文件
CSS 的语法
在使用 CSS 前，我们先要对 CSS 的基本语法有所了解。
如果你安装了 Frontpage，不妨用*.css 搜索一下你的硬盘，你会找到很多 CSS
文件。这都是 FP 自带的模板的 CSS。你可以打开其中一个研究一下~用 DW 和 FP
都能打开 css 文件，当然最简单的还是用记事本打开。
下面我们来看一段 CSS 代码：
p { font-family: "宋体"; font-size: 12px; line-height: 12pt; color:
#000000}
td { font-family: "宋体"; font-size: 12px; color: #000000}
a:link { color: #0000FF; text-decoration: none}
a:visited { color: #666666; text-decoration: none}
a:active {color:green;text-decoration: none;}
a:hover { color: #FF0000;background-color:#ff9900;text-decoration:
underline }
第一行和第二行的 p、td 标签，分别定义了网页中文字和表格中文字的字体、
大小和颜色。由于网页中的文字基本上都放置在表格中， 所以需要定义表格中的
文字属性。
font-family: "宋体" ——指定网页中的字体。
font-size: 12px——制定字体的大小。可以用 12px 或者是 9pt。这两种字体大
小在 800 和 1024 的分辨率下都比较好看。
line-height: 12pt——行与行之间的距离。
color: #000000——字体的颜色。 #000000 表示的是黑色。在网页编辑中，颜
色是用十六进制数来表示的。 你也可以用颜色的英文名称来表示，如红色的代码
写成#ff0000，也可以写成 red。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
第三行——第六行的 a 标签，指定的是链接文本的变化控制。
link 表示超链接的文本在链接未被访问时的颜色， 代码中指定颜色为 0000ff 蓝 （
色）。visited 表示链接被访问过后的颜色为灰色（#666666）。active 表示鼠
标点击链接时链接的文本颜色为绿色。hover 表示鼠标指向链接但未点击时的链
接颜色为红色，背景颜色为橙色。
text-decoration:none 表示链接文本没有下划线。text-decoration: underline
则表示链接文本有下划线。
请大家仔细看这段代码，在下面的教程中，我们都将以这段代码作为例子。
如何将 CSS 添加到页面中
在讲解如何编辑 CSS 前， 我们先来说一下怎么把 CSS 添加到页面中，即怎么才能
让编辑好的 CSS 对页面元素起作用呢？
一般来说，有两种方法。
一种方法是直接把 CSS 代码粘贴到 html 中。比如我们把下面一段代码粘贴入
HTML 代码的<head></head>之间就可以了。
<STYLE type="text/css">
<!--
p { font-family: "宋体"; font-size: 12px; line-height: 12pt; color:
#000000}
td { font-family: "宋体"; font-size: 12px; color: #000000}
a:link { color: #0000FF; text-decoration: none}
a:visited { color: #666666; text-decoration: none}
a:active {color:green;text-decoration: none;}
a:hover { color: #FF0000;background-color:#ff9900;text-decoration:
underline }
-->
</style>
不过这样做，我们只是定义了这个页面的 CSS。如果一个网站有很多页面的话，
一个一个页面粘贴代码是不大可能的。所以我还是建议大家用第二种办法~
第二种办法就是将 css 代码生成一个*.css 的文件，然后将这个文件链接到所需
的页面上。 这样做一个很大的好处就是，你可以把网站上所有页面都链接到一个
css 文件，一旦这个 css 文件修改，那么所有的页面风格也随之改变。这就是 css
的好处之一。
在 DW 里，链接 CSS 文件的方法是这样的：点击 CSS 样式窗口右下角的“编辑样
式表”，就可以打开“编辑样式表”窗口，在此窗口单击“链接”，在弹出的链
接中“浏览”，选择已经编辑好的 CSS 文件就可以了。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
【图 5.1】
如果你使用 FP 来做主页，那么也可以使用类似的方法链接 CSS 文件。点击“格
式”菜单栏， 有一个“样式表链接”选项。 选择“添加”，就可以选择 CSS 文件。
【图 5.2】
注意：以下这个问题是在用 FP 时很容易遇到的！有时候你会发现 css 无论如何
也不会对网页字体起作用。你仔细检查代码，没发现有错啊！怎么回事？问题就
出在，FP 中有一个对字体进行设置的选项，有普通，1（8 磅），2（10 磅）„„
等可选项。如果使用了 css，切记把这里的选项选为“普通”。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
用 DW 的 CSS 编辑器编辑 css 文件
讲了那么多，大家应该已经初步了解了 css 的基本代码吧。在 Dreamweaver 里，
有非常方便的 CSS 编辑器，即使你对 CSS 代码不是很熟悉，也能编辑出 css。
在 css 样式编辑器中点击右下角的“新建样式”按钮，弹出“新建样式对话
框”。按图中的设置选择相应的选项，最后“确定”，就会弹出一个对话框，让
你定义新建的 CSS 文件的文件名和存放位置。
【图 5.3】
设置完成后再点击 CSS 样式编辑器的“编辑样式表”按钮， 就可以看到以下的对
话框，1.css 就是我们刚才创建的一个新的 css 文件。这个文件现在还没有内容。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
【图 5.4】
从最开始我们研究的 css 代码中我们已经知道，我们常用的要重新定义的 css
标签是 p、td 和 a。在上面的对话框中选择“新建”。以下的设置就是重新定义
p 标签，请注意图中的选项设置。
【图 5.5】
单击确定，我们就打开了 css 编辑器。这里才是真正的 DW 的 css 编辑器：）
以下这个对话框中的设置就是对 p 标签的设置。通过这个设置，我们定义了网页
中文字的字体、大小、颜色和行高。（td 标签也是用同样的方法设置。也就是
在上面“新建样式”的对话框中将标签改为 td 就可以了。）重新提一下，p 标
签是指对网页中元素的设置，td 标签是指对表格中元素的设置。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
【图 5.6】
好了，接下来是很重要的部分，就是如何对超链接风格进行设置。
在“新建样式”对话框中选择 “使用 css 选择器”，我们可以看到标签里出现
四个选择项。
【图 5.7】
a:active 表示鼠标点击链接时链接风格；
a:hover 表示鼠标指向链接但未点击时的链接风格；
a: link 表示超链接的文本在链接未被访问时的风格；
a:visited 表示链接被访问过后的风格。
链接的风格包括链接文字的颜色、大小、背景颜色等等。四个标签的设置方法完
全相同，我们选择其中一个做说明。比如 hover 标签定义的链接风格是：链接颜
色为红色，背景颜色为橙色。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
【图 5.8】
【图 5.9】
好了，这章就先讲到这里吧，已经太长了„„
大家可能注意到我没有对 css 编辑器中其他的属性做说明，比如“区块，盒子，
边框„„”等等。光是对其做简单说明， 恐怕不能使大家很好地理解它们地作用，
还是在后面的具体例子中讲解比较好：）
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
第二章 CSS 层叠样式表（实例篇）
本篇的主要内容是：
CSS 彩色链接的制作
css 对背景的定义
css 对区块的定义
css 对方框的定义
css 对边框的定义
css 对列表的定义
css 对定位的定义
css 对扩展的定义
CSS 彩色链接的制作
关于这个方面，蓝色理想有一份非常好的教程，偶没有必要把那么经典的教程重
复一遍，大家直接去蓝色理想看吧（点击进入教程）
这是做出后的链接文字特效：（要查看在浏览器中的特效，点这里）
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
【图 6.1】
css 对背景的定义
在第四章里我们讨论过用 FP 的样式编辑器来网页或表格的固定背景。在 DW 的
css 编辑器里同样也可以做到。在 css 样式窗口中按“新建样式表”，打开【图
5.5】的对话框，标签可以随便起一个名字，我们就取名为“a”，创建自定义样
式。可以将其定义在原来有的 css 文件中（比如我们在第五章里建立的 1.css
文件），也可以“仅对该文档”，则对 a 的重定义只对在编辑的这个有效，不会
对其他文件产生影响。
注意：这种创建自定义样式的方法，对区块、盒子、边框等分类都是适用的，不
仅限于背景。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
【图 6.2】
关于“背景”对话框的设置，很容易看懂。可以选择背景颜色和背景图像。对背
景图像可以选择是否重复，是固定还是滚动，水平位置和垂直位置。自己试一下
就明白了。
按照【图 6.2】设置好参数，这时 css 样式窗口会显示出.a 的标签。这表示 a
标签已经重新定义了。双击 a 可以弹出图【6.2】，对属性进行修改。
【图 6.3】
要把这个定义应用到网页中，只需要单击 a 就可以了。
我们来看一个例子，建立一个一行两列的表格，选中表格，单击 a。a 标签就被
应用到这个表格中了。左边是纵向重复的背景图片，没有背景图片的地方就填充
了背景颜色。
真空尘埃
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
真空尘埃
真空尘埃
css 对区块的定义
区块是什么意思呢？区块指的就是网页中的文本、图像、层等网页元素。这个属
性主要用于控制区块中的内容的间距、对齐方式、文字缩进等等。这个就不加详
细说明了。
【图 6.4】
css 对方框的定义
这个分类的参数较多。有盒子、边距和边界。CSS 将网页中所有的块元素都看作
是包含在一个盒子（BOX）中。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
【图 6.5】
为了使大家了解这三个参数的意义，我们可以看这样一张示意图。中间的橙色表
示区块内容，边界就是区块和红色边框之间的距离，边距就是边框和盒子之间的
距离。
【图 6.6】
css 对边框的定义
通过对边框参数的设置， 表格可以做出很多漂亮的效果。可以设置边框线的粗细，
可以选择边框的颜色，可以选择边线的样式。记住一些特殊的样式，比如虚线、
点划线等，只有在 IE5.5 以上的版本才能支持。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
【图 6.7】
css 对列表的定义
这是对项目列表的控制。可以用图片来做列表项目的标志。
【图 6.8】
css 对定位的定义
定位主要用于精确控制网页中的元素，主要是针对于层的。插句题外话，我不喜
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
欢用层。一来浏览器对层的支持不好，再来层的定位不容易，很容易出现错位现
象。有些人用层来代替表格对页面进行设计，我是不提倡的。层最好只用于做一
些点缀效果——比如在页面上随时间轴移动这样的效果。
因为这个分类不大常用，我也不细说起参数了，大家自己研究研究吧。
【图 6.9】
css 对扩展的定义
扩展分类包含两个部分。一个是分页符，是为了打印的页面设置分页符用的。
视觉效果是为网页中的元素添加特殊的效果用的。光标：可以指定在某个元素上
要使用的光标形状。滤镜：这是一个很奇妙的参数，共包括 16 种滤镜，用这些
滤镜，甚至可以替代 photoshop 的一部分功能。我们将在下一章节中对滤镜进行
详细说明。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
【图 6.10】
第三章 CSS 层叠样式表（滤镜篇）
使用 css 滤镜，我们可以用一张图片做出很多类似 phtoshop 滤镜的效果。
本篇的主要内容是：
Alpha 滤镜
Blur 滤镜
Chroma 滤镜
Dropshadow 滤镜
FlipH、FlipV 滤镜
Glow 滤镜
Gray 滤镜
Invert 滤镜
Light 滤镜
Mask 滤镜
Shawdow 滤镜
Wave 滤镜
X-ray 滤镜
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
滤镜效果窗口就是【图 6.10】。我们用一张图片做例子，学习各种滤镜特效。
（btw：这是偶最近狂喜欢的多多宝宝，呵呵~~太可爱了太可爱了，怎么能那么
可爱呢~~~）
咳咳，花痴发完了。。。进入正题吧——
Alpha 滤镜
语法：Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?,
FinishX=?, FinishY=?)
参数和功能： 使对象产生透明度。
参数名称 功能 参数
0
值从 0－100， 为完全透明，
Opacity 图片的不透明度
100 为完全不透明
0
设置渐变的透明效果时， 值从 0－100， 为完全透明，
FinishOpacity
用来指定结束时的透明度 100 为完全不透明
0：没有渐进；1：直线渐进；
Style 指定渐变的显示形状
2：圆形渐进；3：矩形渐进
渐变透明效果开始的 X 坐
StartX
标值
渐变透明效果开始的 Y 坐
StartY
标值
渐变透明效果结束的 X 坐
FinishX
标值
FinishY 渐变透明效果结束的 Y 坐
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
标值
示范：
alpha(opacity=0,finishopacity=100,style=1,
filter：alpha(opacity=80)}
startx=0,starty=85,finishx=150,finishy=85)
仅仅改变了图片的透明度
有了一个直线的渐进效果
alpha(opacity=0,finishopacity=100,style=2, alpha(opacity=0,finishopacity=100,style=2,
startx=0,starty=85,finishx=150,finishy=85) startx=0,starty=85,finishx=150,finishy=85)
改变 style＝2，可以得到圆形的渐进效果 改变 style＝3，可以得到矩形的渐进效果
Blur 滤镜
语法：Blur(Add=?, Direction=?, Strength=?)
参数和功能： 使对象产生模糊效果。
参数名称 功能 参数
指定图片是否显示原来的 0：不显示原对象；1：显示
Add
模糊方向 原对象
0（上），45（右上），90
Direction 设置模糊的方向 （右），135（右下），180
（下），225（左下），270
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
（左），315（左上）
指定模糊图像模糊的半径
Strength 以 pixels 为单位，默认为 5
大小
示范：
blur(add=1,direction=90,strength=25) blur(add=0,direction=90,strength=25)
Chroma 滤镜
语法：Chroma(Color=?)
参数和功能： 某个颜色变透明。这个功能对图片的支持不是很好。
参数名称 功能 参数
把图片或文字中的某个颜
color RGB 格式的颜色值
色变为透明
Dropshadow 滤镜
语法：DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
参数和功能： 阴影效果。这个功能对图片的支持不是很好，普遍用于文字。
参数名称 功能 参数
Color 指定阴影的颜色 RGB 格式的颜色值
指定阴影相对于对象在水 整数。正数表示阴影在对象
OffX
平方向的偏移 右方，负数表示在左方。
指定阴影相对于对象在水 整数。正数表示阴影在对象
OffY
垂直方向的偏移 上方，负数表示在下方。
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
0：透明，无阴影；非 0：阴
Positive 指定阴影的透明度
影的强度
示范：
文字效果
DropShadow(Color=#000000, OffX=1, OffY=1, Positive=1)
FlipH、FlipV 滤镜
无任何参数。FlipH 使对象产生水平翻转效果；FlipV 使对象产生垂直翻转效果。
示范：
FlipH FlipV
Glow 滤镜
语法：Glow(Color=?, Strength=?)
参数和功能： 使对象的外轮廓产生一种光晕效果。一般用于文字效果。
参数名称 功能 参数
Color 指定光晕的颜色 RGB 格式的颜色值
Strength 指定光晕的范围 设定值从 1－255，数字越大
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
光晕越强
示范：
文字效果
Glow(Color=ff0000, Strength=2)
Gray 滤镜
无任何参数。使图片由彩色变为灰白色调。
示范：
Gray
Invert 滤镜
无任何参数。使图片产生照片底片的效果。
示范：
Invert
Light 滤镜
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
语法：Light(?)
参数和功能：模拟光源的投射效果。 不过要通过调用方法来实现，这就需要用
到 javascript 动态滤镜编程。在这里就不细说了。
方法 功能
AddAmbient 加入包围的光源
AddCone 加入锥形光源
Addpoint 加入点光源
Changcolor 改变光的颜色
Changstrength 改变光源的强度
Clear 清除所有的光源
MoveLight 移动光源
Mask 滤镜
语法：Mask(Color=?)
参数和功能：在对象上建立一个覆盖于表面的膜。对图像的支持不好，普遍用于
文字。
示范：
文字效果
Mask(Color=ff0000)
Shawdow 滤镜
语法：Shadow(Color=?, Direction=?)
参数和功能：与 dropshadow 非常相似，也是一种阴影效果。dropshadow 没有渐
进感，shadow 有渐进的阴影感。
参数名称 功能 参数
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
Color 指定阴影的颜色 RGB 格式的颜色值
0：垂直向上；每 45 度为一
Direction 指定阴影的方向
个单位
示范：
文字效果
Shadow(Color=000000, Direction=0)
Wave 滤镜
语法：Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)
参数和功能：使对象在垂直方向上产生波浪的变形效果。
参数名称 功能 参数
Add 表示是否显示原对象 0：不显示；1：显示
Freq 设置波动的数量 自然数
1
0－100， 为最弱，100 为最
LightStrength 设置波浪效果的光照强度
强
Phase 波浪的起始相位 0-100
Strength 设置波浪摇摆的幅度 自然数
示范：
CSS 样式教学资料 (整理 中山中专 邓丽强 联系:dlq@zszz.net QQ:463101158)
wave(add=true,freq=3,lightstrength=100,phase=45,strength=5)
X-ray 滤镜
无任何参数。使图片只显示其轮廓。
Xray
以上我们学习了 css 的静态滤镜。除了这些之外，css 还包含两种动态滤镜，
BlendTrans 混合转换滤镜和 Revealtrans 显示转换滤镜。这两类滤镜不能单独
在 htnl 中调用， 必须要结合在 scripts 程序中，由 spripts 程序对其进行控制。
所以要使用动态滤镜，必须要会 spripts 编程。不过，我们可以在网上找到很多
现成的 javascripts 来使用，在这里就不多说了。
Related docs
