二、字的艺术

　　 说到CSS，笔者用的最多的还是它的排版和字型设计功能。因为网页嘛，最终还是要做给人家看的，要传递信息给对方的，所以不管怎么说，这种传递形式非常重要，具体说来，也就是字的控制和版面的控制。另外一个很重要的原因就是中文相当难处理，Windows自带的中文字库很少，而中文的美术效果又很难做，远不如英文那么随随便便写几个字就很舒服。所以借助CSS的帮助就更显得有必要。好，废话也不多说了。大家还是跟我一起看一看CSS到底对字能起些什么作用吧。

　　 首先，给朋友们说说样式表关于字型的一些功能。总的说来，主要是字体(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):

　　 文本参数(Text Properties):

　　 块参数(Block-Level Formatting Properties)

　　 颜色参数(Color and Background Properties)

　　不知道大家看完前面两篇以后是否对用style已经有了一点心得，其实前文所说的不过是样式表最基本的运用。笔者这里想问一问，读者们有没有感觉到html中所规定的那些标准形式的表格（table）和表单（form）样子过于呆板，而风格又时常与自己网页格格不入呢?而且，对于一个大信息量和交互式的网页而言，表格和表单是需要大量运用并且占有很重要的位置的。现在如果笔者告诉大家用样式表定制自己个人风格的表单和表格的话，您是否会兴奋得跳起来呢?其实，如果恰当的运用style，甚至可以做出比作图更好的效果来。

　　先给大家说说关于定制表格的一些细节。在第一章里的那个例子里，大家应该看到了许多运用定制表格的地方。应该说定制表格并不复杂，主要的也就是对背景（background）和边框（border）进行定义。用的也不过是这两方面的属性。

块参数（Block-Level Formatting Properties）

颜色参数（Color and Background Properties）

　　说起来这些属性在上次介绍文字排版的时候也用过了，不过您这次再看看它在表格里的表现，它们在这里扮演的角色非常重要，笔者决非是简单的老调重弹。需要说明的是所有的边框属性都是分位置的，也就是说，可以对外观的上、下、左、右四个方向分别作设定，也就是说，对于每一项边框属性，都有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>

　　至于表单，由于网页的交互性越来越被人们重视，表单的运用也越来越多。可是HTML本身所制定的那些标准形式的表单件的样子实在让人不敢恭维。文本框一律是内部深陷的长条，而按钮又全是那种灰灰的块块，放在一个精致的网站中实在不成样子。所以可以说适当的调整边框大小、颜色，做出符合网站个性的表单也是网站成功的一环吧。

　　大家要看效果的话可以借鉴一下fanso的打开音乐（http://music.fanso.com）的例子。（也可以看图二）大家注意看它右边的一排输入框，其实它是将输入框做到最小了，但是味道却反而足了。

　　用到的定义语句其实很简单:

.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
}

　　大家应该可以看到，表格和表单的定制最重要的地方其实在于边框与颜色的选择与搭配，这个是其外观效果的关键。

四、表里春秋

　　 这一次还是继续为大家介绍一些样式表应用方面的技巧。大家知道样式表的定义是针对容器(tag)而言的，那么在HTML 中，Anchor(锚，即超级链接标记)是一类作用非常之大的容器。它实现了HTML最根本的功能（超文本，超链接）。而CSS也有关于Anchor的一些特殊用法。使得页面的联接更紧凑，更富有条理。

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

　　 　　 A:

　　可是它特殊之处在于，它有各种相关的属性，比如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:">关闭窗口< /p>
< /body>
< /html>

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

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

crosshair:十字；

hand:手形；

text:文本光标；

wait:沙漏；

help:问号；

e-resize:右箭头；

ne-resize:右上向箭头；

n-resize:向上箭头；

nw-resize:左上箭头；

w-resize:向左箭头；

sw-resize:左下箭头；

s-resize:向下箭头；

se-resize:右下箭头。

　　好了，关于css的一些技巧性的东西就为大家介绍到这里啦。