2006年06月25日

        现在,用FRONTPAGE制作网页简单得就象是用画笔在白纸上画图一样。但随着网站内容的不断丰富,网页上的图象、动画、字幕以及其他控件也不断增加,要实现这些元素在网页中的准确定位,就必须对这若干个元素分别调整,这一点恐怕只有那些对网页制作痴迷而执着的人才可能做到,这并不是正确的工具和灵活性就可以实现的。设想一下,打开一个文本文件,编辑几行字,就可以使整个Web站点得到改变。再设想一下,以在线的方式创建带有复杂图形、丰富字体字号等特殊效果的页面,大小只有10k。那么这样的效果如何实现呢?
  1996年底的时候出现了一种叫做样式表(stylesheets)的技术。全称应该是级联样式表即Cas
CADing Style Sheet的缩写,我们又常称这为风格样式单Style Sheet,顾名思义,是用来进行网页风格设计的。比如,我想让我的链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,我们可以统一地控制HMTL中各标志的显示属性。它将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件我们就可以改变页数不计的网页的外观和格式,保证在所有浏览器和平台之间的兼容性,拥有更少的编码、更少的页数和更快的下载速度。除了能全面支持我们常用的大多数浏览器之外,CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。

一、样式表的作用

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

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

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

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

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

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

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

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

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

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

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

二、样式表的语法

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

  1、选择符

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

  选择符 { 属性: 值 }

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

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

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

  <HEAD>

  <TITLE>CSS例子</TITLE>

  <STYLE TYPE="text/css">

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

  </STYLE>

  </HEAD>

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

2、类选择符

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

code.HTML { color: #191970 }

code.CSS { color: #4b0082 }

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

3、ID 选择符

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

<style type="text/css">

<!–

#first { color: green }

#second { color:teal }

–>

</style>

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相信大家对这个属性都不会陌生,如我们常在网上看到的没有下划线的超链接,就是通过设置这个属性来实现的。其常用的属性值有4个,分别是:

属性值         说明       

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、使用<LINK> 链接外部样式表单;例如:

<HEAD>

<TITLE>My Stylesheet</TITLE>

<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">

</HEAD>

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

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

<Style Type="text/css">

 <!–

  td{ color: green; font-size: 15px; font-family: Arial }

 –>

</Style>

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

<STYLE TYPE="text/css">

<!–

@import url(mystyles.css);

–>

</STYLE>

  4、在<BODY>内部元素中使用"STYLE"标记来定义;例如:

<p style="color: red; font-size: 20px; font-family: Arial">我的样式表</p>

5、直接插入式

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

  <Table style="color:red;font-size:10pt">

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

五、样式表的引入

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

  1、使用<LINK> 链接外部样式表单;例如:

<HEAD>

<TITLE>My Stylesheet</TITLE>

<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">

</HEAD>

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

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

<Style Type="text/css">

 <!–

  td{ color: green; font-size: 15px; font-family: Arial }

 –>

</Style>

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

<STYLE TYPE="text/css">

<!–

@import url(mystyles.css);

–>

</STYLE>

  4、在<BODY>内部元素中使用"STYLE"标记来定义;例如:

<p style="color: red; font-size: 20px; font-family: Arial">我的样式表</p>

  5、直接插入式

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

  <Table style="color:red;font-size:10pt">

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

、样式表滤镜的构成

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

标记{FILTER:滤镜名(属性名1=属性值1,属性名2=属性值2,….);}

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

例如: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属性是用来设置竖直方向渐进的结束位置。

  实例:

<HTML>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>样式表滤镜实例</title>

<style>

<!–

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }p {filter:alpha(opacity=80,style=0,starX=2,finishX=4);}

–>

</style>

</head>

<body>

<p>样式表滤镜实例</p>

</body>

</html>

2、BLUR滤镜

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

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

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

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

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

  实例:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>样式表滤镜实例</title>

<style>

<!–

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:blur(add=1,direction=60,strength=2);}

–>

</style>

</head>

<body>

<p>样式表滤镜实例</p>

</body>

</html>

3、DropShadow 滤镜 

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

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

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

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

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

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

  实例:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>样式表滤镜实例</title>

<style>

