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>