第十章 CSS段落文字

1、段落的水平对齐方式

在CSS中段落的水平对齐是通过属性Text-align来控制的，它的值可以设置为左、中、右和两端对齐等。

<html>
<head>
<title>水平对齐</title>
<style>
<!--
p{ font-size:12px;}
p.left{ text-align:left;}
p.right{ text-align:right;}
p.center{ text-align:center;}
p.justify{ text-align:justify;}  /*两端对齐*/
-->
</style>
</head>
<body>
<p class="left"> 这个段落采用左对齐的方式，text-align：left，因此文字都采用左对齐。<br />
床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。<br />李白</p>
<p class="right"> 这个段落采用右对齐的方式，text-align：right，因此文字都采用右对齐。<br />
床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。<br />李白</p>
<p class="center"> 这个段落采用居中对齐的方式，text-align：center，因此文字都采用居中对齐。<br />
床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。<br />李白</p>
<p class="justify"> 这个段落采用两端对齐的方式，text-align：justify，因此文字都采用两端对齐。<br />
床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。<br />李白</p>
</body>
</html>

2、段落的垂直对齐方式

在CSS中段落文字的垂直对齐方式是通过vertical-align属性来具体实现的。对于文字本身而言，该属性对于块级元素并不起作用，例如<p>和<div>等标记。但对于表格而言，这个属性则显得十分重要。

如对vertical-align属性设置具体的数值，对于文字本身则可以在垂直方向上发生位移。

<html>
<head>
<title>垂直对齐</title>
<style>
<!--
td.top{ vertical-align:top;}
td.bottom{ vertical-align:bottom;}
td.middle{ vertical-align:middle;}
span.zs{ vertical-align:10px;}           /*当值设置为正数时，文字将向上移动相应的数值设置为负数时则向下移动*/
span.fs{ vertical-align:-10px;}
-->
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="top">垂直对齐方式，top</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="bottom">垂直对齐方式，bottom</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="middle">垂直对齐方式，middle</td>
</tr>
</table>

<p> 给对齐属性设置具体<span class="zs">数值</span>，正数</p>
<p> 给对齐属性设置具体<span class="fs">数值</span>，负数</p>
</body>
</html>

3、行间距和字间距

在CSS中通过line-height属性来设置行距。在CSS中line-height的值表示的是两行文字之间基线的距离。如果给文字加上下划线，那么下划线的位置就是文字的基线。

line-height的值跟CSS中所有设定具体数值的属性一样，可以设定为相应数值，也可以设定为绝对数值。在静态页面中，文字大小固定时常常使用绝对数值，达到统一的效果。而对于论坛和博客这些可以由用户自定义字体大小的页面，通常设定为相对数值，可以随着用户自定义的字体大小而改变相应的行距。

CSS中通过letter-spacing属性来调整字间距，这个属性同样可以设置相对数值和绝对数值，还可以使用负数来实现文字重叠的效果。

<html>
<head>
<title>行间距</title>
<style>
<!--
p.one{
    font-size:10px;
    line-height:8px;                    /* 行间距，绝对数值，行间距小于字体大小*/
    letter-spacing:-2pt;           /* 字间距，绝对数值 负数 */
}
p.second{ font-size:18px;}
p.third{ font-size:10px;}
p.second,p.third{
     line-height:1.5em;                /*行间距 ，相对数值*/
     letter-spacing:5em;           /*字间距 ，相对数值*/
 }   
-->
</style>
</head>
<body>
<p class="one">9月23日是“秋分”,我国古籍《春秋繁露、阴阳出入上下篇》中说：“秋分者，阴阳相半也，故昼夜均而寒暑平。”“秋分”的意思有二：一是太阳在这时到达黄径180.一天24小时昼夜均分，各12小时；二是按我国古代以立春、立夏、立秋、立冬为四季开始的季节划分法，秋分日居秋季90天之中，平分了秋季。</p>
<p class="second">秋分时节，我国长江流域及其以北的广大地区，均先后进入了秋季，日平均气温都降到了22度以下。北方冷气团开始具有一定的势力，大部分地区雨季刚刚结束，凉风习习，碧空万里，风和日丽，秋高气爽。</p>
<p class="third">秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。秋分棉花吐絮，烟叶也又绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，长江流域及南部广大地区正忙着晚稻的收割。</p>
</body>
</html>
·

4、首字放大

在CSS中首字放大的效果是通过对第1个字进行单独设置样式来实现的。例中主要是通过float语句对首字下沉进行控制，并且用<span>标记，对首字设置单独的样式，达到突出显示的目的。

<html>
<head>
<title>首字下沉</title>
<style>
<!--
body{ background-color:black;}
p{ font-size:15px;
   color:white;
} 
p span{
    font-size:60px;
    float:left;      /*首字下沉*/
    padding-right:5px;  /*与右边的间隔*/
    font-weight:bold;  /*粗字体*/
    font-family:黑体;
    color:yellow;
}
-->
</style>
</head>
<body>
<p> <span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。</p>
</body>
</html>