CSS层叠样式表(基础篇)
第一章 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。
第三行——第六行的a标签，指定的是链接文本的变化控制。
link表示超链接的文本在链接未被访问时的颜色，代码中指定颜色为0000ff（蓝色）。visited 表示链接被访问过后的颜色为灰色（#666666）。active表示鼠标点击链接时链接的文本颜色为绿色。hover表示鼠标指向链接但未点击时的链接颜色为红色，背景颜色为橙色。
text-decoration:none表示链接文本没有下划线。text-decoration: underline则表示链接文本有下划线。
请大家仔细看这段代码，在下面的教程中，我们都将以这段代码作为例子。
如何将CSS添加到页面中
在讲解如何编辑CSS前，我们先来说一下怎么把CSS添加到页面中，即怎么才能让编辑好的CSS对页面元素起作用呢？
一般来说，有两种方法。
一种方法是直接把CSS代码粘贴到html中。比如我们把下面一段代码粘贴入HTML代码的
之间就可以了。不过这样做，我们只是定义了这个页面的CSS。如果一个网站有很多页面的话，一个一个页面粘贴代码是不大可能的。所以我还是建议大家用第二种办法~
第二种办法就是将css代码生成一个*.css的文件，然后将这个文件链接到所需的页面上。这样做一个很大的好处就是，你可以把网站上所有页面都链接到一个css文件，一旦这个css 文件修改，那么所有的页面风格也随之改变。这就是css的好处之一。
在DW里，链接CSS文件的方法是这样的：点击CSS样式窗口右下角的“编辑样式表”，就可以打开“编辑样式表”窗口，在此窗口单击“链接”，在弹出的链接中“浏览”，选择已经编辑好的CSS文件就可以了。
【图5.1】
如果你使用FP来做主页，那么也可以使用类似的方法链接CSS文件。点击“格式”菜单栏，有一个“样式表链接”选项。选择“添加”，就可以选择CSS文件。
【图5.2】
注意：以下这个问题是在用FP时很容易遇到的！有时候你会发现css无论如何也不会对网页字体起作用。你仔细检查代码，没发现有错啊！怎么回事？问题就出在，FP中有一个对字体进行设置的选项，有普通，1（8磅），2（10磅）……等可选项。如果使用了css，切记把这里的选项选为“普通”。
用DW的CSS编辑器编辑css文件
讲了那么多，大家应该已经初步了解了css的基本代码吧。在Dreamweaver里，有非常方便的CSS编辑器，即使你对CSS代码不是很熟悉，也能编辑出css。
在css样式编辑器中点击右下角的“新建样式”按钮，弹出“新建样式对话框”。按图中的设置选择相应的选项，最后“确定”，就会弹出一个对话框，让你定义新建的CSS文件的文件名和存放位置。
【图5.3】
设置完成后再点击CSS样式编辑器的“编辑样式表”按钮，就可以看到以下的对话框，1.css 就是我们刚才创建的一个新的css文件。这个文件现在还没有内容。
【图5.4】
从最开始我们研究的css代码中我们已经知道，我们常用的要重新定义的css标签是p、td 和a。在上面的对话框中选择“新建”。以下的设置就是重新定义p标签，请注意图中的选项设置。
【图5.5】
单击确定，我们就打开了css编辑器。这里才是真正的DW的css编辑器：）
以下这个对话框中的设置就是对p标签的设置。通过这个设置，我们定义了网页中文字的字体、大小、颜色和行高。（td标签也是用同样的方法设置。也就是在上面“新建样式”的对话框中将标签改为td就可以了。）重新提一下，p标签是指对网页中元素的设置，td标签是指对表格中元素的设置。
【图5.6】
好了，接下来是很重要的部分，就是如何对超链接风格进行设置。
在“新建样式”对话框中选择“使用css选择器”，我们可以看到标签里出现四个选择项。
【图5.7】
a:active表示鼠标点击链接时链接风格；
a:hover表示鼠标指向链接但未点击时的链接风格；
a: link表示超链接的文本在链接未被访问时的风格；
a:visited表示链接被访问过后的风格。
链接的风格包括链接文字的颜色、大小、背景颜色等等。四个标签的设置方法完全相同，我们选择其中一个做说明。比如hover标签定义的链接风格是：链接颜色为红色，背景颜色为橙色。
【图5.8】
【图5.9】
好了，这章就先讲到这里吧，已经太长了……
大家可能注意到我没有对css编辑器中其他的属性做说明，比如“区块，盒子，边框……”等等。光是对其做简单说明，恐怕不能使大家很好地理解它们地作用，还是在后面的具体例子中讲解比较好：）
第二章 CSS层叠样式表（实例篇）
本篇的主要内容是：
CSS彩色链接的制作
css对背景的定义
css对区块的定义
css对方框的定义
css对边框的定义
css对列表的定义
css对定位的定义
css对扩展的定义
CSS彩色链接的制作
关于这个方面，蓝色理想有一份非常好的教程，偶没有必要把那么经典的教程重复一遍，大家直接去蓝色理想看吧（点击进入教程）
这是做出后的链接文字特效：（要查看在浏览器中的特效，点这里）
【图6.1】
css对背景的定义
在第四章里我们讨论过用FP的样式编辑器来网页或表格的固定背景。在DW的css编辑器里同样也可以做到。在css样式窗口中按“新建样式表”，打开【图5.5】的对话框，标签可以随便起一个名字，我们就取名为“a”，创建自定义样式。可以将其定义在原来有的css文件中（比如我们在第五章里建立的1.css文件），也可以“仅对该文档”，则对a的重定义只对在编辑的这个有效，不会对其他文件产生影响。
注意：这种创建自定义样式的方法，对区块、盒子、边框等分类都是适用的，不仅限于背景。
【图6.2】
关于“背景”对话框的设置，很容易看懂。可以选择背景颜色和背景图像。对背景图像可以选择是否重复，是固定还是滚动，水平位置和垂直位置。自己试一下就明白了。
按照【图6.2】设置好参数，这时css样式窗口会显示出.a的标签。这表示a标签已经重新定义了。双击a可以弹出图【6.2】，对属性进行修改。
【图6.3】
要把这个定义应用到网页中，只需要单击a就可以了。
我们来看一个例子，建立一个一行两列的表格，选中表格，单击a。a标签就被应用到这个表格中了。左边是纵向重复的背景图片，没有背景图片的地方就填充了背景颜色。
真空尘埃
真空尘埃
真空尘埃
css对区块的定义
区块是什么意思呢？区块指的就是网页中的文本、图像、层等网页元素。这个属性主要用于控制区块中的内容的间距、对齐方式、文字缩进等等。这个就不加详细说明了。
【图6.4】
css对方框的定义
这个分类的参数较多。有盒子、边距和边界。CSS将网页中所有的块元素都看作是包含在一个盒子（BOX）中。
【图6.5】
为了使大家了解这三个参数的意义，我们可以看这样一张示意图。中间的橙色表示区块内容，边界就是区块和红色边框之间的距离，边距就是边框和盒子之间的距离。
【图6.6】
css对边框的定义
通过对边框参数的设置，表格可以做出很多漂亮的效果。可以设置边框线的粗细，可以选择边框的颜色，可以选择边线的样式。记住一些特殊的样式，比如虚线、点划线等，只有在IE5.5以上的版本才能支持。
【图6.7】
css对列表的定义
这是对项目列表的控制。可以用图片来做列表项目的标志。
【图6.8】
css对定位的定义
定位主要用于精确控制网页中的元素，主要是针对于层的。插句题外话，我不喜欢用层。一来浏览器对层的支持不好，再来层的定位不容易，很容易出现错位现象。有些人用层来代替表格对页面进行设计，我是不提倡的。层最好只用于做一些点缀效果——比如在页面上随时间轴移动这样的效果。
因为这个分类不大常用，我也不细说起参数了，大家自己研究研究吧。
【图6.9】
css对扩展的定义
扩展分类包含两个部分。一个是分页符，是为了打印的页面设置分页符用的。
视觉效果是为网页中的元素添加特殊的效果用的。光标：可以指定在某个元素上要使用的光
标形状。滤镜：这是一个很奇妙的参数，共包括16种滤镜，用这些滤镜，甚至可以替代photoshop的一部分功能。我们将在下一章节中对滤镜进行详细说明。
【图6.10】
第三章CSS层叠样式表（滤镜篇）
使用css滤镜，我们可以用一张图片做出很多类似phtoshop滤镜的效果。
本篇的主要内容是：
Alpha滤镜
Blur滤镜
Chroma滤镜
Dropshadow滤镜
FlipH、FlipV滤镜
Glow滤镜
Gray滤镜
Invert滤镜
Light滤镜
Mask滤镜
Shawdow滤镜
Wave滤镜
X-ray滤镜
滤镜效果窗口就是【图6.10】。我们用一张图片做例子，学习各种滤镜特效。（btw：这是偶最近狂喜欢的多多宝宝，呵呵~~太可爱了太可爱了，怎么能那么可爱呢~~~）
咳咳，花痴发完了。。。进入正题吧——
Alpha滤镜
语法：Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
参数和功能：使对象产生透明度。
示范：
Blur滤镜
语法：Blur(Add=?, Direction=?, Strength=?)
参数和功能：使对象产生模糊效果。
示范：
语法：Chroma(Color=?)
参数和功能：某个颜色变透明。这个功能对图片的支持不是很好。
Dropshadow滤镜
语法：DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
参数和功能：阴影效果。这个功能对图片的支持不是很好，普遍用于文字。
示范：
文字效果
FlipH、FlipV滤镜
无任何参数。FlipH使对象产生水平翻转效果；FlipV使对象产生垂直翻转效果。示范：
Glow滤镜
语法：Glow(Color=?, Strength=?)
参数和功能：使对象的外轮廓产生一种光晕效果。一般用于文字效果。
示范：
文字效果
Gray滤镜
无任何参数。使图片由彩色变为灰白色调。
示范：
Invert滤镜
无任何参数。使图片产生照片底片的效果。
示范：
Light滤镜
语法：Light(?)
参数和功能：模拟光源的投射效果。不过要通过调用方法来实现，这就需要用到javascript 动态滤镜编程。在这里就不细说了。
Mask滤镜
语法：Mask(Color=?)
参数和功能：在对象上建立一个覆盖于表面的膜。对图像的支持不好，普遍用于文字。
示范：
文字效果
Shawdow滤镜
语法：Shadow(Color=?, Direction=?)
参数和功能：与dropshadow非常相似，也是一种阴影效果。dropshadow没有渐进感，shadow 有渐进的阴影感。
示范：
文字效果
Wave滤镜
语法：Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)
参数和功能：使对象在垂直方向上产生波浪的变形效果。
示范：
X-ray滤镜
无任何参数。使图片只显示其轮廓。
以上我们学习了css的静态滤镜。除了这些之外，css还包含两种动态滤镜，BlendTrans混合转换滤镜和Revealtrans显示转换滤镜。这两类滤镜不能单独在htnl中调用，必须要结合在scripts程序中，由spripts程序对其进行控制。所以要使用动态滤镜，必须要会spripts 编程。不过，我们可以在网上找到很多现成的javascripts来使用，在这里就不多说了。