CSS+DIV網頁樣式與佈局——文字樣式&段落 （二）
阿新 • • 發佈：2018-12-26
承接上篇文章，本文小編為您繼續書寫文欄位落的相關內容。主要內容如下：
接下來只是簡單的幾句程式碼可以展示簡單的網頁效果。其實CSS程式碼本身就是用最簡單的語言來控制儘可能多的格式。
1、水平對齊方式：text-align
這是分別採用左對齊、右對齊、居中對齊的三種效果：
程式碼：
<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
程式碼：
<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
程式碼：
<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>