01_09.常见文本样式

最新推荐文章于 2021-10-22 17:00:44 发布

大史叔叔

最新推荐文章于 2021-10-22 17:00:44 发布

阅读量375

点赞数

分类专栏： XHTML+CSS

本文链接：https://blog.csdn.net/cigarangle/article/details/25913725

版权

XHTML+CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/hml;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style/01_09_text.css">
	</head>
	<body>
		<!-- 常见文本样式对比 -->
		<div>
			<p class="wb">1.常见文本样式对比</p>
			<div id="b1">
			我是正常的，我是正常的。           我是正常的，我是正常的。           我是正常的，我是正常的。           我是正常的，我是正常的。           我是正常的，我是正常的。           我是正常的，我是正常的。           我是正常的，我是正常的。           我是正常的，我是正常的。           我是正常的，我是正常的。           
			</div>
			<p class="wb">注：下划线并不是在line-height区域的低端(在文字低端)</p>
			<div id="b2">
			我是不正常的，我是不正常的。		我是不正常的，我是不正常的。		我是不正常的，我是不正常的。		我是不正常的，我是不正常的。		我是不正常的，我是不正常的。		我是不正常的，我是不正常的。		我是不正常的，我是不正常的。		我是不正常的，我是不正常的。		
			</div>
			<hr />
		</div>
		<!-- 行高图解 -->
		<div id="hg">
			<p class="wb">2.line-height可以理解为下图所示：</p>
			<div id="tp"><img src="images/01_09_text.jpg" /></div>
		</div>
		<hr />
		<!-- 行高应用 -->
		<div>
			<p class="wb">3.关于line-height的一个应用：（div内只有一行文字时，将line-height设置为div的height时，可实现垂直居中）</p>
			<div id="jz">水平（text-align）、垂直居中</div>
		</div>
	</body>
</html>

.wb{
	text-align: center;
}
#b1{
	margin:50px auto;
	width: 500px; height:200px;
	border:solid green 2px;

	font-family: 宋体;
	font-size: 14px;
	color: black;

	font-weight: normal;
	font-style: normal;
	text-decoration: underline;

	text-align: left;
	line-height: 20px;

	text-indent: 2em;
	letter-spacing: 3px;
	word-spacing: 10px;
}
#b2{
	margin:50px auto;
	width: 500px; height:200px;
	border:solid green 2px;

	font-family: 楷体;
	font-size: 20px;
	color: red;

	font-weight: bold;
	font-style: italic;
	text-decoration: underline;
	
	text-align: left;
	line-height: 20px;

	text-indent: 4em;
	letter-spacing: 13px;
	word-spacing: 20px;
}
#tp{
	text-align: center;
}
#jz{
	width: 500px; height: 100px;
	border:solid green 1px;
	margin:0px auto;
	line-height: 100px;
	text-align: center;

}