CSS+DIV网页样式与布局——文字样式&段落 (二)

           承接上篇文章,本文小编为您继续书写文字段落的相关内容。主要内容如下:

CSS+DIV网页样式与布局——文字样式&段落 (二)_第1张图片

           接下来只是简单的几句代码可以展示简单的网页效果。其实CSS代码本身就是用最简单的语言来控制尽可能多的格式。

                      

1、水平对齐方式:text-align

这是分别采用左对齐、右对齐、居中对齐的三种效果:

CSS+DIV网页样式与布局——文字样式&段落 (二)_第2张图片

代码:

<html>
<head>
<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>李白
	</p>
</body>
</html>

2、垂直对齐方式:vertical-align

CSS+DIV网页样式与布局——文字样式&段落 (二)_第3张图片

代码:

<head>
	<title>垂直对齐</title>
<style>
    td.top{ vertical-align:top; }			/* 顶端对齐 */
    td.bottom{ vertical-align:bottom; }		/* 底端对齐 */
    td.middle{ vertical-align:middle; }		/* 中间对齐 */
</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>
</body>
</html>

3、间距:letter-spacing

CSS+DIV网页样式与布局——文字样式&段落 (二)_第4张图片

代码:

<html>
<head>
<title>字间距</title>
<style>
p.one{
	font-size:10pt;
	letter-spacing:-2pt;	/* 字间距,绝对数值,负数 */
}
p.second{ font-size:18px; }
p.third{ font-size:11px; }
p.second, p.third{
	letter-spacing: .5em;	/* 字间距,相对数值 */
}
</style>
   </head>
<body>
	<p class="one">文字间距1,负数</p>
	<p class="second">文字间距2,相对数值</p>
	<p class="third">文字间距3,相对数值</p>
</body>
</html>


4、首字下沉:float


代码:

<html>
<head>
<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>
<p>骊山语罢清宵半,夜雨霖铃终不怨。何如薄幸锦衣郎,比翼连枝当日愿。</p>
</body>
</html>


           这就像是我们的一种习惯,在写文章时严格注意段落的形式,就好比我们自己写的文章,博客等,要是上来就是一整片的大段落,相信是没有人喜欢读的,就好像是要被人一口气读完你写的东西。所以用CSS可以省去你很多的力气,让你轻松的实现美妙的效果。

你可能感兴趣的:(CSS+DIV网页样式与布局——文字样式&段落 (二))