三 文本的精细排版
1，调整字符间距letter-spacing
字符间距letter-spacing属性用来控制字符之间的间距，这个间距实际就是在浏览器中所显示字符间的空格间距，同时间距的取值必须符合长度标准
基本语法：
letter-spacing:normal|长度
normal表示间距正常显示，是默认设置
长度包括长度值和长度单位，长度值可以使用负数
长度单位可以使用前面设置字体时介绍的所有单位
实例代码：
-
<
html
>
-
<
head
>
-
<
title
>
应用letter-spacing属性
</
title
>
-
<
style
type
=
"text/css"
>
-
<!--
-
.h{font-family:黑体; font-size:20pt; font-weight:bold; letter-spacing:normal}
-
.p1{font-family:宋体; font-size:18px; letter-spacing:5px}
-
.p2{font-family:宋体; font-size:18px; letter-spacing:15px}
-
-->
-
</
style
>
-
</
head
>
-
<
body
>
-
<
center
>
-
<
h2
class
=
h
>
-
设置字符间距
-
</
h2
>
-
</
center
>
-
<
hr
>
-
<
p
class
=
p1
>
-
这段文字的字符间距为5像素
-
</
p
>
-
<
p
class
=
p2
>
-
这段文字的字符间距为15像素
-
</
p
>
-
</
body
>
-
</
html
>
2，调整单词间距word-spacing
单词间距是和字符间距类似的属性，但是单词间距word-spacing主要用来设置单词之间空格距离
基本语法：
word-spacing:normal|长度
normal表示间距正常，是默认设置
长度包括长度值和长度单位，长度值可以使用负数
长度单位可以使用设置字体时介绍的所有单位
实例代码：
-
<
html
>
-
<
head
>
-
<
title
>
应用word-spacing属性
</
title
>
-
<
style
type
=
"text/css"
>
-
<!--
-
.h{font-family:黑体; font-size:20px; font-weight:bold}
-
.p1{font-family:"Time New Roman"; font-size:18px; word-spacing:normal}
-
.p2{font-family:"Time New Roman"; font-size:18px; word-spacing:10px}
-
-->
-
</
style
>
-
</
head
>
-
<
body
>
-
<
center
>
-
<
h2
class
=
h
>
-
设置单词词距
-
</
h2
>
-
</
center
>
-
<
hr
>
-
<
p
class
=
p1
>
-
this is a good book<
br
>
-
单词词距为正常显示
-
</
p
>
-
<
p
class
=
p2
>
-
this is a good book<
br
>
-
单词词距为10像素
-
</
p
>
-
</
body
>
-
</
html
>
3，添加文字修饰text-decoration
文字修饰text-decoration属性主要是对文字添加一些常用的修饰，如设置下划线和删除线等
基本语法：
text-decoration:underline|overline|line-through|bink|none
语法中的属性值可以是上面所列的一个或多个
text-decoration属性取值说明
| 属性的取值 |
说明 |
| underline |
给文字添加下划线 |
| overline |
给文字添加上划线 |
| line-through |
给文字添加删除线 |
| blink |
添加文字的闪烁效果 |
| none |
没有文本修饰，是默认值 |
实例代码：
-
<
html
>
-
<
head
>
-
<
title
>
应用text-decoration属性
</
title
>
-
<
style
type
=
"text/css"
>
-
<!--
-
h2{font-family:黑体; font-size:20pt; font-weight:bold}
-
.p1{font-size:18px; text-decoration:underline}
-
.p2{font-size;18px; text-decoration:line-through}
-
.p3{font-size:18px; text-decoration:overline}
-
-->
-
</
style
>
-
</
head
>
-
<
body
>
-
<
center
>
-
<
h2
>
-
添加文字修饰
-
</
h2
>
-
</
center
>
-
<
hr
>
-
<
p
class
=
p1
>
-
这段文字添加下划线的效果
-
</
p
>
-
<
p
class
=
p2
>
-
这段文字添加删除线的效果
-
</
p
>
-
<
p
class
=
p3
>
-
这段文字添加上划线的效果
-
</
p
>
-
</
body
>
-
</
html
>
4，设置文本排列方式text-align
text-align属性用来控制文本的排列和对齐方式
基本语法：
text-align:left|right|center|justify
该语法的4个属性值可以任意选择其中一个，其中left代表左对齐方式，right代表右对齐方式，center代表居中对齐方式，justify代表两端对齐方式
该属性可应用于HTML中任何模块级标记，如<p> <h1> <h6>等
实例代码：
-
<
html
>
-
<
head
>
-
<
title
>
应用text-align
</
title
>
-
<
style
type
=
"text/css"
>
-
<!--
-
h2{font-family:黑体; font-size:18pt; text-align:center}
-
.p1{font-size:18px; text-align:left}
-
.p2{font-size:18px; text-align:right}
-
.p2{font-size:18px; text-align:center}
-
-->
-
</
style
>
-
</
head
>
-
<
body
>
-
<
h2
>
-
设置文本排列方式
-
</
h2
>
-
<
h2
>
-
<
p
class
=
p1
>
-
这段文字为左对齐排列方式
-
</
p
>
-
<
p
class
=
p2
>
-
这段文字为右对齐排列方式
-
</
p
>
-
<
p
class
=
p3
>
-
这段文字为居中对齐排列方式
-
</
p
>
-
</
body
>
-
</
html
>
5，设置段落缩进text-indent
段落缩进text-indent属性是用来控制每个文字段落的首行缩进的距离的，该属性若没有设置值，默认为不缩进
基本语法：
text-indent:长度|百分比
长度包括长度值和长度单位，长度单位可以用之前所提到的所有单位
百分比则是相对上一级元素的宽度而定的
实例代码：
-
<
html
>
-
<
head
>
-
<
title
>
应用text-indent属性
</
title
>
-
<
style
type
=
"text/css"
>
-
<!--
-
h2{font-family:黑体; font-size:18px}
-
.p1{font-size:12pt; text-indent:26%}
-
.p2{font-size:12pt; text-indent:30px}
-
.p3{font-size:12pt; text-indent:30pt}
-
-->
-
</
style
>
-
</
head
>
-
<
body
>
-
<
center
>
-
<
h2
>
-
设置段落缩进
-
</
h2
>
-
</
center
>
-
<
hr
>
-
<
p
class
=
p1
>
-
这段文字首行缩进为26%
-
</
p
>
-
<
p
class
=
p2
>
-
这段文字首行缩进为30px
-
</
p
>
-
<
p
class
=
p3
>
-
这段文字首行缩进为30pt
-
</
p
>
-
</
body
>
-
</
html
>
6，调整行高line-height
使用行高line-height属性可以控制文本内容之间的行间距，行间距通常是指上一行的下端到下一行上端之间的距离，所以调整行高也就是调整行间距
基本语法：
line-height:normal|数字|长度|百分比
normal为浏览器默认的行高，一般由字体大小属性来决定
数字，表示行高为该元素字体大小与该数字相乘的结果
长度，表示行高由长度和长度单位确定
百分比，表示行高是该元素字体大小的百分比
实例代码：
-
<
html
>
-
<
head
>
-
<
title
>
应用line-height属性
</
title
>
-
<
style
type
=
"text/css"
>
-
<!--
-
h2{font-family:黑体; font-size:18px; line-height:normal}
-
.p1{font-size:15px; line-height:18px}
-
.p2{font-size:15px; line-height:150%}
-
.p3{font-size:15px; line-height:2}
-
-->
-
</
style
>
-
</
head
>
-
<
body
>
-
<
center
>
-
<
h2
>
-
设置行高
-
</
h2
>
-
</
center
>
-
<
hr
>
-
<
p
class
=
p1
>
-
这段文字行高为18px<
br
>
-
这段文字行高为18px
-
</
p
>
-
<
p
class
=
p2
>
-
这段文字行高为150%<
br
>
-
这段文字行高为150%
-
</
p
>
-
<
p
class
=
p3
>
-
这段文字行高为15px乘2<
br
>
-
这段文字行高为15px乘2
-
</
p
>
-
</
body
>
-
</
html
>
7，转换英文字母大小写text-transform
text-transform属性主要用来控制英文字母大小写转换，而且可以很灵活地实现对单词部分或者全部大小写的控制
基本语法：
text-transform:uppercase|lowercase|capitalize|none
可以选用text-transform属性中的任何一个属性值来转换英文单词的大小写
text-transform属性取值说明
| 属性的取值 |
说明 |
| uppercase |
使所有单词的字母大写 |
| lowercase |
使所有单词的字母小写 |
| capitalize |
使每个单词的首字母大写 |
| none |
默认值显示 |