Css樣式--文本樣式詳解

發(fā)布時間：2013-09-24 14:59:15 作者：佚名

文本樣式包括所謂的文本縮進(jìn)：text-indent、水平對齊：text-align:center;left;right、字間隔和字母間距、字符轉(zhuǎn)換：text-transform等等，在本文將為大家詳細(xì)介紹下，感興趣的朋友可以參考下

1.文本縮進(jìn)：text-indent

復(fù)制代碼

代碼如下:

p {text-indent: 5em;}

1.實用負(fù)值：設(shè)置負(fù)值時要當(dāng)心，如果對一個段落設(shè)置了負(fù)值，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問題，建議針對負(fù)縮進(jìn)再設(shè)置一個外邊距或一些內(nèi)邊距。

復(fù)制代碼

代碼如下:

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

2.text-indent 具有繼承屬性

復(fù)制代碼

代碼如下:

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>

這里的p 首行縮進(jìn)50px

2.水平對齊：text-align:center;left;right;

3.字間隔和字母間距：
word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。

letter-spacing 屬性與 word-spacing 的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔。

4.字符轉(zhuǎn)換：text-transform
即大小寫首字母轉(zhuǎn)換。使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規(guī)則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。

復(fù)制代碼

代碼如下:

none 沒有變化
uppercase 全大寫
lowercase 全小寫
capitalize 單詞首字母大寫

5.文本裝飾：text-decoration

值	描述
none	默認(rèn)。定義標(biāo)準(zhǔn)的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。=
blink	定義閃爍的文本。
inherit	規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值。

在一個規(guī)則中結(jié)合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規(guī)則如下：

復(fù)制代碼

代碼如下:

a:link a:visited {text-decoration: underline overline;}

如果兩個不同的裝飾都與同一元素匹配，勝出規(guī)則的值會完全取代另一個值。請考慮以下的規(guī)則：

復(fù)制代碼

代碼如下:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

對于給定的規(guī)則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因為 text-decoration 值會替換而不是累積起來。

6.處理空白格
white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。