css学习笔记（四）

三 文本的精细排版

1，调整字符间距letter-spacing

字符间距letter-spacing属性用来控制字符之间的间距，这个间距实际就是在浏览器中所显示字符间的空格间距，同时间距的取值必须符合长度标准

基本语法：

letter-spacing:normal|长度

normal表示间距正常显示，是默认设置

长度包括长度值和长度单位，长度值可以使用负数

长度单位可以使用前面设置字体时介绍的所有单位

实例代码：

view plain

1. < html >   
2. < head >   
3.     < title > 应用letter-spacing属性 </ title >   
4.     < style   type = "text/css" >   
5.     <!--  
6.     .h{font-family:黑体; font-size:20pt; font-weight:bold; letter-spacing:normal}  
7.     .p1{font-family:宋体; font-size:18px; letter-spacing:5px}  
8.     .p2{font-family:宋体; font-size:18px; letter-spacing:15px}  
9.     -->   
10.     </ style >   
11. </ head >   
12. < body >   
13.     < center >   
14.     < h2   class = h >   
15.     设置字符间距  
16.     </ h2 >   
17.     </ center >   
18.     < hr >   
19.     < p   class =  p1 >   
20.     这段文字的字符间距为5像素  
21.     </ p >   
22.     < p   class = p2 >   
23.     这段文字的字符间距为15像素  
24.     </ p >   
25. </ body >   
26. </ html >   

2，调整单词间距word-spacing

单词间距是和字符间距类似的属性，但是单词间距word-spacing主要用来设置单词之间空格距离

基本语法：

word-spacing:normal|长度

normal表示间距正常，是默认设置

长度包括长度值和长度单位，长度值可以使用负数

长度单位可以使用设置字体时介绍的所有单位

实例代码：

view plain

1. < html >   
2. < head >   
3.     < title > 应用word-spacing属性 </ title >   
4.     < style   type = "text/css" >   
5.     <!--  
6.     .h{font-family:黑体; font-size:20px; font-weight:bold}  
7.     .p1{font-family:"Time New Roman"; font-size:18px; word-spacing:normal}  
8.     .p2{font-family:"Time New Roman"; font-size:18px; word-spacing:10px}  
9.     -->   
10.     </ style >   
11. </ head >   
12. < body >   
13.     < center >   
14.     < h2   class = h >   
15.     设置单词词距  
16.     </ h2 >   
17.     </ center >   
18.     < hr >   
19.     < p   class = p1 >   
20.     this is a good book< br >   
21.     单词词距为正常显示  
22.     </ p >   
23.     < p   class = p2 >   
24.     this is a good book< br >   
25.     单词词距为10像素  
26.     </ p >   
27. </ body >   
28. </ html >   

3，添加文字修饰text-decoration

文字修饰text-decoration属性主要是对文字添加一些常用的修饰，如设置下划线和删除线等

基本语法：

text-decoration:underline|overline|line-through|bink|none

语法中的属性值可以是上面所列的一个或多个

text-decoration属性取值说明

属性的取值	说明
underline	给文字添加下划线
overline	给文字添加上划线
line-through	给文字添加删除线
blink	添加文字的闪烁效果
none	没有文本修饰，是默认值

实例代码：

view plain

1. < html >   
2. < head >   
3.     < title > 应用text-decoration属性 </ title >   
4.     < style   type = "text/css" >   
5.     <!--  
6.     h2{font-family:黑体; font-size:20pt; font-weight:bold}  
7.     .p1{font-size:18px; text-decoration:underline}  
8.     .p2{font-size;18px; text-decoration:line-through}  
9.     .p3{font-size:18px; text-decoration:overline}  
10.     -->   
11.     </ style >   
12. </ head >   
13. < body >   
14.     < center >   
15.         < h2 >   
16.         添加文字修饰  
17.         </ h2 >   
18.     </ center >   
19.     < hr >   
20.     < p   class = p1 >   
21.     这段文字添加下划线的效果  
22.     </ p >   
23.     < p   class = p2 >   
24.     这段文字添加删除线的效果  
25.     </ p >   
26.     < p   class = p3 >   
27.     这段文字添加上划线的效果  
28.     </ p >   
29. </ body >   
30. </ html >   

4，设置文本排列方式text-align

text-align属性用来控制文本的排列和对齐方式

基本语法：

text-align:left|right|center|justify

该语法的4个属性值可以任意选择其中一个，其中left代表左对齐方式，right代表右对齐方式，center代表居中对齐方式，justify代表两端对齐方式

