大家好，我是IT共享者，人稱皮皮。這篇文章我們來(lái)講講CSS的文本樣式。

一、文本顏色Color

顏色屬性被用來(lái)設(shè)置文字的顏色。

顏色是通過(guò)CSS最經(jīng)常的指定：

十六進(jìn)制值 － 如＂＃FF0000＂。

一個(gè)RGB值 － ＂RGB（255，0，0）＂。

顏色的名稱 － 如＂紅＂。

一個(gè)網(wǎng)頁(yè)的文本顏色是指在主體內(nèi)的選擇：

＜html＞    ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞項(xiàng)目＜／title＞        ＜style＞            body ｛                color： blue；            ｝
           h1 ｛                color： ＃00ff00；            ｝
           h2 ｛                color： rgb（255， 0， 0）；            ｝＜／style＞    ＜／head＞
   ＜body＞        ＜h2＞hello world＜／h2＞        ＜h1＞welcome to CaoZhou＜／h1＞    ＜／body＞
＜／html＞

注：對(duì)于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。

二、屬性

1． text－align 文本的對(duì)齊方式

文本排列屬性是用來(lái)設(shè)置文本的水平對(duì)齊方式。

文本可居中或?qū)�齊到左或右，兩端對(duì)齊。

當(dāng)text－align設(shè)置為＂justify＂，每一行被展開(kāi)為寬度相等，左，右外邊距是對(duì)齊（如雜志和報(bào)紙）。

＜！doctype html＞＜html lang＝＂en＂＞
   ＜head＞        ＜meta charset＝＂UTF－8＂＞        ＜title＞Document＜／title＞        ＜style＞            h1 ｛                text－align： center；            ｝
           p．date ｛                text－align： right；            ｝
           p．main ｛                text－align： justify；            ｝＜／style＞    ＜／head＞
   ＜body＞
       ＜p class＝＂date＂＞2015 年 3 月 14 號(hào)＜／p＞        ＜p class＝＂main＂＞　從前有個(gè)書(shū)生，和未婚妻約好在某年某月某日結(jié)婚。到那一天，未婚妻卻嫁給了別人。書(shū)生受此打擊， 一病不起�！　∵@時(shí)，路過(guò)一游方僧人，從懷里摸出一面鏡子叫書(shū)生看。書(shū)生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過(guò)一人， 看一眼，搖搖頭，走了。又路過(guò)一人，將衣服脫下，給女尸蓋上，走了。再路過(guò)一人，過(guò)去，挖個(gè)坑，小心翼翼把尸體掩埋了�！　∩�人解釋道， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個(gè)路過(guò)的人，曾給過(guò)他一件衣服。她今生和你相戀，只為還你一個(gè)情。但是她最終要報(bào)答一生一世的人，是最后那個(gè)把她掩埋的人，那人就是他現(xiàn)在的丈夫。書(shū)生大悟，病愈。
       ＜／p＞        ＜p＞＜b＞注意：＜／b＞ 重置瀏覽器窗口大小查看 ＂justify＂ 是如何工作的。＜／p＞    ＜／body＞
＜／html＞

2． text－decoration文本修飾

text－decoration 屬性用來(lái)設(shè)置或刪除文本的裝飾。

從設(shè)計(jì)的角度看 text－decoration屬性主要是用來(lái)刪除鏈接的下劃線：

＜！doctype html＞＜html lang＝＂en＂＞
   ＜head＞        ＜meta charset＝＂UTF－8＂＞        ＜title＞Document＜／title＞        ＜style＞            ．none ｛｝
           ．del ｛                text－decoration： none；            ｝＜／style＞    ＜／head＞
   ＜body＞        ＜p＞原來(lái)的樣子＜／p＞        ＜a href＝＂＃＂ class＝＂none＂＞wwwwwwwwwwwwwwwwww＜／a＞        ＜p＞去掉下劃線＜／p＞        ＜a href＝＂＃＂ class＝＂del＂＞wwwwwwwwwwwwwwwwwwwww＜／a＞    ＜／body＞
＜／html＞

也可以這樣裝飾文字：

＜html＞    ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞項(xiàng)目＜／title＞        ＜style＞            h1 ｛                text－decoration： overline；            ｝
           h2 ｛                text－decoration： line－through；            ｝
           h3 ｛                text－decoration： underline；            ｝＜／style＞    ＜／head＞
   ＜body＞        ＜h1＞This is heading 1＜／h1＞        ＜h2＞This is heading 2＜／h2＞        ＜h3＞This is heading 3＜／h3＞    ＜／body＞
＜／html＞

注：不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常�；煜�用戶。

3． text－transform文本轉(zhuǎn)換

text－transform文本轉(zhuǎn)換屬性是用來(lái)指定在一個(gè)文本中的大寫(xiě)和小寫(xiě)字母。

uppercase：轉(zhuǎn)換為全部大寫(xiě)。

lowercase：轉(zhuǎn)換為全部小寫(xiě)。

capitalize ：每個(gè)單詞的首字母大寫(xiě)。

＜！DOCTYPE html＞＜html＞
   ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞項(xiàng)目＜／title＞        ＜style＞            p．uppercase ｛                text－transform： uppercase；            ｝
           p．lowercase ｛                text－transform： lowercase；            ｝
           p．capitalize ｛                text－transform： capitalize；            ｝＜／style＞    ＜／head＞
   ＜body＞        ＜p class＝＂uppercase＂＞This is some text．＜／p＞        ＜p class＝＂lowercase＂＞This is some text．＜／p＞        ＜p class＝＂capitalize＂＞This is some text．＜／p＞    ＜／body＞
＜／html＞