4． text－indent文本缩进

text－indent文本缩进属性是用来指定文本的第一行的缩进。

p ｛text－indent：50px；｝5． letter－spacing 设置字符间距

增加或减少字符之间的空间。

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

6．  line－height设置行高

指定在一个段落中行之间的空间。

＜html＞    ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞项目＜／title＞        ＜style＞            p．small ｛                line－height： 70％；            ｝
           p．big ｛                line－height： 200％；            ｝＜／style＞    ＜／head＞
   ＜body＞        ＜p＞            This is a paragraph with a standard line－height．＜br＞ This is a paragraph with a standard line－height．＜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－height．＜br＞ This is a paragraph with a smaller line－height．＜br＞ This is a paragraph with a smaller line－height．＜br＞ This is a paragraph with a smaller line－height．＜br＞        ＜／p＞
       ＜p class＝＂big＂＞            This is a paragraph with a bigger line－height．＜br＞ This is a paragraph with a bigger line－height．＜br＞ This is a paragraph with a bigger line－height．＜br＞ This is a paragraph with a bigger line－height．＜br＞        ＜／p＞
   ＜／body＞
＜／html＞

7．  word－spacing 设置字间距

增加一个段落中的单词之间的空白空间。

＜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 设置元垂直居中

设置文本的垂直对齐图像。

＜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 设置文本阴影

设置文本阴影。

＜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＞

三、总结

本文主要介绍了CSS文本样式实际应用中应该如何去操作，通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示，能够更直观的看到运行的效果，能够更好的理解。使用Html语言，代码结构更佳的清晰，能够帮助你更好的学习。