CSS教程--asp.net教程 sortol.com http://www.sortol.com http://www.sortol.com/images/logo.gif CSS教程--asp.net教程网 http://www.sortol.com zh-cn www.sortol.com <![CDATA[ASP.NET 2.0中CSS失效的问题总结 ]]> 经常有人遇到ASP.NET 2.0（ASP.NET 1.x中可能是有效的）中CSS失效的问题，现将主要原因和解决方法罗列如下：
1，CSS文件路径不正确
这个问题属于Web开发中的基础问题，一般采用相对路径会出现这样的问题，或者样式文件写在了母版页里面，在内容页与母版页不在同一级目录下时会出现这样的问题。此时你要清楚Web中相对路径的规则，如果你不清楚，可以采用绝对路径的写法试试就知道是不是路径的问题了。
2，CSS规则写法错误
这个问题谁也帮不你，只能自己学习CSS的相关知识了。
3，文件编码问题
有时候，CSS样式放在aspx文件里有效，而放在独立的文件中无效，这样的问题如果不是路径问题，则就是编码问题造成的，可以将CSS文件用记事本打开，再另存为ANSI格式或者UTF-8格式即可。
4，权限问题
这种情况常见的现象是登录之前样式无效，登录之后才有效，这是典型的权限问题造成的。由于web.config配置了所有文件不允许匿名访问，才会出现这样的问题，解决方法就是将<location>标记将样式文件配置为允许匿名访问。例如： <configuration>
   <location path="允许匿名访问的文件夹名称或者文件路径">
      <system.web>
         <authorization>
            <allow users="?"/>
         </authorization>
      </system.web>
   </location>
</configuration>

 
5，单击按钮样式失效
这种情况最典型的原因是单击按钮事件里有类似Response.Write这样的语句，由于ASP.NET 2.0默认采用http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd文档类型定义，它就要求在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">的前面不能有任何输出。这种问题的解决方法是采用ClientScriptManager输出，或者采用Literal控件输出内容。
6，在ASP.NET 1.x里面起作用的样式到ASP.NET 2.0里面失效
这种问题一般仍然是xhtml1造成的，由于http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd的样式规则与以前的不同，如要加单位，例如width:200;现在要写成width:200px;这种问题的解决方法就是要明确加上单位。
7，脚本设置的样式无效
由于xhtml1.DTD要求有单位，因此在设置对象样式的数值时，仍然要加上单位，如obj.style.width = "200px"。下面的代码在Firefox了是无效的（不要抱怨Firefox麻烦） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="text/javascript">
  //<![CDATA[
  function SetHeight()
  {
    document.getElementById("x").style.height="200"
  }
  //]]>
  </script>
</head>
<body>
<div id="x" style="background:#DDD;height:auto;">测试</div>
<input type="button" value="设置" onclick="SetHeight()" />
</body>
</html>

尽管上面在IE中正常，但在Firefox里面则会出现问题。正确写法为  document.getElementById("x").style.height="200px"


  asp.net教程]]> <![CDATA[一个相当简单的网站横向导航菜单特效 ]]>

 
 
代码:
<script>
window.onload=function(){
  var li=document.getElementById("nav").getElementsByTagName("li");
  for(var i=0;i<li.length;i++){
    li[i].onmouseout=function(){
      this.style.backgroundColor="";
      }
    li[i].onmouseover=function(){
      this.style.backgroundColor="green";
      }
    }
  }
</script>
</head>
<body style="background-color: #5396a4; background-repeat:repeat-x" >
<style>
ul,li{ margin:0px; padding:0px;list-style-type: none;}
li{background-color:gray}
#nav{}
#nav li{ float:left; margin-left:10px; height:30px; padding-top:8px; width:80px; text-align:center; overflow:hidden;}
#nav li a { margin-top:5px;}
#nav span{display:none;}
#nav a{font-size:13px;font-weight: bold;color: #FFFFFF;text-decoration: none; display:block;}
#nav a:hover{ color:#7c7c7c;top:1px; left:1px; position:relative;}
#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FFFFFF;cursor:pointer; font-weight:bolder}
</style>
<div onmouseout="" onmouseover="" id="nav">
  <ul>
    <li><a href="#" >网站首页<span>网站首页</span></a></li>
    <li><a href="#">网站首页<span>网站首页</span></a></li>
    <li><a href="#" >网站首页<span>网站首页</span></a></li>
    <li><a href="#">网站首页<span>网站首页</span></a></li>
    <li><a href="#">网站首页<span>网站首页</span></a></li>
  </ul>
</div>
  asp.net教程]]> <![CDATA[CSS实现超过特定长度显示省略号的方法 ]]> ul {width:200px; margin:50px auto;} li {width:200px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} a {color:#03c; font-size:13px;} a:hover {color:#000;} 芭比娃娃色调照片，PS制xccccccccccccccccccccccc作过程 照片处理 PS轻松制作漂亮灿烂星空MM特效照
 
 
代码如下:
<STYLE type=text/css>
ul {width:200px; margin:50px auto;}
li {width:200px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</STYLE>

<UL>
<LI><A href="#l">芭比娃娃色调照片，PS制xccccccccccccccccccccccc作过程</A> </LI>
<LI><A href="#">照片处理 PS轻松制作漂亮灿烂星空MM特效照</A> </LI></UL>   asp.net教程]]> <![CDATA[一个用纯CSS制作的网页下拉菜单 ]]> Page 1a Page 1b Page 1c Page 1d Page 1e MENU 2
Page 2a Page 2b Page 2c Page 2d
 
 
代码如下:

