现在，用FRONTPAGE制作网页简单得就象是用画笔在白纸上画图一样。但随着网站内容的不断丰富，网页上的图象、动画、字幕以及其他控件也不断增加，要实现这些元素在网页中的准确定位，就必须对这若干个元素分别调整，这一点恐怕只有那些对网页制作痴迷而执着的人才可能做到，这并不是正确的工具和灵活性就可以实现的。设想一下，打开一个文本文件，编辑几行字，就可以使整个Web站点得到改变。再设想一下，以在线的方式创建带有复杂图形、丰富字体字号等特殊效果的页面，大小只有10k。那么这样的效果如何实现呢？ 

1996年底的时候出现了一种叫做样式表（stylesheets）的技术。全称应该是级联样式表即Cascading Style Sheet的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。它将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件我们就可以改变页数不计的网页的外观和格式，保证在所有浏览器和平台之间的兼容性，拥有更少的编码、更少的页数和更快的下载速度。除了能全面支持我们常用的大多数浏览器之外，CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。 

一、样式表的作用 

1、可以将格式和结构分离 

HTML从来没打算控制网页的格式或外观。这种语言定义了网页的结构和个要素的功能，而让浏览器自己决定应该让各要素以何种模样显示。但是网页设计者要求的更多。所以当Netscape推出新的可以控制网页外观的HTML标签时，网页设计者无不欢呼雀跃。我们可以用、包在
外边控制文章主体的外观等等。然后我们将所有东西都放入表格，用隐式GIF空格产生一个20象素的边距。一切都变得乱七八糟。编码变得越来越臃肿不堪，要想将什么内容迅速加到网页中变得越来越难。 

串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML仍可以保持简单明了的初衷。CSS代码独立出来从另一角度控制页面外观。 

2、可以以前所未有的能力控制页面的布局 

能使我们调整字号，表格标签帮助我们生成边距，这都没错。但是，我们对HTML总体上的控制却很有限。我们不可能精确地生成80象素的高度，不可能控制行间距或字间距，我们不能在屏幕上精确定位图象的位置。但是现在，样式表使这一切都成为可能。而即将推出的新的CSS功能更令人兴奋。 

3、可以制作出体积更小下载更快的网页 

还有更好的消息：样式表只是简单的文本，就象HTML那样。它不需要图象，不需要执行程序，不需要插件，不需要流式。它就象HTML指令那样快。有了CSS之后，以前必须求助于GIF的事情现在通过CSS就可以实现。还有，正如我先前提到的，使用串接样式表可以减少表格标签及其它加大HTML体积的代码，减少图象用量从而减少文件尺寸。 

4、可以更快更容易地维护及更新大量的网页 

没有样式表时，如果我想更新整个站点中所有主体文本的字体，我必须一页一页地修改每张网页。即便站点用数据库提供服务，我仍然需要更新所有的模板，而且更新每一模板中每一个实例实例的。样式表的主旨就是将格式和结构分离。利于样式表，我可以将站点上所有的网页都指向单一的一个CSS文件，我只要修改CSS文件中某一行，那么整个站点都会随之发生变动。 

5、浏览器将成为你更友好的界面 

不象其它的的网络技术，样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。只要是可以识别串接样式表的浏览器就可以应用它。 

二、样式表的语法 

一个样式表由样式语法组成, 以告诉浏览器怎样去呈现一个文档. 有很多将样式语法加入到你的HTML文档中的方法, 但最简单的启动方法是使用HTML的STYLE组件.这个元素放置于文档的HEAD部分, 包含网页的样式规则。 

1、选择符 

每个规则的组成包括一个选择符--通常是一个HTML的元素, 例如BODY, P, 或EM和该选择符所接受的样式.有很多的属性可以用于定义一个元素. 每个属性带一个值, 共同地描述选择符应该如何呈现.样式规则组成如下: 

选择符 { 属性: 值 } 

单一选择符的复合样式声明应该用分号隔开: 

选择符 { 属性1: 值1; 属性2: 值2 } 

以下是一段定义了H1和H2元素的颜色和字体大小属性: 

EM { font-size: 150%; color: blue } 

上述的样式表告诉浏览器用1.5倍的蓝色字体去显示网页中强调的部分。 

2、类选择符 

单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码: 