<!–

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:dropshadow(color=#ff0080,offX=2,offY=2,positive=0);color:#00ff11}

–>

</style>

</head>

<body>

<p>样式表滤镜实例</p>

</body>

</html>

4、Glow 滤镜

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

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

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

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

  实例:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>样式表滤镜实例</title>

<style>

<!–

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:glow(color=#880088,strength=3);}

–>

</style>

</head>

<body>

<p>样式表滤镜实例</p>

</body>

</html>

5、Chroma 滤镜

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

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

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

  实例:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>样式表滤镜实例</title>

<style>

<!–

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:chroma(color=#0000fe);}

–>

</style>

</head>

<body>

<p>样式表滤镜实例</p>

</body>

</html>

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度。

  实例:

<HTML>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>样式表滤镜实例</title>

<style>

<!–

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:shadow(color=#00ff00,direction=2);}

–>

</style>

</head>

<body>

<p>样式表滤镜实例</p>

</body>

</html>

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} 

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

  参数:该滤镜没有参数。

·背景颜色 background-color
我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的。这个的默认值是transparent(透明色)。
例:body{background-color:yellow}
H1{background-color:#000000}

·背景图片 background-image
背景图片和背景颜色在
HTML里面的设置也是基本相同的,都可以在里加入相关的语句来完成。但是在这里,我所指的并非是用这种方法,我用的方法还是CSS。background-image这个的主要功能也就是用来显示图片,如果需要显示图片的话,那么只要在后面加上url(图片的地址)就可以了,不显示嘛,那是最简单不过的了,什么也不要就行了,因为这个默认的就是none,而要加的话,就是在后面加上这个none就可以了。
例:body{background-image:url(file&:///C:/
Windows/BACKGRND.GIF)}
h1{background-image:url(none)}

大家在使用里的背景图片时,一定常常遇到一些图片因为太小,而产生种种如图片的重复出现而破坏了整个页面的美感,想换成其它图片又不合适之类的麻烦情况吧。不过现在好了,大家只要用了以下的几个CSS里控制图片方法,那么你以后就不会再有此类的麻烦事发生了。

·图片是否重复显示 background-repeat
有时候重复显示是需要的,可是有时候重复显示则是让人头痛的,现在这个可以很好的帮助你了,而且它还可以帮你控制图片重复的方式(水平方向重复、垂直方向重复以及两个方向都有重复),而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x(水平方向铺开)、repeat-y(垂直方向铺开)、repeat(两个方向铺开)。当然,它可以控制图片的重复,也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片,而不是重复出现的,这个可不是默认的哟,默认的是重复显示背景图片(repeat)。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat}

·定位图片显示位置 background-position
一张背景图片经过上面的设置后往往还不够的,因为当你使用上面的不重复显示设置后,图片只显示在页面的左上角,而不会在其它地方,可是如果要在中间或者其它地方出现这张背景图片的话,那么background-position这个就可以帮你了,因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% 0%),由两个值来设定,中间用空格来隔开。它的主要的几个值有left|center|right和top|center|bottom,也可以用百分数值指定相对位置或用一个值来指定绝对位置,如50%表示的位置是在中心,而50px的水平值则表示图片距左上角区域水平移动50px单位;这里要特别指出的是,1当你设置值的时候只提供一个值,则相当于只指定水平位置,垂直自动设置为50%;2当你设置的值是负数的时候,则表示背景图片超出边界。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-position:100px 10px}

·控制图片是否滚动 background-attachment
上面的两步可以帮你完成图像的定位,可是这样做好以后还不是完美的,因为如果你的页面有滚动条的时候,那么你这张背景图片就不会永远定位在那个位置了,如果想要图片永远定位在那个位置,就只有让这张图片随着页面的内容的滚动而滚动,这时background-attachment就可以帮你了你只要加入scroll(静止)和fixed(滚动)中的其中一个就可以了。当然不是让你乱加的,毕竟scroll是默认的,也就是不让图片随页面的内容而滚动的。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-attachment:fixed}