<style type="text/css">
body {font-size:1%; color:#fff;} /*get rid of the IE bug that prints the the end of the !doctype */
.menu {display:none;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
p { color:#000; font-size:16px;}
</style>
<!--[if IE]>
 <style type="text/css">
 /*<![CDATA[*/
.holder {display:none;}
.menu {display:block;}
a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.outer:hover {color:#fff; background:#000; overflow:visible;}
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
a.inner:hover {background:#add;}
 /*]]>*/
 </style>
<![endif]-->
</head>
<body>
<div class="menu">
<a class="outer" href="page1.html">MENU 1
<table><tr><td>
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</td></tr></table>
</a>
<a class="outer" href="page1.html">MENU 2
<table><tr><td>
<a class="inner" href="page2a.html">Page 2a</a>
<a class="inner" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</td></tr></table>
</a>
</div>
<div class="holder">
MENU 1<br />
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</div>
<div class="holder">
MENU 2<br />
<a class="inner" href="page2a.html">Page 2a</a>
<a class="inner" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</div>
 
 
 
 
 
 
 
 
    asp.net教程]]> <![CDATA[CSS滤镜 ]]> 　　CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式： 　　 filter：filtername（parameters） 　　怎么样？是不是很简单，看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜属性选择符。
　　也就是说，只要您进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性，详细内容请看下表： 　　上面filter表达式中括号内的parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。
　　看了上面长长的列表，是不是觉得很困难呀？不要紧，我们接下来一个一个的介绍这些属性在CSS中是怎样实现的（很简单哟^_^）。 2、alpha属性 　　alpha是来设置透明度的。先来看一下它的表达格式： 　　filter：alpha（opacity=opcity，finishopacity=finishopacity，
　　style=style，startX=startX，startY=startY，finishX=finishX，
　　finishY=finishY） 　　哇，怎么这么长。是啊，不过这些参数都各有其用。
　　Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
　　Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
　　从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）： 　　实现上面这种效果的代码如下： 　　<html>
　　<head>
　　<title>alpha</title>
　　<style>//*定义CSS样式*//
　　<!--
　　div{position：absolute； left：50；top：70； width：150； }
　　//*定义DIV区域内的样式（位置为绝对定位，left、top、width的坐标）*//
　　　　img{position：absolute；top：20；left：40；
　　filter：alpha(opacity=80)}
　　//*定义图片的样式，绝对定位，滤镜属性是透明度为80*//
　　-->
　　</style>
　　</head>
　　<body>
　　<div>
　　<p style=“font-size：48；font-weight：bold；color：red；”>
　　Beautiful </p>//*定义字体属性，前景色为红色*//
　　</div>
　　<p><img src=“ss01076.jpg”> </p>
　　//*导入一张图片*//
　　</body>
　　</html> 　　如果在上面的代码中稍做改动，则将产生另外多种效果。我们只修改img的样式属性，把head中的Img样式属性代码改为如下所示： 　　img{position：absolute；top：20；left：40；
　　filter：alpha(opacity=0,finishopacity=100,
　　style=1,startx=0,starty=85,finishx=150,finishy=85);}
　 //*设置透明渐变效果，起始坐标，终止渐变坐标，并设置透明样式值（style=1）为　　　线形*// 　　这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果，点击缩略图可放大。 　　 　　　　　　Style=1　　　　　　　　Style=2　　　　　　　　Style=3 　　以上是CSS的Alpha滤镜属性的应用，具体应用还需要您自己找个例子练一练。
　　下一节我们将介绍blur（模糊）属性。 3、blur属性 　　假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。
　　先来看一下blur属性的表达式： 　　filter：blur（add=add，direction，strength=strength） 　　我们看到blur属性有三个参数：add、direction、strength。
　　Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。　　　Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表： 　　Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。
　　还是看一个例子吧。点击这里看效果　 　　看起来是不是有些像万花筒，在这个例子中加入了一些JavaScript的语句，代码如下： 　　<html>
　　　<head>
　　　<title>blur css</title>
　　　<script>
　　　function handlechange(obj)
　　　//*设置一个循环函数handlechange，对象是obj*//
　　　{ with(obj.filters(0))//*Obj的filter属性*//
　　　 { if (strength<255)//*设置循环条件*//
　　　　 { strength +=1；direction +=45；}
　　　　//*每循环一次strength就加1，direction加45度*// 　　　　　　　
　　　 }
　　　}
　　　</script>
　　　</head>
　　　<body>
　　　<p><img id =“img1” src=“ss01087.jpg” 　　　　　　　　
　　　　　style=“filter：blur(strength=1)”
　　　　　onfilterchange=“handlechange(this)”>
　　　//*导入一幅图片，初始blur属性strength等于1，同时调用onfilterchange函
　　　数*//
　　　</p>
　　　 </body>
　　</html> 　　注：在javascript中blur属性是这样定义的：
　　　　[oBlurfilter=] object.Filters.blur 　　这个例子是Blur属性的一个比较复杂的例子，下一节我将向您介绍两个较简单的blur属性效果。 　通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1，得出来的字体效果是这样的（如下图）： 　　怎么样，是不是有些印象派的意思，这种效果的实现代码如下： 　　<html>
　　　<head>
　　　<title>filter blur</title>
　　　<style>//*CSS样式定义开始*//
　　　<!--
　　　div{width：200；
　　　filter：blur(add=true,direction=90,strength=25)；}
　　　//*设置DIV样式，滤镜blur属性*//
　　　 -->
　　　</style>
　　　</head>
　　　<body>
　　　<div style=“width:702； height: 288”>
　　　<p style=“font-family:lucida handwirting italic；
　　　 font-size:72；font-style:bold；color:rgb(55,72,145)；” >
　　　 LEAF</p>
　　　//*定义字体名称、大小、样式、前景色*//
　　　</div>
　　　</body>
　　</html> 　　我们看到strength设置为25，如果把其值再改大一些，就会达到非常夸张的效果，同时把Direction参数值为180，显示效果如下图： 　　用blur属性设置字体可以达到很多效果，把direction和strength再做修改，还能达到多种效果，您可以自己修改试一试。
　　这一节我们介绍了Blur属性，下一节将向您介绍Chroma属性。 4、Chroma属性 　　Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下： 　　Filter：Chroma（color=color） 　　这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图： 　　图中显示两种字体，两种颜色，我们现在对“leaves”字体添加chroma属性，使其透明。代码如下： 　　<html>
　　　<head>
　　　<title>chroma filter</title>
　　　<style>
　　　<!--
　　　 div{position：absolute；top：70；width：200；
　　　　　 filter：chroma(color=green)}
　　　//*定义DIV范围内绿色为透明色，另外设置DIV的位置*//
　　　p{font-family：bailey；font-size：48；font-weight：bold；
　　　color：green} //*设置P的字体名称、大小、粗细、颜色*//
　　　em{font-family:lucida handwriting italic；font-size:48；
　　　font-weight：bold；color：rgb(255,51,153)}
　　 //*设置EM的字体名称、大小、粗细、颜色*//
　　　-->
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p>LEAVES <em>LOVE</em></p>
　　　</div>
　　　</body>
　　</html> 　　通过上面代码中对chroma的属性设置，使绿色透明。显示效果如下图： 　　我们看到绿色的leaves字体不见了，实际上它是透明了，在IE下点击它所在的区域，它还是会显示出来（见下图）： 　　另外，需要注意的是，chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有固定的位置可以设置为透明。 　　本节我们讲述了chroma属性的应用，下一节将向您介绍Dropshadow属性。 5、DropShadow属性 　　DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式： 　　Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
　　　　　　　　　　　　Positive=positive） 　　该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。
　　Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。
　　同样，我们先来看一个例子（见下图）： 　　看，图中的文字就像是从页面上飞出来一样，并且留下了一层淡淡的影子。
　　实际上在这里应用的就是CSS的DropShadow属性，我们来看一下它的代码： 　　<html>
　　　<head>
　　　<title>dropshadow </title>
　　　<style>//*定义CSS样式*//
　　　<!--
　　　div {position:absolute；top:20；width:300；
　　　filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1)；}
　　　 -->
　　　//*定义DIV范围内的样式，绝对定位，投影的颜色为#FFCCFF，
　　　 投影坐标为向右偏移15个像素，向下偏移10个像素*//
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p style=“font-family：matisse itc；font-size：64；
　　　　　　　　font-weight：bold；color：#CC00CC；”>
　　　//*定义字体名称、大小、粗细、颜色*//
　　　Love Leaf </p>
　　 </div>
　　 </body>
　　 </html> 　　和chroma属性一样，Dropshadow属性对图象的支持不好，我指的是JPEG、GIF格式的图象文件。
　　不能支持的原因与Chroma一样，因为这种图象的颜色很丰富，很难找到一个投射阴影的位置。 　　本节讲述了Dropshadow属性的应用，下一节将向您介绍FlipH、FlipV的属性应用 　6、FlipH、FlipV属性 　　Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是： 　　Filter：FlipH 　　Filter：FlipV 　　我们先来看一幅图：点击可放大 　　下面我们分别对它实现水平翻转和垂直翻转，并且在图片上方的一段文字，也发生翻转。代码如下： 　　<html>
　　　<head>
　　　<title>flip css</title>
　　　<style>//*设置CSS样式开始*//
　　　<!--
　　　div{position：absolute；top：20；width：300；
　　　　　filter：fliph（flipv）；}
　　　//*定义DIV范围内的样式，绝对定位，翻转为水平翻转或垂直翻转。
　　　 注意：在这里fliph和flipv只取其中的一个*//
　　 img{position：absolute；top：70；left：40；
　　　　 filter：fliph（flipv）；}
　　　//*定义图片的样式，绝对定位，翻转属性和DIV一样。*//
　　　 -->
　　 </style>
　　 </head>
　　　<body>
　　　<div>
　　　<p style=“font-family：bailey；font-size：36pt；
　　　　　　　　　font-weight：bold； color：rgb(10,128,156)；”>
　　　 Leaf Village </p>
　　 //*定义字体名称、大小、粗细、颜色*//
　　 </div>
　　 <p><img src=“ss05058.jpg”></p>
　　 //*导入一张图片*//
　　 </body>
　　</html> 　　代码产生的两个效果分别如下图：（点击可以放大） 　　　　　　　　　　　　　 　　　　　　　　水平翻转　　　　　　　　　　　　　　　　垂直翻转 　　翻转的属性应用是不是很简单。下一节我将向您介绍Glow属性。   8、Glow属性 　　当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下： 　　Filter：Glow（Color=color，Strength=strength） 　　Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。 让我们先来看一下加上Glow属性的效果图： 　　怎么样，是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下： 　　<html>
　　　 <head>
　　　 <title>filter glow</title>
　　　 <style>//*开始设置CSS样式*//
　　　 <!--
　　　　.leaf{position：absolute； top：20； width：400；
　　　　　　　filter：glow(color=#FF3399,strength=15)；}
　　　 //*设置类leaf，绝对定位，Glow滤镜属性，发光颜色值为#FF3399，强度为
　　　 15*//
　　　　.weny{position：absolute； top：70； left：50； width：300；
　　　　　　　filter：glow(color=#9966CC,strength=10)；}
　　　 //*设置类weny，绝对定位，glow滤镜属性，发光颜色值为#9966CC，强度为
　　　 15*//
　　　　-->
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div class=“leaf”>//*leaf类样式*//
　　　 <p style=“font-family：lucida handwriting；
　　　　　　　　　font-size：54pt；font-weight：bold；color：#003366；”>
　　　　Leaf Mylove</p>//*设置字体名称、大小、粗细、颜色*//
　　　 </div>
　　　 <div class=“weny”>//*weny类样式*//
　　　 <p style=“font-family：bailey； font-size：48pt；
　　　　　　　　　font-weight：bold；color：#99CC66；”>
　　　 //设置字体名称、大小、粗细、颜色*//
　　　 Weny Good!</p>
　　　 </div>
　　　 </body>
　　</html> 　　您还可以随意修改颜色值，看看其他的发光效果是怎样的。
　　本节主要讲了Glow属性的应用，下一节将向您介绍Gray属性。 7、Gray属性 　　Gray属性把一张图片变成灰度图。它的表达式很简单： 　　Filter：Gray 　　其实这个属性没什么好讲的，只需在您定义的IMG样式中加入一句代码： 　　{Filter：Gray}就一切OK了。
　　下面两幅图分别代表未加Gray属性和添加了Gray属性的效果： 这是原图，点击可放大 转成gray属性后的效果图 　　本节讲述的内容比较简单，下一节将向您介绍Invert转化属性。 　9、Invert属性 　　Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。
　　它的表达式也很简单： 　　Filter：Invert 　　我们再来看一下加上Invert属性前后的图片效果变化（如下图）： 　　　　　　　　　　　　　　 　　　　　　　　原图　　　　　　　　　　　　　　　 Invert属性效果图
　　　　　　（点击可放大） 　　　　　　　　　　　　　（点击可放大） 　　我们看到Invert属性实际上达到的是一种“底片”的效果。
　　自己拿别的图来试试吧。 本节介绍的是Invert属性，下一节将向您介绍Mask属性。
  10、Mask属性 　　Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单： 　　Filter：Mask（Color=颜色） 　　只有一个Color参数，用来指定使用什么颜色作为掩膜。
　　同样，我们来看一下一幅图片在加上mask属性前后的效果（见下图）： 原　图 Mask属性效果图 　　 加上MASK属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下： 　　<html>
　　　 <head>
　　　 <title> mask filter </title>
　　　 <style>//*设置CSS样式开始*//
　　　 <!--
　　　　div{position：absolute；top：20；left：40；
　　　　filter：mask(color：#666699)；}
　　　 //*定义DIV区域的样式，绝对定位，mask属性的color参数值指定用什么颜色遮
　　　 住对象*//
　　　　p{font-family：bailey；font-size：72pt；
　　　　　font-weight：bold；color：#FF9900；}
　　　 //*定义P区域内的样式，字体名称、大小、粗细、前景色*//
　　　　-->
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div>
　　　 <p> wenyleaf </p>
　　　 </div>
　　　 </body>
　　</html> 　　其实，您就算在代码中去掉对字体前景色的定义，得到的效果还是一样的。因为有了Mask属性的定义，它遮罩下的字体颜色的设置就已经失去了意义。
　　还有一点需要您注意的地方，mask属性对图片文件的支持还是不够，不能达到应该有的效果。
　　本节讲解了Mask属性的应用，下一节将向您介绍Shadow（阴影）属性。 11、Shadow属性 　　Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的： 　　Filter：Shadow（Color=color，Direction=direction） 　　在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。
　　这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。 　　也许您会问，前面讲到的Dropshadow属性和Shadow属性有什么不同吗？
　　光说的话，您恐怕还难以理解，让我们看一看分别利用这两个属性做出来的效果有什么不同（见下图）： 　 　　　　　　　　　Shadow效果　　　　　　　　Dropshadow效果 　　这样一对比，就可以很明显的看出两者的不同。
　　Shadow属性可以在任意角度进行投射阴影，Dropshadow属性实际上是用偏移来定义阴影的。所以，看上去左图的文字和阴影就像是一体的，而右图的文字就像脱离了阴影一样。
　　本例的代码如下： 　　<html>
　　　<head>
　　　<title> shadow</title>
　　　<style>//*开始设置CSS样式*//
　　　<!--
　　　.shadow{position:absolute；top:20；width:300；
　　　　　　　filter:shadow(color=#cc66ff,direction=225)；}
　　　//*定义Shadow类的样式，绝对定位，Shadow属性，阴影颜色、投影方向*//
　　　　.dropshadow{position:absolute；top:180；width:300；
　　　　filter:dropshadow(color=#cc66ff,offx=10,offy=10,positive=1)；}
　　　//*设置Dropshadow类的样式，样式与Shadow类相似， 不同的是滤镜用了
　　　Dropshadow属性，设置X轴和Y轴的偏移量*//
　　　-->
　　 </style>
　　 </head>
　　 <body>
　　 <div class=“shadow”>//*区域内为Shadow类*//
　　 <p style=“font-family：bailey；font-size：48pt；
　　　　　　　　font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定义字体名称、大小、粗细、前景色*//
　　　</div>
　　　<div class=“dropshadow”>//*区域内为Dropshadow类*//
　　　<p style=“font-family：bailey；font-size：48pt；
　　　　　　　　 font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定义字体样式与Shadow类的一样*//
　　　</div>
　　　</body>
　　</html> 　　本节讲述了Shadow属性的应用，下一节将向您介绍Wave（波纹）属性。 　 　12、Wave属性 　　Wave属性用来把对象按照垂直的波纹样式打乱。它的表达式如下： 　　Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，
　　　　　　Phase=偏移量，Strength=强度） 　　我们看到Wave属性的表达式还是比较复杂的，它一共有五个参数。Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；
　　Freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。 　　LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。 　　　Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360*25%）的方向开始。
　　说了一大堆，我们还是先看一个实例吧。比如下面这幅图片（点击可放大）： 　　下面我们对上面这个页面加上Wave效果，代码如下： 　　<html>
　　　<head>
　　　<title> wave css</title>
　　　<style>//*定义CSS 样式开始*//
　　　<!--
　　　 .leaf{position:absolute；top:10；width:300；
　　　　　　 filter:wave(add=true,freq=3,lightstrength=100,
　　　　　　　　 　 phase=45,strength=20)；} 　　　　
　　　//*设置leaf类的样式，绝对定位，wave属性，产生3个波纹， 光强为100，波纹
　　　从162度（360*45%）开始，振幅为20*//
　　　img{position:absolute;top:110;left:40;
　　　　　filter:wave(add=true,freq=3,lightstrength=100,
　　 　　　　　　　phase=25,strength=5)；} 　　　　　
　　 //*设置IMG的样式，绝对定位，wave属性，产生3个波纹，光强为100，波纹从
　　 90度开始，振幅为5*//
　　　-->
　　　</style>
　　　</head>
　　　<body>
　　　<div class=“wave”>//*定义DIV区域内为Wave类*//
　　　<p style=“font-family：lucida handwriting；
　　　　　　　font-size=72pt； font-weight：bold；
　　　　　　　color：rgb(189,1,64)；”>Leaf</p>
　　　//*设置字体名称、大小、粗细、颜色*//
　　　</div>
　　　<p><img src=“ss01044.jpg”></p> //*导入图片*// 　　　
　　</body>
　　</html> 　　这段代码实现的效果如下图： 　　如果把Wave的参数随便做一下改动，就会达到多种效果，请看另外一种效果：（如下图）： 　　其实这种效果只是增大了freq参数的值，减小了Strength、LightStrength的值就可以了。您也可以多试试，改变其他的参数值，还可以达到许多不同的效果来。
　　本节主要讲述了Wave属性的应用，下一节将向您介绍Xray属性。 13、Xray属性 　　Xray就是X射线的意思。
　　Xray属性，顾名思义，这种属性产生的效果就是使对象看上去有一种X光片的感觉。 它的表达式很简单： 　　Filter：Xray 　　我们还是先来看一个页面（如下图）： 点击可放大 　　如果在上面的页面中加入Xray属性，也就是在<head>的<Style>中，增添下面这一句代码： 　　Filter：Xray 　　您再看这个页面就会是另一种效果了：（如下图） 点击可放大 　　看，是不是就像给它拍了一张X光片一样。   asp.net教程]]> <![CDATA[CSS定位 动态转换 空间定位 ]]> 　　另外，在讲解之前，我们首先介绍两个定义：相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。
　　实现CSS的定位最终还是要靠属性。我们来看一下定位属性的详细列表（见下图）： 　　我们在下面举一个例子，其中带了一点Script的内容，我们来看看它是如何实现动态显示的。讲解之前我们还是先看一下这个例子的效果吧，请点击这里
　　看，通过简单的CSS定位实现了颇具动感的效果。这种效果的代码如下： 　　<html>
　　　<head>
　　　<title>dingwei css</title>
　　　<style type=“text/css”>
　　　<!--
　　　 #container1{position：absolute；top：100}
　　　 //*定义container1 为绝对位置*//
　　　 #container2{position：absolute；top：100；visibility：hidden；}
　　　　//*定义container2为绝对定位，初始可见度为hidden（隐藏）*//
　　　 p{font-size：12pt；}//*定义p的字体*//
　　　 -->
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <p style=“font-family:行书体；font-size:15pt；color:#cc33cc”>
　　　 请选择一幅图片： </p>//*设置字体大小、名称、颜色*//
　　　 <div id=“container1”>
　　　 <dd><img src=“ss01065.jpg” width=“185”height=“280”>
　　　//*导入一张图片，标识符为container1*//
　　　 <p style=“font-family:行书体；color:#cc9933；font-size:12pt”>
　　　 　名称：大漠</p>//*设置字体名称、颜色、大小*//
　　　 </dd>
　　　 </div>
　　　 <div id=“container2”>
　　　 <dd><img src=“ss01095.jpg” width=“185”height=“280”>
　　　//*导入另一种图片，标识符为container2*//
　　　 <p style=“font-family:行书体；color:#3366cc；font-size:12pt”>
　　　　　名称： 大海</p>
　　　 </dd>
　　　 </div>
　　　 <form name=“myform”>//*定义两个按钮*//
　　　 <p><input type=“button” value=“大漠” 　　　　　
　　　　onclick=“container1.style.visibility=‘visible’；
　　　　container2.style.visibility=‘hidden’”>
　　　 //*定义鼠标点击事件图片1为可见，图片2为不可见*//
　　　 <input type=“button” value=“大海”；
　　　　container1.style.visibility=‘hidden’；
　　　　onclick=“container2.style.visibility=‘visible’；
　　　　container1.style.visibility=‘hidden’”></p>
　　　　//*定义鼠标点击事件图片1为不可见，图片2为可见*//
　　　　</form>
　　　　</body>
　　</html> 　　 2.空间定位 　　在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。
　　我们看到例子中的两幅图片和一段文字分别处于不同的空间位置，文字覆盖在那朵花的图片上，而挥动小旗的小老鼠却又覆盖在文字的上面。那么这种效果是怎样实现的呢？这里利用了CSS定位的z-index属性，代码如下： 　　<html>
　　　 <head>
　　　 <title>zindex</title>
　　　 <style type=“text/css”>
　　　 <!-- 　　　　　　　　　　　　　　　　　　
　　　　.pile｛position:absolute；left:2in；top:2in；
　　　　width:3in；height:3in；｝//*定义了类pile，以及它的位置*//
　　　　.pile1{position:absolute；left:3in；top:2in；
　　　　width:1in；height:1in；} //*定义了类pile1，以及它的位置*//
　　　　-->
　　　　</style>
　　　　</head>
　　　　<body>
　　　　<img src=“ss01010.jpg” class=“pile” id=“image”
　　　　 style=“z-index:1”>
　　　　 //*导入一张图片，使它为pile类，z-index属性定义为１，位置处于最下方
　　　　　　*//
　　　　<div class=“pile” id=“text1”
　　　　style=“color:#ffff33;z-index:2” > 这段文字将覆盖在图片上。
　　　　</div>//*定义一段文字的颜色和z-index属性为2，处于中间位置*//
　　　　<img src=“075.gif” class=“pile1” id=“image”
　　　　style=“z-index:3”>
　　　　 //*导入第二张图片，使它为“pile1”类，z-index属性为3，位置处于最上
　　　　　　方*//
　　　　</body>
　　</html>  
　　利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。   asp.net教程]]> <![CDATA[分级属性 鼠标属性 ]]> 　　在html中，您无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色和边距、填充距等进行初始化。因为在CSS中，已经提供了进行分级的专用分级属性。
　　分级属性包括了“list-style”（列表样式）、“list-item”（列表项）等多种属性，我们先来看一下分级属性的详细列表： 　　下面我们来看一个分级属性的例子，代码如下所示： 　　<html>
　　<head>
　　<title> fenji css </title>
　　<style type=“text/css”>//*定义CSS*//
　　<!--
　　p{display：block；white-space：normal}
　　//*定义显示属性为“block”，意思是在新的区域里显示； white-space的属性
　　　normal使多重空白合成为一个*//
　　em{display：inline}
　　//*定义EM的显示属性为“inline” 目的是为了其控制下的文本显示中不折行*//
　　li{display：list-item；list-style：square}
　　//*定义li的显示属性为“list-item”，显示在列表项中加入一个符号标记， 而
　　list-style属性值定义为square使列表项前的标记为方块*//
　　img{display：block} //*定义图片属性为block使图片在新的位置打开*//
　　 -->
　　</style>
　　</head>
　　<body>
　　 <p><em>sample</em>text<em>sample</em>text<em>sample</em>
　　 text<em>sample</em> text<em>sample</em></p>//*定义一段文本*//
　　　<ul>//*定义列表项*// <li>list-item 1</li>
　　　<li>list-item 2</li> <li>list-item 3</li> </ul>
　　 <p><img src=“ss01068.jpg” width=“280”height=“185”
　　　　　　　　　　alt=“invisible”></p>//*定义一幅图片*//
　　 </body>
　　 </html> 　　上段代码的显示效果如下图： 　　我们看到由于定义了<p>的属性为Block，所以文本、列表、图片都在不同的位置上打开，Inline属性使文本不折行，list-style-type的属性值为square使列表项前的符号为方块；
　　如果我们在上面的代码中做一些改动，则将以另一种效果显示，我们在<head>中把“EM”的display属性值改为block，使其都在新的位置打开；li的“list-style”属性值改为“Upper-roman”（大写罗马符号），img的“display”属性值改为 “none”（让图片不显示）。 修改后的显示效果如下图： 　　我们看到分级属性也能达到排版的部分功能，几处代码的改动就可以使页面发生很大的变化。自己来试一试其他的效果吧！ 6、鼠标属性 　　我们知道，当把鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生改变。
　　用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。
　　在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，我们来看一下它的详细列表： 　　我们来看一个例子吧，请看下面这段代码： 　　<html>
　　　 <head>
　　　 <title>changemouse</title>
　　　 </head>
　　　 <body>
　　　 <h1 style=“font-family:文鼎新艺体简”>鼠标效果</h1>//*设置字体*//
　　　 <p style=“font-family:行书体；font-size:16pt；color:red”>
　　　 请把鼠标移到相应的位置观看效果。</p>//*设置字体的名称、大小、颜色*//
　　　 <div style=“font-family:行书体；font-size:24pt；color:green；”>
　　　　//*设置该区域内的字体名称、大小、绿色*//
　　　　<p><span style=“cursor:hand”>手的形状</span><br>
　　　　 //*设置鼠标属性为手的形状*//
　　　　<span style=“cursor:move”>移动</span><br>//*设置鼠标属性为移动*//
　　　　<span style=“cursor:ne-resize”>反方向</span><br>
　　　　//*设置鼠标属性为反方向*//
　　　　<span style=“cursor:wait”>等待</span><br>//*设置鼠标属性为等待*//
　　　　<span style=“cursor:help”>求助</span>//*设置鼠标属性为求助*//
　　　　</p>
　　　　</div>
　　　　</body>
　　</html>   asp.net教程]]> <![CDATA[容器 边距 填充距 边框 图文混排 ]]> 　　您想，网页中的内容肯定是都需要“装”进这个“容器”里。“容器”属性是CSS中非常重要的一种属性，我们将分类进行学习。
　　先来看一下边距属性的详细列表： 　　和font属性一样，表中的四个属性可以用一个属性一次。边距顺序是上、右、下、左。我们还是用定义边距属性前后的两个例子来看一下吧。请看下面的这幅图： 　　我们看到上图是没有加上边距属性的效果，而下图则在<head>中加入了如下代码： 　　body{margin：1em 2em 3em 4em}
　　//*定义文本的上、右、下、左的边距分别为1、2、3、4em*// 　　产生的效果如下图所示： 　　定义了边距后的页面，无论您怎么改变窗口的大小，它都会按照您定义好的边距样式显示。 　　如果在margin里有缺失的属性，则按照顺序依次排列。比如： 　　body{margin：1em 3em} 上面这段代码的含义是：body的上、右边距为1、3em。   ※填充距属性 　　本节我将向您介绍填充距属性。我们先来看一下填充距的属性列表： 　　首先我们得先了解什么叫填充距，它与边距有什么差别呢？填充距指的是文本边框与文本之间的距离。
　　这样讲是不是有些难懂，由于填充距属性与margin一样，都有一个一次定义的属性：padding，所以我们举个例子，看一下到底什么叫填充距，请看下图： 　　我们看到上图中红框圈住的地方就是填充距起作用的部分。实际上上图的效果只是在上一节例子的<head>中把下面这段代码加入到Body定义的margin后面： 　　padding：1em 2em 3em 4em 　　从上可以看出，红框标记外的部分属于margin属性在起作用。 ※边框属性 　　本节我们来看一下种类繁多的边框属性，先来看一下属性列表： 　　 是不是看上去很多，其实应用起来很方便。
　　 只要灵活的运用一次定义的属性就会方便很多。其实还有一个一次设置所有边框的宽度、样式和颜色属性的border属性，但是border只能使四条边框的属性值是一样的。我们现在来给前面的例子设置一个5像素宽、双边框并且是紫色的边框（如下图）： 　　这就是在<head>中定义<p>的属性，代码如下： 　　P{border：5px double purple}//*定义了四条边框为一样的值*// ※图文混排 　　我们在来看看“容器”属性还有什么其他的属性，请看属性列表： 　　上表中的float属性很有意思，我们看看用它作的一个页面效果（如下图）： 　　您是不是以为在图片那里插入了一个表格才实现这种图文混排的效果的呢？
　　其实不是的，在这里只是在<head>中定义了一下<img>的float和margin属性，代码如下： 　　　<html>
　　　<title>margin css</title>
　　　<head>
　　　<style>
　　　<!--
　　　 img{margin-right：2em；float：left}
　　　 //*定义图片的右边距为2em，图片浮动在文字的左边*//
　　　 -->
　　　</style>
　　　</head>
　　　<body>
　　　<p class=“p2” style=“line-height：17pt”>
　　　<img src=“logo.gif” alt=“floating” > 　　
　　　　　 我公司是一家以软件开发及销售为主业的高新技术企业。 位于高科技产业
　　　　密集的清华大学东门，拥有近4000平米的独立办公楼，全体员工年轻勤奋而富
　　　　有创造力，极具挑战性和竞争性。</p>
　　　</body>
　　　</html> 　　怎么样，不用表格也能实现图文混排的效果，并且减少了大量的代码。您还可以试试float的其他效果。
　　好了，“容器”属性就讲这么多，我们可以看出，充分利用CSS的“容器”属性，将会使您的页面布局更加合理，样式更加漂亮。下一节我将向您介绍分级属性。   asp.net教程]]> <![CDATA[怎样编写CSS？ ]]> 　　您可以用任何一种文本编辑工具来编写。比如Windows下的记事本和写字板、专门的HTML文本编辑工具（Frontpage、Ultraedit等），都可以用来编辑CSS文档。
　　那么您可能会问，独立编辑好的CSS文档怎样加入到HTML文档中呢？其实在第一章中的例子里已经介绍了两种方法。
　　一种是把CSS文档放到<head>文档中：
　　<style type=“text/css”> …… </style>
　　其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单的。
　　另一种方法是把CSS样式表写在HTML的行内，比如下面的代码：
　　<p style=“font-size：14pt；color：blue”>蓝色14号文字</p>
　　这是采用<Style=“ ”>的格式把样式写在html中的任意行内，这样比较方便灵活。 　　还有一种方法是：把您编辑好的CSS文档保存成“.CSS”文件，然后在<head>中定义。定义的格式是这样的：
　　<head> <link rel=stylesheet href=“style.css”> …… </head>
　　我们看到这里应用了一个<Link>，“rel=stylesheet”指连接的元素是一个样式表（stylesheet）文档。一般这里是不需要您改动的。
　　而后面的“href=‘style.css’”指的是需要连接的文件地址。您只需把编辑好的“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式，从而减少了大量的冗余代码。 　　本章主要介绍了编写CSS的方法以及如何把作好的CSS文档与HTML结合起来运用。您可以根据自己编写的HTML代码的结构、长度来选择用哪一种方法将CSS与之结合。
　　下一章我们将进入CSS的具体知识的学习，我们将先从最基本的属性开始讲起。   asp.net教程]]> <![CDATA[CSS快速入门 ]]> 　　　　　　　　　　　 　　　
　　　　　　　　　　图1 　　　 　　　　　　　　　　　　图2 　　看到上面的两幅图片，您可能会认为这是用photoshop或者是其他图形处理软件制作的吧。可是上面的例子却完全是用CSS编写的。我们来看一下它的源代码（不要以为讲代码您会搞不懂，很简单的^_^）： 　　<html>
　　　<head>
　　　　<title>css word</title>
　 　　　　<style>//*CSS样式定义开始*//
　　　　　 <!--
　　　　　 div
　　　　 　{width：200; filter　　　　　　　　　　　　　　　　　　　　　　　　　　　　　blur(add=true,direction=135,strengh=20);
　　　　　　} //*定义DIV范围内的样式，包括宽度(width)、模糊滤镜属性(blur)*// 　　　　　　-->
　　　　　 </style>//*样式定义结束*//
　　 </head>
　　 <body>
　　 <div>//*以下的区域内采用<head>中<style>里面定义的格式*//
　　 <p style="font-size：48;font-style：bold;
　　 color:red;">hongen </p>
　　 //*定义字体样式(font-style)，包括字体大小(size)、粗细(bold)、颜色　　　　　　　(color)*//
　　 </div>
　　 </body>
　 </html> 　　上面的代码中以红色显示的是注释部分，用于帮助您更好的理解代码的含义。上面的这一段代码产生的是如图2的效果。而其中字体的模糊效果就是运用了CSS的滤镜功能。滤镜功能是CSS非常有趣也非常吸引人的一个功能，我们将在后面的章节中介绍。 　　实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的：
　　选择符{属性：属性值}
　　看，是不是很简单，只有三部分。 　　我们结合上面的代码来讲解，比如上面代码的<head>…</head>中，使用<style>来指定样式。
　　一般说来，<style>下面的CSS语句是以注释语句的形式书写的，也就是上面代码中的<!-- … -->符号包含的部分。所以，上面的例子中定义页面样式的语句是：
　　div{width：200;filter：blur(add=true,direction=35,strengh=20);}
　　在上面的语句中，DIV是选择符，选择符可以是HTML中任何的标识符，比如P、DIV、IMG甚至BODY都可以作为选择符。
　　这里用DIV做选择符，就是说在HTML中，编辑在<DIV>中的页面格式将以上面语句中大括号内定义的格式显示。
　　括号内的WIDTH和FILTER就是属性。
　　WIDTH定义了DIV区域内的页面的宽度，200是属性值。
　　FILTER定义了滤镜属性，BLUR是它的属性值，该属性值产生的是一种模糊效果，其小括号内定义的是BLUR属性值的一些参数。
　　ADD参数有两个值：True和False。分别指定图片是否被设置成模糊效果。
　　Direction参数是用来设置模糊的方向。0度代表垂直向上，然后每45度一个单位，例子中的135代表底部向右135度，每一个度数单位都代表一个模糊方向，如果您感兴趣的话，可以参照后面的讲解中详细的参数设定。
　　Strengh代表有多少像素的宽度将受到模糊影响，参数值是用整数来设置的。 　　我们看到除了在<HEAD>中有CSS 的定义，在<BODY>中也有一段CSS定义：
　　<p style=“font-size：48;font-style：bold;color：red;”>hongen</p>
　　这里Style是内嵌到<P>中来定义该段落内的格式的。我们发现在<BODY>中的CSS语句与定义在<HEAD>中还有些不同，它是用< STYLE = >直接定义的。这种定义方法非常适用于编写的代码比较多的情况。
　　而上面的代码的CSS定义格式则非常适用于代码较少、结构较简单的情况。
　　按照CSS语句的基本格式，我们可以看出上面定义P段落内的CSS代码中font-size、font-style和color是属性，分别定义<P>中“hongen”字体的大小(size)、样式(style)和颜色(color)；
　　而48、bold、red是属性值。意思是“hongen”将以48pt、粗体、红色的样式显示。由于整个段落是定义在<DIV>中的，所以hongen又将显示出<head>中定义的滤镜属性来。最终的结果就如同图2一样。
　　图1中的效果也是用很简单的CSS语句实现的，只是运用了CSS中的滤镜属性而已。 　　通过上面的讲解，我们可以看到用很简单的CSS语句就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式；利用定位可以使页面布局更加规范、好看；利用滤镜可以使页面产生多媒体效果。 怎么样，CSS的功能是不是很强大，在下面的教程中我们将对它进行详细的讲解。   asp.net教程]]>