第六章：文本
第六章：文本
文本的顯示格式與式樣對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)是一個(gè)重要問(wèn)題。這一課將向你介紹CSS在文本布局方面令人激動(dòng)的特性。本課將對(duì)下列CSS屬性進(jìn)行講解：
文本縮進(jìn)[text-indent]
CSS屬性text-indent用于為段落設(shè)置首行縮進(jìn)，以令其具有美觀(guān)的格式。在下例中，我們?yōu)椴捎?span lang="EN-US">p元素的段落應(yīng)用了30像素的首行縮進(jìn)。
p {
text-indent: 30px;
}
文本對(duì)齊[text-align]
CSS屬性text-align與HTML屬性align的功能相同。該屬性的值可以是：left（左對(duì)齊）、right（右對(duì)齊）或者center（居中）。除了上面三種選擇以外，你還可以將該屬性的值設(shè)為justify（兩端對(duì)齊），即伸縮行中的文字以左右靠齊。報(bào)刊雜志經(jīng)常采用這種布局。
在下例中，標(biāo)題（th）中的文字被設(shè)置為右對(duì)齊，而表中數(shù)據(jù)（td） 被設(shè)置為居中。正常的文本段落被設(shè)置為兩端對(duì)齊。
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
文本裝飾[text-decoration]
CSS屬性text-decoration令我們可以為文本增添不同的“裝飾”或“效果”。例如，你可以為文本增添下劃線(xiàn)、刪除線(xiàn)、上劃線(xiàn)等等。在接下來(lái)的例子中，我們?yōu)?span lang="EN-US">h1標(biāo)題增添了下劃線(xiàn)，為h2標(biāo)題增添了上劃線(xiàn)，為h3標(biāo)題增添了刪除線(xiàn)。
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
字符間距[letter-spacing]
CSS屬性letter-spacing用于設(shè)置文本的`水平字間距。我們可以把期望的字間距寬度作為這個(gè)屬性的值。例如，假如你希望p元素里的文本段落的字間距為3個(gè)像素，而h1標(biāo)?獾淖旨渚轡?b>6個(gè)像素，代碼可以這樣寫(xiě)：
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
文本轉(zhuǎn)換[text-transform]
CSS屬性text-transform用于控制文本的大小寫(xiě)。無(wú)論字母本來(lái)的大小寫(xiě)，你可以通過(guò)該屬性令它首字母大寫(xiě)（capitalize）、全部大寫(xiě)（uppercase）或者全部小寫(xiě)（lowercase）。
比如，單詞“headline”在展現(xiàn)給網(wǎng)頁(yè)瀏覽者時(shí)，可以是“HEADLINE”或者“Headline”。text-transform屬性有四個(gè)可選值：
capitalize
將每個(gè)單詞的首字母轉(zhuǎn)換為大寫(xiě)。例如：“john doe”將被轉(zhuǎn)換為“John Doe”。
uppercase
所有字母都轉(zhuǎn)換為大寫(xiě)。例如：“john doe”將被轉(zhuǎn)換為“JOHN DOE”。
lowercase
所有字母都轉(zhuǎn)換為小寫(xiě)。例如：“JOHN DOE”將被轉(zhuǎn)換為“john doe”。
none
不作任何轉(zhuǎn)換——文本怎么寫(xiě)的就怎么顯示。
來(lái)舉個(gè)例子，我們將使用一個(gè)姓名列表。所有姓名都用<li>（列表項(xiàng)）標(biāo)簽來(lái)標(biāo)記。我們希望對(duì)姓名采用首字母大寫(xiě)的方式，而對(duì)標(biāo)題采用全部大寫(xiě)的方式。
查看過(guò)該例的HTML代碼后你會(huì)發(fā)現(xiàn)，其實(shí)在HTML代碼里我們寫(xiě)的姓名和標(biāo)題全部都是小寫(xiě)。
全部大寫(xiě)
h1 {
text-transform: uppercase;
}
首字母大寫(xiě)
li {
text-transform: capitalize;
}
小結(jié)
在上面三課里，你已經(jīng)學(xué)習(xí)了一些CSS屬性，不過(guò)還有更多需要學(xué)習(xí)。在下一課我們將對(duì)鏈接作有關(guān)介紹。
【第六章：文本】相關(guān)文章：
1.高中作文本色