该属性可应用于HTML中任何模块级标记，如<p> <h1> <h6>等

实例代码：

view plain

1. < html >   
2. < head >   
3.     < title > 应用text-align </ title >   
4.     < style   type = "text/css" >   
5.     <!--  
6.     h2{font-family:黑体; font-size:18pt; text-align:center}  
7.     .p1{font-size:18px; text-align:left}  
8.     .p2{font-size:18px; text-align:right}  
9.     .p2{font-size:18px; text-align:center}  
10.     -->   
11.     </ style >   
12. </ head >   
13. < body >   
14.     < h2 >   
15.     设置文本排列方式  
16.     </ h2 >   
17.     < h2 >   
18.     < p   class = p1 >   
19.     这段文字为左对齐排列方式  
20.     </ p >   
21.     < p   class = p2 >   
22.     这段文字为右对齐排列方式  
23.     </ p >   
24.     < p   class = p3 >   
25.     这段文字为居中对齐排列方式  
26.     </ p >   
27. </ body >   
28. </ html >   

5，设置段落缩进text-indent

段落缩进text-indent属性是用来控制每个文字段落的首行缩进的距离的，该属性若没有设置值，默认为不缩进

基本语法：

text-indent:长度|百分比

长度包括长度值和长度单位，长度单位可以用之前所提到的所有单位

百分比则是相对上一级元素的宽度而定的

实例代码：

view plain

1. < html >   
2. < head >   
3.     < title > 应用text-indent属性 </ title >   
4.     < style   type = "text/css" >   
5.     <!--  
6.     h2{font-family:黑体; font-size:18px}  
7.     .p1{font-size:12pt; text-indent:26%}  
8.     .p2{font-size:12pt; text-indent:30px}  
9.     .p3{font-size:12pt; text-indent:30pt}  
10.     -->   
11.     </ style >   
12. </ head >   
13. < body >   
14.     < center >   
15.         < h2 >   
16.         设置段落缩进  
17.         </ h2 >   
18.     </ center >   
19.     < hr >   
20.     < p   class = p1 >   
21.     这段文字首行缩进为26%  
22.     </ p >   
23.     < p   class = p2 >   
24.     这段文字首行缩进为30px  
25.     </ p >   
26.     < p   class = p3 >   
27.     这段文字首行缩进为30pt  
28.     </ p >   
29. </ body >   
30. </ html >   

6，调整行高line-height

使用行高line-height属性可以控制文本内容之间的行间距，行间距通常是指上一行的下端到下一行上端之间的距离，所以调整行高也就是调整行间距

基本语法：

line-height:normal|数字|长度|百分比

normal为浏览器默认的行高，一般由字体大小属性来决定

数字，表示行高为该元素字体大小与该数字相乘的结果

长度，表示行高由长度和长度单位确定

百分比，表示行高是该元素字体大小的百分比

实例代码：

view plain

1. < html >   
2. < head >   
3.     < title > 应用line-height属性 </ title >   
4.     < style   type = "text/css" >   
5.     <!--  
6.     h2{font-family:黑体; font-size:18px; line-height:normal}  
7.     .p1{font-size:15px; line-height:18px}  
8.     .p2{font-size:15px; line-height:150%}  
9.     .p3{font-size:15px; line-height:2}  
10.     -->   
11.     </ style >   
12. </ head >   
13. < body >   
14.     < center >   
15.         < h2 >   
16.         设置行高  
17.         </ h2 >   
18.     </ center >   
19.     < hr >   
20.     < p   class = p1 >   
21.     这段文字行高为18px< br >   
22.     这段文字行高为18px  
23.     </ p >   
24.     < p   class = p2 >   
25.     这段文字行高为150%< br >   
26.     这段文字行高为150%  
27.     </ p >   
28.     < p   class = p3 >   
29.     这段文字行高为15px乘2< br >   
30.     这段文字行高为15px乘2  
31.     </ p >   
32. </ body >   
33. </ html >   

7，转换英文字母大小写text-transform

text-transform属性主要用来控制英文字母大小写转换，而且可以很灵活地实现对单词部分或者全部大小写的控制

基本语法：

text-transform:uppercase|lowercase|capitalize|none

可以选用text-transform属性中的任何一个属性值来转换英文单词的大小写

text-transform属性取值说明

属性的取值	说明
uppercase	使所有单词的字母大写
lowercase	使所有单词的字母小写
capitalize	使每个单词的首字母大写
none	默认值显示