第十章 CSS段落文字

一、段落的水平對齊方式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>
相關文章
相關標籤/搜索