字体样式font-style

这定义文本正斜与否。可以这样使用 font-style: italic（倾斜）或者font-style: normal（正常）。

文本装饰text-decoration

这用来声明文本是否有划线。可以这样使用：

text-decoration: overline──文本上面的划线。

text-decoration: line-through──穿过文本的删除线。

text-decoration: underline──这应该只使用在连接中，因为用户一般认为连接才有下划线。

这个属性通常用来装饰连接，而 text-decoration: none则是表示没有任何划线。

文本转换text-transform

这可以转换文本的大小写。

text-transform: capitalize把每个单词的首字母转换成大写。

text-transform: uppercase把所有的字母都转换成大写。

text-transform: lowercase把所有的字母都转换成小写。

text-transform: none？   你自己试一试啦。

body { font-family: arial, helvetica, serif; font-size: 0.8em; }

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

a { text-decoration: none; }

strong { font-style: italic; text-transform: uppercase; }

文本间距

字母间隔letter-spacing和文本间隔 word-spacing属性分别用在字母间和单词间的距离。它们的值可以是长度或者默认的普通normal。

line-height(行高)属性为比如段落等元素设置行高，它并不改变字体的尺寸。它的值可以是长度，百分比或者默认的normal。

文本水平对齐text-align属性将对元素里的文本向左、右、中间或者两端对齐，自然，它们的值分别left（左）、 right（右）、center（中间）或者 justify（两端）。

文本缩进text-indent属性依据你设置的长度或者百分比值对文本段落的第一行进行缩进。在印刷中经常会用到这样的格式，然而在像网页这样的电子媒体中并不常用。如

p { letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5em; text-align: center; }

5.边界和补白

边界margin和补白padding（依据国内出版社的翻译惯例，margin被翻译成边界，padding被翻译成补白，译者依照习惯翻译。但译者认为，

margin翻译成外边距，padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——）是隔开元素最常

用的两个属性。边界是元素外边的距离，而补白则是元素内部的距离。

为h2改进代码如下：

h2 { font-size: 1.5em; background-color: #ccc; margin: 1em; padding: 3em; }

你可以看到二级标题外围有一个字符的宽度，还很臃肿，因为在二级标题内部有3个字符宽度的补白。

元素的四边可以设置不同的值。margin-top、 margin-right、margin-bottom、 margin-left、padding-top、padding-right、padding-

bottom和padding-left是无需解释的属性（看看英文字面意思啦）。

盒状模型

边界、补白和边框（见下一页）是人尽皆知的盒状模型的组成所有部分。盒状模型是这样工作的：中间是元素盒子（在脑海中想像一下情形）

，从里到外依次包围着补白盒子、边框盒子和边界盒子。很显然地，如下所示：

没有必要全部使用上述三个外围的“盒子”，但如果你能记住盒状模型，你可以把它们应用到页面的每一个元素。

6.边框

边框可以应用到在主体元素body中的绝大部分HTML元素中。

创建一个包围着元素的边框，你所需要的是边框样式border-style。它们的值可以是

solid、dotted、dashed、double、groove、ridge、 inset和outset。（你有必要每个值都试一试，看看效果如何）

边框宽度border-width为边框设置宽度，通常用像素来表示。当然，还可以单独设置四个方向的边框属性，它们是border-top-width、border-right-width、 border-bottom-width和border-left-width。

最后，边框颜色border-color设置颜色。

为下面的CSS文档添加如下代码：

h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; }

这将会使所有的HTML二级标题（h2）产生红色的破折号（dashed）边框，上下各3像素宽，左右则各10像素宽（取代了3像素宽的全局设置）。