好了,经过以上这番设置后,我相信你的背景一定会更美的,但是过多的代码往往可读性很差,容易让人产生错误,所以在这里我要告诉大家的就是可以把以上的代码全部加在一起使用,也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开,而且不要把背景颜色的代码放在背景图片的URL后面,以免图片显示不出来。
例:body{background:green url(file&:///C:/WINDOWS/BACKGRND.GIF) fixed 100px 50px no-repeat}

最后提醒一下大家,如果用代码直接插入的话,那么一定要放下面这个代码的里后再放在之间才能正常显示出来!

接下来我再介绍一下用DW4制作以上样式的方法,因为在DW中已经很详细的列出各项来了,具体的作用我也说明过了,所以就简要的介绍一下吧,只要大家能够明白就行了。
1.在此之前大家应该把CSS Styles这个窗口打开,如未打开的话,那么就按Shift+F11或者从Window下拉菜单中选择此项就可以了。
2.点击右键选择new style…这个选项或者点击下面的带有+号的图标。
3.在弹出的窗口中的选择如下,tag选择body因为我们上面介绍的CSS样式都是关于body的,而在这里我也只是介绍这个里面的background,其它的不要介绍内容之内;下面的type选择第二个;define也选择第二个,这样你呆会就可以在该文件中的之间找到一个了,而这里面的内容其实就是我上面介绍的。呵~_^
4.点击OK后弹出的窗口才是最重要的。我之前已说过,我们这次主要介绍的是background这个选项,所以在旁边的窗口中选中它吧。选中以后右边的窗口将会变成与它相关的设置项,具体的我在上面介绍过了,大家只要参照上面的介绍就可以完成了。不过需要说明一下的是在这个窗口中的最下面两项其实就是background-position中的水平方向垂直方向。
5.最后再点击OK就可以完成了。完成后你就可以在该页的代码(V
IEw下的Code选项)中找到它们了。

        1.管理工具->服务->Themes 设为auto

        2.打开 DirectX 的 D3D 硬件加速: 

        看桌面属性,设置 -> 高级 -> 疑难问答 -> 硬件加速 -> 完全。运行 dxdiag.exe,打开Display选项卡,可  看到 3 项全部启用了。最后,利用Windows updates在Windows Server 2003中安装DirectX 9.0a。   

        3. 启用声卡:

  系统安装后,声卡是禁止状态,所以要在 控制面板 -> 声音 -> 启用,重启之后再设置它在任务栏显示。

  现在我们还要启用音频加速。在运行中输入Services.msc然后按回车,会出现Services 窗口,找到

  Windows Audio服务,双击打开,把启动类型设置为Automatic,点击Apply,然后点击Start启动该服务。

  最后我们还要使用DirectX诊断工具,在运行中输入dxdiag并回车,打开Sound选项卡,把Hardware Sound Acceleration Level的滑块拖动到Full。

  4. 如何启用 ASP 支持:

  Windows Server 2003 默认安装,是不安装 IIS 6 的,需要另外安装。安装完 IIS 6,还需要单独开启对于 ASP 的支持。方法是:

  控制面板 -> 管理工具 -> Web服务扩展 -> Active Server Pages -> 允许。   

  5. 如何启用 XP 的主题:

  首先我们需要回到服务设置对话框启用Themes服务,在运行中输入Services.msc并按回车,找到并双击Themes这个服务,设置启动类型为Automatic,点击Apply后点Start打开这个服务。   

  6. 禁止关机时出现的关机理由选择项:

  开始 -> 运行 -> gpedit.msc -> Computer configuration -> Administrative Templates -> System -> Display shutdown event tracker -> 设置为 Disable。

  如果是中文版,则:gpedit.msc,计算机配置 -> 管理模板 -> 系统 -> 显示关机事件跟踪 -> 禁用。   

  7. 如何启用摄像机,摄像头或者扫描仪等设备:

  在运行中输入Services.msc并回车,找到并双击Windows Image Acquisition (WIA) 服务,设置启动类型为Automatic点击Apply后点击Start然后点击OK。   

  8. 在控制面板里显示全部组件:

  把 Windows\inf 目录中的 sysoc.inf 文件里的 "hide" 替换掉。   

  9. 禁用开机 CTRL+ALT+DEL:

  管理工具 -> Local Security Settings(本地安全策略) -> 本地策略 -> 安全选项 -> interactive logon: Do not require CTRL+ALT+DEL,禁用之。慎用!搞不好会进不去系统。

  注意:为系统安全起见,一开始设置时管理员的密码就不要留空。   

  10. 可用的杀毒软件和防火墙:

  Symantec Norton Antivirus Corporate 8.01

  Zone Alarm 3.7.159

  Norton Personal Firewall 2003  

  有些网友抱怨2003玩不起游戏,相信他们看过这篇文章应该可以玩了. 还有几点需要注意:   

  1 右键桌面/属性/设置/高级/疑难解答,将硬件加速设置为最高;   

  2 安装DiectX9.0,运行Dxdiag,将显示/声音中的所有能设置的都启动,主要是3D加速.   

  3 重新安装显卡最新驱动,在管理工具/服务中将显卡相关的服务启动(如NVIDIA类显卡安装42.30WHQL驱动,在服务中启动NVIDIA Driver Helper Service并将其高为自动).   

  4 在显卡的属性中进一步进行相关设置就可以了 。

来源:eNet论坛