01_09.常見文本樣式

原創

2020-02-22 04:29

<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;

}