第十章 CSS段落文字

時間 2019-11-12

標籤第十 css 段落文字欄目 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。