CSS文本屬性使您可以非常有效地輕松定義幾種文本樣式,例如顏色,對(duì)齊方式,間距,裝飾,變換等。
CSS具有幾個(gè)用于定義文本樣式的屬性。這些屬性使您可以精確控制字符,空格,單詞,段落等的視覺外觀。
您可以設(shè)置元素的以下文本屬性:
文本顏色由CSS color屬性定義。了解更多關(guān)于color。
h1 { color: #ff0000; } p { color: green; }測(cè)試看看?/?
注意:盡管文本的顏色看起來像是CSS文本的一部分,但實(shí)際上是CSS中的獨(dú)立屬性。
該text-align屬性用于設(shè)置文本的水平對(duì)齊方式。
此屬性可能的值有:left,right,center,justify,和inherit。
h1 { text-align: center; } p { text-align: justify; }測(cè)試看看?/?
注意:當(dāng)將text-align設(shè)置成justify時(shí),可以將內(nèi)容分散對(duì)齊,但是此屬性只能對(duì)齊非最后一行的內(nèi)容。。
該text-decoration屬性用于設(shè)置或刪除文本裝飾。
此屬性的可能值有:none,underline,overline,line-through,blink和inherit。您應(yīng)避免在非鏈接的下劃線文本,否則可能會(huì)使訪問者感到困惑。
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }測(cè)試看看?/?
警告:大多數(shù)瀏覽器都不支持blinkCSS text-decoration屬性的值。您應(yīng)該避免使用此值。
該text-decoration屬性通常用于從超鏈接中刪除默認(rèn)下劃線。完全刪除下劃線可能會(huì)使訪問者感到困惑。除非您提供其他視覺提示以使其脫穎而出,同時(shí)還要設(shè)計(jì)鏈接的樣式。
例如,您可以使用點(diǎn)而不是實(shí)線在鏈接下劃線。
a { text-decoration: none; border-bottom: 1px dotted; }測(cè)試看看?/?
注意:創(chuàng)建HTML鏈接時(shí),內(nèi)置在樣式表中的瀏覽器會(huì)自動(dòng)在其下劃線,以便讀者可以看到可單擊的文本。
該text-transform屬性用于設(shè)置文本的大小寫。
它可用于將元素的文本內(nèi)容設(shè)置為大寫或小寫字母,或?qū)⒚總€(gè)單詞的首字母大寫。對(duì)于可能的值text-transform屬性有:none,capitalize,uppercase,lowercase和inherit。
p.up { text-transform: uppercase; } p.cap { text-transform: capitalize; } p.low { text-transform: lowercase; }測(cè)試看看?/?
該text-indent屬性用于設(shè)置元素的第一行文本的縮進(jìn)。該text-indent屬性的可能值為:百分比(%),長(zhǎng)度(指定縮進(jìn)空間)或inherit。
下面的示例演示如何縮進(jìn)段落的第一行。
p { text-indent: 100px; }測(cè)試看看?/?
注意:文本是從左側(cè)還是從右側(cè)縮進(jìn)取決于CSS direction屬性定義的元素內(nèi)文本的方向。
word-spacing用于設(shè)置單詞之間間距的屬性。
字間距可能會(huì)受到文本對(duì)齊方式的影響。查看text-align屬性。
保留空白時(shí),所有空格字符均受單詞間距的影響。請(qǐng)參閱CSS white-space屬性。
該word-spacing屬性的可能值為:length(指定單詞之間要插入的空格)normal和inherit。
p.one { word-spacing: 20px; } p.two { word-spacing: 20px; text-align: justify; } p.three { word-spacing: 20px; white-space: pre; }測(cè)試看看?/?
該letter-spacing屬性用于設(shè)置文本字符之間的額外間距。
此屬性的可能值為:length(指定默認(rèn)字符間空格normal以及字符之間要插入的額外空格)和inherit。
h1 { letter-spacing: -3px; } p { letter-spacing: 10px; }測(cè)試看看?/?
該line-height屬性定義一行文本的高度(也稱為Lead)。
此屬性可能的值是:百分比(%),長(zhǎng)度,數(shù)量,normal和inherit。
p { line-height: 1.2; }測(cè)試看看?/?
當(dāng)值為數(shù)字時(shí),通過將元素的字體大小乘以數(shù)字來計(jì)算行高。而百分比值則相對(duì)于元素的字體大小。
注意:不允許該屬性的負(fù)值。此屬性也是字體簡(jiǎn)寫屬性的組成部分。
如果line-height屬性的值大于font-size元素的值,則此差異(稱為“領(lǐng)先”)將切成兩半(稱為“半領(lǐng)先”),并均勻分布在in的頂部和底部行框。
p { font-size: 14px; line-height: 20px; background-color: #f0e68c; }測(cè)試看看?/?
要了解有關(guān)文本樣式的更多信息,請(qǐng)參見字體和文本相關(guān)屬性。