CSS 文本

CSS 文本

主要介紹文本欄位換行、文本文字間間隔、文本縮進、文本文字上下排間隔等DIV CSS文本樣式 DIV CSS文本知識整理 1、文本欄位換行 - TOP html中使用


2、文本上下排字間間隔 - TOP 使用CSS屬性單詞:line-height 作用:定義對象行高,後面跟具體的數值和單位 line-height-DIV+CSS示例: div line-height:22px; 即定義行高為22px 3、CSS文本縮進 - TOP 使用CSS單詞:text-indent 作用:設定對象中的文本的縮進,後面也跟具體數值和單位text-indent DIV+CSS示例: div text-indent : 25px; 即定義對象內開頭的文字往後縮進25px

縮進文本

把 Web 頁面上的段落的第一行縮進,這是一種最常用的文本格式化效果。

CSS 提供了 text-indent 屬性,該屬性可以方便地實現文本縮進。

通過使用 text-indent 屬性,所有元素的第一行都可以縮進一個給定的長度,甚至該長度可以是負值。

這個屬性最常見的用途是將段落的首行縮進,下面的規則會使所有段落的首行縮進 5 em:

p {text-indent: 5em;}

注意:一般來說,可以為所有塊級元素套用 text-indent,但無法將該屬性套用於行內元素,圖像之類的替換元素上也無法套用 text-indent 屬性。不過,如果一個塊級元素(比如段落)的首行中有一個圖像,它會隨該行的其餘文本移動。

提示:如果想把一個行內元素的第一行“縮進”,可以用左內邊距或外邊距創造這種效果。

使用負值

text-indent 還可以設定為負值。利用這種技術,可以實現很多有趣的效果,比如“懸掛縮進”,即第一行懸掛在元素中餘下部分的左邊:

p {text-indent: -5em;}

不過在為 text-indent 設定負值時要當心,如果對一個段落設定了負值,那么首行的某些文本可能會超出瀏覽器視窗的左邊界。為了避免出現這種顯示問題,建議針對負縮進再設定一個外邊距或一些內邊距:

p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可以使用所有長度單位,包括百分比值。

百分數要相對於縮進元素父元素的寬度。換句話說,如果將縮進值設定為 20%,所影響元素的第一行會縮進其父元素寬度的 20%。

在下例中,縮進值是父元素的 20%,即 100 個像素:

div {width: 500px;}

p {text-indent: 20%;}

<div>

<p>this is a paragragh</p>

</div>

繼承

text-indent 屬性可以繼承,請考慮如下標記:

div#outer {width: 500px;}

div#inner {text-indent: 10%;}

p {width: 200px;}

<div id="outer">

<div id="inner">some text. some text. some text.

<p>this is a paragragh.</p>

</div>

</div>

以上標記中的段落也會縮進 50 像素,這是因為這個段落繼承了 id 為 inner 的 div 元素的縮進值。

水平對齊

text-align 是一個基本的屬性,它會影響一個元素中的文本行互相之間的對齊方式。它的前 3 個值相當直接,不過第 4 個和第 5 個則略有些複雜。

值 left、right 和 center 會導致元素中的文本分別左對齊、右對齊和居中。

西方語言都是從左向右讀,所有 text-align 的默認值是 left。文本在左邊界對齊,右邊界呈鋸齒狀(稱為“從左到右”文本)。對於希伯來語和阿拉伯語之類的的語言,text-align 則默認為 right,因為這些語言從右向左讀。不出所料,center 會使每個文本行在元素中居中。

提示:將塊級元素或表元素居中,要通過在這些元素上適當地設定左、右外邊距來實現。

text-align:center 與 <CENTER>

您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣,但實際上二者大不相同。

<CENTER> 不僅影響文本,還會把整個元素居中。text-align 不會控制元素的對齊,而只影響內部內容。元素本身不會從一段移到另一端,只是其中的文本受影響。

justify

最後一個水平對齊屬性是 justify。

在兩端對齊文本中,文本行的左右兩端都放在父元素的內邊界上。然後,調整單詞和字母間的間隔,使各行的長度恰好相等。您也許已經注意到了,兩端對齊文本在列印領域很常見。

需要注意的是,要由用戶代理(而不是 CSS)來確定兩端對齊文本如何拉伸,以填滿父元素左右邊界之間的空間。如需了解詳情,請參閱 CSS text-align 屬性參考頁。

相關詞條

相關搜尋

熱門詞條

聯絡我們