从CSS的基本语句就可以看出，属性是CSS非常重要的部分。熟练掌握了CSS的各种属性将会是您编辑页面更加得心应手。下面我们就借助一些实例来讲解。

　　1、 字体属性

　　这是最基本的属性，您经常都会用到。它主要包括以下这些属性：

　　光看表格是不是有些难懂，不要紧，我们来看一个用表格中的属性定义的字体样式（如下图）：

　　

　　第一行只是采用了“font-family”属性，代码是这样的：
　　 <p style=“font-family：lucida console”>hongen</p>
　　 这行代码定义了“hongen”将以“lucida console”的字体显示；
　　 第二行font-family为默认值，而是定义了“font-style”属性为“italic”斜体，代码如下：
　　 <p style=“font-style：italic”>hongen</p>
　　 第三行font-family为默认值，font-style为“oblique”，另外还定义了“font-weight”属性为“bold”，“font-size”属性为24pt（缺省情况下为absolute size绝对大小）代码如下：
　　 <p style=“font-style：oblique；font-weight：bold；font-size：24pt”>hongen</p>
　　 最后一行只是在第三行定义的基础上又增添了“font-variant”属性为“small-caps”（小体大写），代码如下：
　　 <p style=“font-style：oblique；font-weight：bold；font-size：24pt；　　　　　　　　font-variant：small-caps”>hongen</p>
　　 值得注意的是：“font-variant”属性值“small-caps”在指定的小体大写字体不存在的时候，CSS将用大写字母代替所有的小写字母。
　　 可能您会问：定义一个字体怎么有那么长的代码呢？其实字体属性中还一个“font”属性，可以实现简便定义。我们来看下面这段代码：
　　 <p style=“font：italic small-caps bold 36pt,GlitzyCurl”>Leaf</p> 此代码产生的效果是这样的（如下图）：

　　这段代码定义了“leaf”的字体为GlitzyCurl，并且是斜体、小体大写、粗体、36号字。这段代码等同于：
　　 <p style=“font-style：italic；font-variant：small-caps；font-weight：　　　bold；font-size：36pt；font-family：GiltzyCurl”>Leaf</p>
　　 怎么样，是不是精简了许多。
　　 但需要注意的是：如果您用<font>属性直接定义，一定要注意属性值的排放顺序。　　它的排放规则是按照“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”的顺序，其中没有定义的以默认值显示。

　　其实我们习惯上还是不用FONT属性来统一定义，因为分开来定义的代码虽然很长，但是看上去很直观，让人一看就知道定义的内容是什么。
　　 说一点遗憾之处吧，就是CSS对中文字体的支持可能不是很好。

　　2、颜色和背景属性

　　您总不希望自己的页面处于黑白世界吧。如果给用<font>属性定义的文本添上颜色是不是会更好呢？

　　下面我们就讲一下CSS的颜色和背景属性。先来看一下CSS下的颜色和背景都有哪些属性吧（如下表）：

　　我们还是举个例子吧。比如上一节讲到的“LEAF”字体，我们在其中加入颜色属性，在<style>再加入以下代码：
　　 color：rgb（204，82，28）；
　　 background-img：url(ss01038.jpg)；
　　 background-repeat：no-repeat；margin-right：15em

　　//*设置前景色的rgb值为(204，82，28)，您也可以用颜色的英文名称直接定义；
　　 设置背景图案的地址；设置背景图案不重复显示；另外还设置了页边距margin属性
　　 ，这个我们以后再讲*//

　　加入代码后“Leaf”的字体显示效果是这样的（如下图）：

　　怎么样，是不是比光是定义<font>属性显得更加漂亮了。当然您也可以简便的定义background属性（象定义font属性那样），下面我告诉一下您background属性的书写格式：

　　属性：background 属性值：<background-color>||<background-image>|| 　　　　<background-repeat>||<background-attacement>||<background-position>

　　也就是说，使用background属性可以一次定义前面讲到的一切有关背景的属性，包括背景色、背景图案等等。因此，上面定义“leaf”颜色属性中有关背景的代码可以写成这样： “background：url（ss01038.jpg）no-reapeat”

　　好了，至于颜色和背景属性的功能，您自己也可以去试一试。下一节我们将介绍CSS的文本属性。

　　3、文本属性

　　※定义间距

　　前面说了如何用CSS定义字体、颜色和背景属性，那么定义好的文本我们怎么对它进行排版呢？

　　下面我们讲述一下CSS的文本属性，还是先来看一下文本属性的详细列表：

　　我们可以从表中看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。 举个例子来看看吧。比如下面这段文字（如左下图）：

　

　　我们对这段文字加上文本属性重新排版，排版后的效果如右上图所示。
　　 我们看到经过文本属性处理的文本字与字之间多了间距，行与行之间多了行高，对齐方式变成了两端对齐，并且段首又多缩进了两格。这是怎样实现的呢？很简单，只是在html中加了如下的代码：

　　<p style=“letter-spacing：1em；text-align：justify；text-indent：
　　 4em；line-height：17pt”>……</p>

　　//*letter-spacing设置了字间距为1em，其中1em为一个长度单位；text-align设
　　 置了对齐方式为两端对齐；indent设置了缩进格为4em；line-height设置了行高为
　　 17pt*//

　　从上面的例子，我们可以看出利用CSS的文本属性可以方便的对页面中的文本进行排版。下一节我将向您介绍文本的Text-decoration属性的一个小应用。

[1] [2] [3] 下一页