CSS的文本樣式

首行縮進(text-indent)

咱們原來說過段落標籤能夠用<p>標籤表示，可是<p>標籤沒有直接設置首行縮進的屬性。不過CSS中的text-indent屬性能夠實現段落的首行縮進。來一段宋詞:

<div id="div01">
        <p class="p01">
            永和九年，歲在癸丑，暮春之初，會於會稽山陰之蘭亭，修禊事也。羣賢畢至，少長鹹集。此地有崇山峻嶺，茂林修竹；又有清流激湍，映帶左右，引覺得流觴曲水，列坐其次。雖無絲竹管絃之盛，一觴一詠，亦足以暢敘幽情。
        </p>
        <p class="p01">
            是日也，天朗氣清，惠風和暢，仰觀宇宙之大，俯察品類之盛，因此遊目騁懷，足以極視聽之娛，信可樂也。
        </p>
    </div>
複製代碼

CSS定義樣式

#div01{
    width: 400px;
    height: auto;
    margin: 0 auto;
}

.p01{
    text-align: left;
    font-size: 15px;
    text-indent: 30px;
}
複製代碼

中文的首行縮進通常都是縮進兩個漢字的距離，因此中文狀況下text-indent的值通常設置成font-size的兩倍，看一下運行效果:

文本對齊(text-align)

CSS中使用text-align控制文本的對齊方位，其有如下幾種對齊方式:

對齊屬性	對齊方式
left	左對齊
center	劇中對齊
right	右對齊
start	塊容器的方向是從左到右，則與left相同;塊容器的方向是從右到左，則與right相同
end	若是塊容器的方向是從左到右，則爲右;若是塊容器的方向是從右到左，則爲左
justify	兩端對齊
inherit	繼承父類的對齊樣式

咱們看一下部分場景效果，爲了便於比對，div中添加了背景色:
text-align:left;

text-align:end;

text-align:center;

start屬性和end屬性是CSS3中引入的，其效果與left和right基本相同，只是在排版方向上略有不一樣。

幾種劃線

以前HTML中要實現上劃線或者下劃線通常都是使用s或者u標籤，可是在CSS中使用text-decoration屬性就能夠定義不一樣的劃線。text-decoration有如下幾個經常使用屬性值:

text-decoration屬性值	說明
none	不添加任何劃線
underline	下劃線
overline	上劃線
line-through	中劃線

<div>
    <p class="underline">下劃線</p>

</div>

<div>
    <p class="overline">上劃線</p>
</div>

<div>

    <p class="through">中劃線</p>

</div>
複製代碼

.underline{

    text-decoration: underline;

}

.overline{

    text-decoration: overline;

}

.through{

    text-decoration: line-through;

}
複製代碼

瀏覽器裏的運行效果:

文字大小寫

英文字母存在大小寫的區分，CSS中的text-transform屬性能夠將文本中的大小寫轉換成統一的大寫或者小寫，text-transform有如下幾個經常使用值:

text-transform屬性值	說明
none	不作任何轉換
uppercase	轉爲大寫
lowercase	轉爲小寫
capitalize	首字母大寫
full-width	將全部字符轉換成全角形式
initial	設置爲默認值
inherit	繼承父類屬性值
unset	initial和inherit二選一

<div>
        <p class="none">none</p>
        <p class="uppercase">uppercase</p>
        <p class="lowercase">lowercase</p>
        <p class="capitalize">capitalize</p>
        <P class="initial">initial</P>
        <P class="inherit">inherit</P>
        <P class="unset">unset</P>
 </div>
複製代碼

.none{
    text-transform: none;
}

.uppercase{
    text-transform: uppercase;
}

.lowercase{
    text-transform: lowercase;
}

.capitalize{
    text-transform:capitalize;
}

.unset{
    text-transform:unset;
}

.initial{
    text-transform:initial;
}

.inherit{
    text-transform:inherit;
}

.unset{
    text-transform: unset;
}
複製代碼

瀏覽器中的運行效果:

行高

CSS中使用line-height來控制每一行的高度，其取值有nomal、百分比，具體像素值、inherit、initial等，因爲其取值比較多而且具體像素值的單位不一樣效果也不同，篇幅緣由這篇文章就不作具體介紹了。

間距

CSS中使用letter-spacing和word-spacing表示間距和詞間距，使用頻率不高，簡單瞭解便可。