4． text－indent文本縮進

text－indent文本縮進屬性是用來指定文本的第一行的縮進。

p ｛text－indent：50px；｝5． letter－spacing 設(shè)置字符間距

增加或減少字符之間的空間。

＜style＞     h1 ｛       letter－spacing：2px；｝      h2 ｛        letter－spacing：－3px；｝＜／style＞

6．  line－h(huán)eight設(shè)置行高

指定在一個段落中行之間的空間。

＜html＞    ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞項目＜／title＞        ＜style＞            p．small ｛                line－h(huán)eight： 70％；            ｝
           p．big ｛                line－h(huán)eight： 200％；            ｝＜／style＞    ＜／head＞
   ＜body＞        ＜p＞            This is a paragraph with a standard line－h(huán)eight．＜br＞ This is a paragraph with a standard line－h(huán)eight．＜br＞ The default line height in most browsers is about 110％ to 120％．＜br＞        ＜／p＞
       ＜p class＝＂small＂＞            This is a paragraph with a smaller line－h(huán)eight．＜br＞ This is a paragraph with a smaller line－h(huán)eight．＜br＞ This is a paragraph with a smaller line－h(huán)eight．＜br＞ This is a paragraph with a smaller line－h(huán)eight．＜br＞        ＜／p＞
       ＜p class＝＂big＂＞            This is a paragraph with a bigger line－h(huán)eight．＜br＞ This is a paragraph with a bigger line－h(huán)eight．＜br＞ This is a paragraph with a bigger line－h(huán)eight．＜br＞ This is a paragraph with a bigger line－h(huán)eight．＜br＞        ＜／p＞
   ＜／body＞
＜／html＞

7．  word－spacing 設(shè)置字間距

增加一個段落中的單詞之間的空白空間。

＜html＞    ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞項目＜／title＞        ＜style type＝＂text／css＂＞            p ｛                word－spacing： 30px；            ｝＜／style＞    ＜／head＞
   ＜body＞
       ＜p＞            This is some text． This is some text．        ＜／p＞
   ＜／body＞
＜／html＞

8． vertical－align 設(shè)置元垂直居中

設(shè)置文本的垂直對齊圖像。

＜html＞    ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞項目＜／title＞        ＜style＞            img｛                width： 200px；                height： 100px；            ｝            img．top ｛                vertical－align： text－top；
           ｝
           img．bottom ｛                vertical－align： text－bottom；
           ｝＜／style＞    ＜／head＞
   ＜body＞        ＜p＞An ＜img src＝＂img／logo．png＂  ／＞ image with a default alignment．＜／p＞        ＜p＞An ＜img class＝＂top＂ src＝＂img／logo．png＂ ／＞ image with a text－top alignment．＜／p＞        ＜p＞An ＜img class＝＂bottom＂ src＝＂img／logo．png＂ ／＞ image with a text－bottom alignment．＜／p＞    ＜／body＞
＜／html＞

9． text－shadow 設(shè)置文本陰影

設(shè)置文本陰影。

＜html＞    ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞項目＜／title＞        ＜style＞         h1｛            text－shadow： 2px 2px ＃FF0000；     ｝＜／style＞    ＜／head＞
   ＜body＞    ＜h1＞Text－shadow effect＜／h1＞    ＜／body＞
＜／html＞

三、總結(jié)

本文主要介紹了CSS文本樣式實際應(yīng)用中應(yīng)該如何去操作，通過講解文本中對應(yīng)的屬性去改變文本的表現(xiàn)形式。使用豐富的效果圖的展示，能夠更直觀的看到運行的效果，能夠更好的理解。使用Html語言，代碼結(jié)構(gòu)更佳的清晰，能夠幫助你更好的學(xué)習(xí)。