一、段落的水平對齊方式html
在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>
二、段落的垂直對齊方式spa
在CSS中段落文字的垂直對齊方式是經過vertical-align屬性來具體實現的。對於文字自己而言,該屬性對於塊級元素並不起做用,例如<p>和<div>等標記。但對於表格而言,這個屬性則顯得十分重要。code
如對vertical-align屬性設置具體的數值,對於文字自己則能夠在垂直方向上發生位移。htm
<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>
三、行間距和字間距blog
在CSS中經過line-height屬性來設置行距。在CSS中line-height的值表示的是兩行文字之間基線的距離。若是給文字加上下劃線,那麼下劃線的位置就是文字的基線。ci
line-height的值跟CSS中全部設定具體數值的屬性同樣,能夠設定爲相應數值,也能夠設定爲絕對數值。 在靜態頁面中,文字大小固定時經常使用絕對數值,達到統一的效果。而對於論壇和博客這些能夠由用戶自定義字體大小的頁面,一般設定爲相對數值,能夠隨着用戶自定義的字體大小而改變相應的行距。博客
CSS中經過letter-spacing屬性來調整字間距,這個屬性一樣能夠設置相對數值和絕對數值,還可使用負數來實現文字重疊的效果。it
<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> ·
四、首字放大table
在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>