code.html { color: #191970 } 

code.css { color: #4b0082 } 

以上的例子建立了两个类，css和html，供网页的CODE元素使用。CLASS属性是用来在网页中以指明元素的类，例如，，每个选择符只允许有一个类。一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的css类也可以命名为effect。

3、ID 选择符 

ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下: 

4、关联选择符 

关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如， 以下的上下文选择符 

P EM { background: yellow }，这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。 

5、伪类和伪元素 

伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。 

伪类或伪元素规则的形式如：选择符:伪类 { 属性: 值 }或选择符:伪元素 { 属性: 值 } 

伪类和伪元素不用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下: 

选择符.类: 伪类 { 属性: 值 } 

或 

选择符.类: 伪元素 { 属性: 值 } 

6、定位锚伪类 

伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激　活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。一个有趣的效果是使当前(或"可激活")连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下: 

A:link { color: red } 
A:active { color: blue; font-size: 125% } 
A:visited { color: green; font-size: 85% } 

7、首行伪元素 

通常在报纸上的文章，例如"据新华社报道"中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子: 

P:first-line { 


三、样式表的属性 

1、背景属性 

对于背景颜色和背景图片大家都比较熟悉,这里介绍两个比较有趣的背景图案属性background-attachment此属性有两个值：scroll 和fixed;scroll是初始值，产生的效果是常见的背景图案随页面上的文字一起流动。fixed属性是指背景静止动，文字在背景上流动的特殊效果，例如：body{background-attachment:fixed} 。background-position 

此属性是设置背景图案的起始位置，可分别用百分比和长度值来设定，初始值为0和0，例如：body{background-position:50% 50%} 

2、文本属性 

这里介绍几个常用的文本属性："text-decoration ""text-aling""line-heigth""text-indent"。 

text-decoration相信大家对这个属性都不会陌生，如我们常在网上看到的没有下划线的超链接，就是通过设置这个属性来实现的。其常用的属性值有４个，分别是： 

属性值 说明 
none 无 
underline 下划线 
overline 上划线 
lineth-rough 删除线 

有上面的属性值以后，我们就可以去掉超链接中的下划线了，设置如下：A:link{text-decoration:none} 

text-align这个属性定义了文本的对齐方式，其作用与HTML中的"align"相似。其定义的对齐方式有四种，分别是： 

left 左对齐 
right 右对齐 
center 居中 
justify 两端对齐 

line-height这个属性用来定义文本行高，即相邻的两行文字间的距离，此属性可用数字、长度、百分比来定义。例如： 

body{line-heigth:1.5;font-size:10pt} 

body{line-heigth:150%;font-size:10pt} 

这两个定义产生的行高都是15pt;即行高属性值乘以字体大小。 

text-indent此属性定义文本首行的缩进方式，也即是在用WORD软件时所见的首行缩进的效果；此属性值可以为负。例如： 

P{text-indent:5em} 

p{text-indent:-5em} 

将上面任何一句加到HTML中，就可以看到效果了。 

3、字体属性  

字体属性是使用最多的，CSS的字体的常用属性包括： 

font-family 匹配字体 BODY{font-family:Arial,Times,impact} 
font-weight 字体精细 p{font-weight:bolder}设置字体为加粗 
font-size 字体大小 body{font-size:10pt}  
font-family 字形 p{font-family:italic}设置字体为斜体 

其中的font-family的含义：首先寻找字体的名称（Arial），如果在该计算机中安装了这种字体，就使用它。如果没有安装，则移向下一种字体（Times），如果这种字体也没有安装，则移向第3种字体.你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称没有把握时，这样做是一种好办法。另外你也可以一次性的定义所有的属性。例如： 

BODY{fotn-family:宋体，Arial;font-weight:bolder;fint-size:10pt;color:blue} 

四、样式表的定位 

CSS定位的"positon"属性能够使用两种方法定位HTML元素：相对定位和绝对定位。所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移；而绝对定位允许元素与原始的文档布局分离且任意定位。CSS的定位属性共有9个，分别是： 

position、left、top、width、height、overflow、z-index和visibility　position 

positon的属性值有absolute、relative和static三个。当使用绝对定位元素absolute时，被定位元素是独立的，它与上下级元素都无关，完全独立于其他内容。当使用相对定位relative时，该元素对于上一级元素的位置进行布局定位；通过相对定位，使用脚本语言就能实现动画效果了。 

left、top 

CSS在格式化文档时，是将对象放置在一个个的容器里，再进行格式化；这个容器的左上角就是定位的参考点。left值就是容器的左上顶点到上级左边界的距离；"top"就是容器左上顶点到上级元素上边界的距离。 

width、height 

适用于绝对定位的元素，"width"和"height"定义了元素所占空间的大小。可用百分比或数字定义。 

overflow 

此属性定义了元素的内容超出容器的宽度和高度后，浏览器怎样处理。其属性值有四个，分别是： 
visible：无论定义的width和height是多少，其超出部分都无条件显示。 
hidden：超出定义的容器的宽度和高度部分将被剪切。 
scroll：浏览器将提供一组滚屏工具。 
auto：根据浏览器的不同而不同，通常会提供一组滚屏工具。 


五、样式表的引入 

了解了CSS的定义方式，下面将具体介绍如何在HTML中引入CSS的各种方法。 

1、使用 链接外部样式表单；例如：  

应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置；另外，当你遇上改版或作某些重大调整要对风格进行修改时，可直接修改这个CSS文件，当然了，HTML文件一直引用最近更新的样式单，而不必每个每个HTML文件进行整，你说是不是挺方便的呀！特别提醒一下，如果你想建立自己的网站，这方面不可忽视哟，如果在建站之初没有网站风格的统一规划并形成CSS文件，以后内容一多，想调整一下风格会累死你的。 

2、把定义语句放在和标签之间，这种风格定义产生作用的范围也只局限于本文件，其格式如下(套用上边的CSS) 

3、使用CSS"@import"导入样式表单；例如： 

4、在内部元素中使用"STYLE"标记来定义 例如： 

我的样式表 

5、直接插入式 

直接插入式很简单，只是在每个HTML标志后书写CSS属性就可以了。这种方式很直接，如我们想规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下： 

这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。 

六、样式表滤镜的构成 

滤镜作为样式表大家庭中的一员，它跟其他样式表元素的定义和应用方式当然是一样的，能够直接定义在HTML标识的和只间。样式表滤镜的基本语法为： 

标记｛FILTER：滤镜名（属性名1＝属性值1，属性名2＝属性值2，....）；｝ 

它所表达的意思是：在该标记范围内的内容，样式表滤镜将按照小括号内的属性名所限定的对象，按属性值所设定的数值进行特效处理。其中标记为HTML语法中的任意标记，如SPAN，P，BR等等；滤镜名就是我们下面所涉及到的１４种滤镜名称；每一种滤镜它都有自己特定的属性名及其属性值。 

例如：P { filter : alpha(opacity=80,style=1 ); } 

以上就是使用样式表滤镜的定义方法。 


七、静态滤镜的种类 

在IE4.0以上版本浏览器中，支持以下14种样式表滤镜：  

滤镜名 说明 
Alpha 让对象呈现渐变半透明效果 
Blur 让对象产生风吹模糊的效果 
DropShadow 让对象有一个下落式的阴影 
Glow 在对象的周围产生光晕而模糊的效果 
Chroma 让图像中的某一颜色变成透明色 
FlipH 让HTML对象水平转换 
FlipV 让HTML对象垂直转换 
Wave 让HTML对象产生水平或是垂直方向上的正弦波形 
Shadow 让对象产生阴影效果 
Mask 利用一个HTML对象在另一个对象上产生图像的遮罩 
Light 在HTML元件上放置一个光影 
Gray 把一个彩色的图象变成灰色调图象  
Invert 让对象产生照片底片的效果 
XRay 让对象轮廓突出显示 

这些滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，你就可以直接在HTML中对图片进行特效处理了，而不用再用专门的图片处理软件编辑图片了。样式表滤镜不仅对图象起作用，同时也适用于文本；在这里笔者为方便叙述，暂用文本作为例子来谈谈滤镜的参数及其作用。 

八、滤镜的参数及其作用 

1、Alpha滤镜 

语法：{FILTER：ALPHA(opacity=属性值1,finishopacity=属性值2,style=属性值3,startx=属性值4,starty=属性值5,finishx=属性值6,finishy=属性值7)} 

作用：该滤镜能够使对象呈现渐变半透明效果，其效果是由小括号中的各属性名及其对应的属性值决定。 

参数：Opacity 属性是设置不透明的程度，用百分比表示其属性值，大小是从0到100，0表是完全透明，100表示完全不透明。 

FinishOpacity 属性是一个同Opacity一起使用的选择性的参数，当同时设定Opacity和FinishOpacity时，可以制作出透明渐进的效果；其属性值也是从0到100，0表是完全透明，100表示完全不透明。 

Style属性是用来设置渐变风格的，当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用来指定渐进的显示形状，0代表均匀渐进；1代表线形渐进；2代表放射渐进；3代表直角渐进。 

StartX 属性是用来设置水平方向渐进的起始位置。 
FinishX属性是用来设置水平方向渐进的结束位置。 
FinishY属性是用来设置竖直方向渐进的结束位置 


2、BLUR滤镜 

语法：{filter:blur(add=属性值1,direction=属性值2,strength=属性值3)；} 

作用：该滤镜能够使对象表现一种模糊的效果，其效果是由小括号中的各属性名及其对应的属性值决定。 

参数：add属性是用来确定是否在运动模糊中使用原有目标，其属性值有0和1两种，0属性值意思是在模糊运动中不使用原有目标，大多数情况下适用于图象；1属性值代表在模糊运动中使用原有目标，大多数情况下适用于文本。 

direction属性是用来表示模糊移动时的角度，其属性值为0到360度。 

strength属性是用来表示模糊移动时的距离，该属性值一般可以任意设置。  


3、DropShadow滤镜 

语法：{filter:dropshadow(color=属性值1,offx=属性值2,offy=属性值3,positive=属性值4)；} 

作用：该滤镜主要是用来产生重叠效果的，其效果是由小括号中的各属性名及其对应的属性值来产生的。 

参数：COLOR属性是用来设置投影文字的颜色。 

offX属性是代表投影文字与原文字之间水平方向上的偏移量。 
offY属性是代表投影文字与原文字之间垂直方向上的偏移量。 

positive属性是一个布尔值（0或者1），如果为"TRUE（非0）"，那么就为任何的非透明像素建立可见的投影；如果为"FASLE（0）"，那么就为透明的像素部分建立透明效果。 

4、Glow滤镜 

语法：{filter:glow(color=属性值1,strength＝属性值2)；} 

作用：该滤镜能够在原对象周围产生一种类似发光的效果，其具体效果是由小括号中的各属性名及其对应的属性值来产生的。 

参数：COLOR属性是指定发光的颜色。 

STRENGTH则是发光强度的表现，也指光晕的厚度；其大小可以从1到255之间的任何整数来指定这个强度。 

5、Chroma滤镜 

语法：{filter:chroma(color=属性值)；} 

作用：该滤镜能够使图像中的某一颜色变成透明色。 

参数： COLOR属性用来指定要变为透明色的颜色，通过该属性值的设定，我们可以来过滤某图象中的指定颜色。 


6、FlipH滤镜 

语法：{filter:filph} 

作用：该滤镜能够使HTML对象进行左右对换，一般适用于图象对象。 

参数：该滤镜没有参数。 

7、FlipV滤镜 

语法：{filter:filpv} 

作用：该滤镜能够使HTML对象进行上下对换，一般适用于图象对象。 

参数：该滤镜没有参数。 

8、Wave滤镜 

语法：{filter:wave(add=属性值1,freq=属性值2,lightstrength=属性值3,phase=属性值4,strength=属性值5)；}  

作用：该滤镜能够使被过滤对象生成正弦波形，从而能造成一种变形幻觉，其具体效果是由小括号中的各属性名及其对应的属性值来产生的，一般适用于图象对象。 

参数：add属性是一个布尔值，它用来决定是否将原始图象加入最后的效果之中。 

freq属性是指波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹。 

phase属性是用来设置正弦波的偏移量，也就是决定波形的形状，其属性值的取值范围为从0到360度。 

lightstrength属性可以对于波纹增强光影的效果，其取值范围为从0到100。 

strength属性是用来决定波形振幅的大小。 

9、Shadow滤镜 

语法：{filter:shadow(color=属性值1,direction=属性值2)；} 

作用：该滤镜能够使对象产生一种阴影效果，其具体效果是由小括号中的各属性名及其对应的属性值来产生的。 

参数：color属性是用来设置阴影的颜色。 

direction属性是用来设置投影的方向，取值范围为0度到360度，其中0度代表垂直向上，然后每45度为一个单位，该属性的默认值是向左的270度。 

10、Mask滤镜 

语法：{filter:mask(color=属性值)；} 

作用：该滤镜能够利用一个HTML对象在另一个对象上产生图像的遮罩，可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样，一般适用于图象对象。 

参数：color属性就是用来指定要被遮罩的颜色。 


11、Light滤镜 

语法：{Filter：light｝ 

作用：该滤镜能够使HTML对象产生一种模拟光源的投射效果。一旦为对象定义了light滤镜属性，那么就可以调用它的方法来设置或者改变属性。light可用的方法有： 

MoveLight 移动光源 
Changcolor 改变光的颜色 
AddAmbient 加入包围的光源 
AddPoint 加入点光源 
Clear 清除所有的光源 
AddCone 加入锥形光源 
Changstrength 改变光源的强度 

可以定义光源的虚拟位置，以及通过调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源，可能回产生一些意想不到的效果。 

参数：该滤镜没有参数。 

12、Gray滤镜 

语法：{filter:gray} 

作用：该滤镜能够使一张彩色的图片转变为灰色调图象，一般适用于图象对象。 

参数：该滤镜没有附带参数。 

13、Invert滤镜 

语法：{filter:invert} 

作用：该滤镜能够使图象产生照片底片的效果，一般适用于图象对象。 

参数：该滤镜没有参数。 

14、Xray滤镜 

语法：{filter:xray} 

作用：该滤镜能够让对象反映出它的轮廓并把这些轮廓加亮显示，一般适用于图象对象。 

参数：该滤镜没有参数。