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>
