对容器(tag)而言的，那么在HTML 中，Anchor(锚，即超级链接标记)是一类作用非常之大的容器。它实现了HTML最根本的功能（超文本，超链接）。而CSS也有关于Anchor的一些特殊用法。使得页面的联接更紧凑，更富有条理。

　　 跟其它的tag一样，Anchor的定义方法也可以是：

　　 　　 A:{css标记}

　　可是它特殊之处在于，它有各种相关的属性，比如visited(浏览过)，active(激活)，hover(鼠标在其上)，link（有链接）。可以根据不同需要而做出专门的定义以根据用户不同的动作做出反应，从而形成比较好的效果。

　　比如说，您可以做以下的定义：

< html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< style type="text/css">
< !-- a:active {  font-family: "宋体"; font-size: 9pt; color: #9999FF; text-decoration: underline}a:hover {  font-family: "宋体"; font-size: 9pt; color: #99FF99; text-decoration: underline}a:link {  font-family: "宋体"; font-size: 9pt; color: #FFCCCC; text-decoration: none}-->
< /style>
< /head>
< body bgcolor="#000000">
< a href="www.www.www">返回< /a>
< /body>
< /html>

图一	图二

　　在这个例子中，定义了锚的active,hover,link三种状态。当例子中存在着超级链接时，就会呈现出如图一的没有下划线的淡红，而将鼠标置于其上时，鼠标变成了手形，而这个链接则会呈现出如图二的亮绿色。而一旦访问过后，该链接则会呈现出深红色。这种变化既美观了页面，又提醒了用户。为绝大多数网站采用。

　　事实上，有很多时候我们在没有使用锚的时候也需要对象根据用户的动作作一些改变。这时候我们往往需要当用户控制鼠标经过该对象时，能够给他一些提示。比如鼠标换个形状。像手形，十字形之类的，再结合必要的javascript，不就可以出现很炫的效果了吗？而且很多时候使用了锚的话容易改变当前焦点。比如当我们使用到Dhtml中的层概念时，如果是层是不可见的，利用锚将其改为可视，可一旦鼠标移上去以后，焦点马上到了层的上面，令大家感到非常不方便。不过，css里面刚好有这个属性，可以帮我们改变鼠标属性，解除这个烦恼。我们现在就看这个例子：

< html>
< head>
< title>测试一< /title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< style type="text/css">
< !-- .text1 {  font-family: "宋体"; font-size: 9pt; color: #9999FF; cursor: crosshair}
-->
< /style>
< /head>
< body bgcolor="#FFFFFF">
< p align="center" class="text1" onClick="javascript:{window.close()}">关闭窗口< /p>
< /body>
< /html>

　　这里的关闭窗口的这个文字鼠标属性为一个十字，所以当移上去时，鼠标就变化为十字形。而点击它则会出现关闭窗口事件。

这个属性能使用的鼠标形状还有：

crosshair:十字；

hand:手形；

text:文本光标；

wait:沙漏；

help:问号；

e-resize:右箭头；

ne-resize:右上向箭头；

n-resize:向上箭头；

nw-resize:左上箭头；

w-resize:向左箭头；

sw-resize:左下箭头；

s-resize:向下箭头；

se-resize:右下箭头。

1.阴影过滤器

　　 具体的用法就是，在css描述符号({})内，加入阴影过滤器名和它该有的值。格式如下：
{FILTER:DropShadow(Color=color,OffX=offx,OffY=offy,Positive=positive) 其中参数的含义为：
color 颜色
Direction 阴影方向。方向角度的表示是从垂直方向开始，按顺时针方向，以45度为单位逐渐递增，缺省为225度。
参数描述：
Color 十六进制RGB色彩值
OffX 可视化对象沿X轴的阴影偏移量，正值为右，负值为左
OffY 可视化对象沿Y轴的阴影偏移量，正值为下，负值为上
Positive 布尔值。缺省为非零值，表示用不透明像素创建阴影；假值(零值)使用透明像素创建阴影。

　　 2.α-过滤器

　　 这就是透明度的意思，用过photoshop的人恐怕对这个概念对最有感觉。而借助于css-p(定位 css)中的“层”的帮助，就可以做出各种溶入效果；倘若利用javascript页面脚本语言，对滤镜的参数进行处理，就可以做出淡入淡出的效果来，这一点留给大家去思考吧。

　　 α-过滤器的所有可选项：
{FILTER:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,
StartX=startx,StartY=starty,FinishX=finishx,FinishY=finishy)}
稍微为大家解释一下参数的含义：
Opacity：起始透明度；
FinishOpacity:终止透明度；
Style：风格；
Startx,starty,finishx,finishy：作用域。

　　 例子，效果如图。

第一个是一个阴影的例子。
< html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< style type="text/css">
< !--
.text1 { position:relative;width:600;filter:shadow(color=blue,direction=135);
color:#66ccff;font-size:48pt; font-family:"方正彩云繁体"}
-->
< /style>
< /head>

< body bgcolor="#FFFFFF">
< div class="text1"
align="center">
< p>CSS循序渐进< /p>
< /div>
< /body>
< /html>

　　 将中间的style改一下， .text1
{ position:relative;width:600;filter:alpha(opacity=50,finish=100,startx=0,sta
rty=0,finishx=200,finishy=200); color:#66ccff;font-size:48pt; font-family:"方正
彩云繁体"}

　　 这就是关于透明度的一个效果。

     字型的一些功能。总的说来，主要是字体(font)、大小(size)、字体粗细 (Weight)、字体变形(Variant)、字体风格(Style)、修饰(Decoration)、Case(大小写)等等。

        本文所用的Style例子都是采用的调用外部文件的形式，且只是外部文件css1.css的内容。要是想使用它们，在HTML文件的文件头说明部分中加入< LINK REL=STYLESHEET HREF="CSS1.CSS">就可以了。

　　 好，下面先给大家看一个例子:
　　 P {
　　 text-align: left;
　　 font-size: 25pt;
　　 font-family: "隶书", "宋体";
　　 letter-spacing: 3px;
　　 color:navy;
　　 line-height:30pt;
　　 text-indent: .5in;
　　 border: solid 2pt;
　　 }

　　 链入网页以后出来的效果如下图：

　　 现在就对上面这段代码进行详解。首先，P就是表示是对文件中的所有< p>< /p>容器中的内容进行的定义。大括号内就是对各项属性所规定的值。对于一个定义的格式往往是:

　　 属性:值

　　 中间以分号隔开。

　　 Text-align:left表示段落是居左对齐，font-size:15pt，表示字体大小为15pt，font-family: 隶书,宋体 表示所采用的字体。这里要说明一下，这里使用了几种字体，并分别用逗号隔开，表示第一、第二、第三字体，也就是说如果客户机的系统内有第一种字体的话就采用它，如果没有再查看有没有第二种，第三种，倘若都没有则使用缺省字体。letter-spacing:3px就说明字间宽为3px.color:navy，则表示颜色为天蓝色，line-height:12pt表示行高为12pt(这里的行高是连同字高一起计算的)。 text-indent:.5in表示段落首行的缩进的多少，这里是.5in.border:solid 1pt表示边框是宽度为1pt的实心边框。

　　 大家对照一下图看看属性与效果之间的关系。看看写Style是有关字体和排版的属性还有几项，下面就列表向大家说明。

　　 字体参数(Font Properties):

参数	含义	举例
Font-size	字体大小	Small,midium
Font-Style	字体风格	Normal,italic
Font-family	选用字体	宋体,fantasy
Font-weight	字体粗细	Bold,bolder

　　 文本参数(Text Properties):

参数	含义	举例
Line-Height	行距	1.2,18pt
Text-decoration	文字装饰	underline,none
Text-transform	大小写转换	Capitalize(单词首字母大写) 　　 Uppercase(全部大写) 　　 Lowercase(全部小写)
Text-align	文字对齐	Left,right,center,justify
Text-indent	文字缩进	长度值,百分比值

　　 块参数(Block-Level Formatting Properties)

参数	含义	举例
Left-margin,right-margin	留的空白	长度值,百分比值
Padding-top…	内容边框间距	长度值,百分比值
Border-width	边框宽度	长度值
Border-style	边框风格	Solid,double,groove
Border-color	边框颜色	颜色值
Width	宽度	长度值,百分比值
Float	对齐	Left,right

　　 颜色参数(Color and Background Properties)

参数	含义	举例
Color	前景色彩	颜色值(red, #FF0000)
Background-image	背景文件	文件地址
Background-color	背景颜色	颜色值
background-attachment	背景是否依附	scroll(随内容滚动)和fixed(固定位置)
background-repeat	背景重复格式	repeat-x(水平重复) 　　 ,repeat-y(纵向重复),no-repeat(不重复)

　　 分类属性(Classification Properties)

参数	意义	举例
Display	文字块类型	block, inline, list-item
List-style-type	文字块风格	disc, circle, square, decimal
White-space	设定空白区域	Normal,pre

        读者们有没有感觉到html中所规定的那些标准形式的表格（table ）和表单（form）样子过于呆板，而风格又时常与自己网页格格不入呢?而且，对于一个大信息量和交互式的网页而言，表格和表单是需要大量运用并且占有很重要的位置的。恰当的运用style，甚至可以做出比作图更好的效果来。

　　先给大家说说关于定制表格的一些细节。对背景（background）和边框（border）进行定义。用的也不过是这两方面的属性。

块参数（Block-Level Formatting Properties）

参数	含义	举例
Left-margin,right-margin	留的空白	长度值,百分比值
Padding-top…	内容边框间距	长度值,百分比值
Border-width	边框宽度	长度值
Border-style	边框风格	Solid,double,groove
Border-color	边框颜色	颜色值
Width	宽度	长度值,百分比值
Float	对齐	Left,right

颜色参数（Color and Background Properties）

参数	含义	举例
Color	前景色彩	颜色值（red, #FF0000）
Background-image	背景文件	文件地址
Background-color	背景颜色	颜色值
background-attachment	背景是否依附	scroll（随内容滚动）和fixed（固定位置）
background-repeat	背景重复格式	repeat-x（水平重复） ,repeat-y（纵向重复）,no-repeat（不重复）

　　需要说明的是所有的边框属性都是分位置的，也就是说，可以对外观的上、下、左、右四个方向分别作设定，也就是说，对于每一项边框属性，都有border-left-width,border-right-width,border-top-width,border-bottom-width这样的四个分属性，也可以在某个属性后面连带四个值，分别表示对top、right、bottom、left的定义。这一点很有用，我们就可以运用它，做出类似光影的效果。而另外一个属性，所谓风格（style）就很难定义了。有些说法，比如说solid（实心），double（双层）很好理解。但是有些效果恐怕要您用过以后才能明白是怎么回事。这里笔者把它们全部列举如下:

　　 dotted、dashed、solid、double、groove、ridge、inset、outset。

　　下面有一个专门的关于表格的例子，大家看看，效果如图一

　　源码如下:

 < html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" content="text/html; 
charset=gb2312">
< style type="text/css">
< !--
table {  font-family: "宋体"; font-size: 9pt; color: 
#000033; text-decoration: none; background-color: 
#FFCCCC; padding-top: 4px; padding-right: 3px; padding-
bottom: 2px; padding-left: 2px; border: #CCCCFF; 
border-style: groove; border-top-width: thick; border-
right-width: thick; border-bottom-width: thick; border-
left-width: thick}
-->
< /style>
< /head>
< body bgcolor="#FFFFFF">
< table width="75%" border="1" cellspacing="1" 
cellpadding="1" align="center">
  < tr bgcolor="#CCFFCC" bordercolor="#0000CC" 
valign="middle" align="center"> 
    < td>一< /td>
    < td>二< /td>
    < td>三< /td>
    < td>四< /td>
  < /tr>
  < tr bgcolor="#CCFFCC" bordercolor="#0000CC" 
valign="middle" align="center"> 
    < td>a< /td>
    < td>b< /td>
    < td>c< /td>
    < td>d< /td>
  < /tr>
  < tr bgcolor="#CCFFCC" bordercolor="#0000CC" 
valign="middle" align="center"> 
    < td>甲< /td>
    < td>乙< /td>
    < td>丙< /td>
    < td>丁< /td>
  < /tr>
  < tr bgcolor="#CCFFCC" bordercolor="#0000CC" 
valign="middle" align="center"> 
    < td>A< /td>
    < td>B< /td>
    < td>C< /td>
    < td>D< /td>
  < /tr>
< /table>
< /body>
< /html>

　　用到的定义语句: 

 .input1 {
 BACKGROUND-COLOR: #e8e8e8; BORDER-BOTTOM: 
#a8a8a8 1px solid; BORDER-LEFT: #a8a8a8 1px solid; 
BORDER-RIGHT: #a8a8a8 1px solid; BORDER-TOP: #a8a8a8 
1px solid; FONT-SIZE: 9pt
}