本章主要了解幾個(gè)常用的用于文本操作的CSS屬性。

1.文本顏色屬性：color

2.文本對齊方式：text-align

3.文本首行縮進(jìn)：text-indnt

4.設(shè)置字體的大小：font-size

5.設(shè)置字體的粗細(xì)：font-weight

6.利用相同的選擇器后定義的優(yōu)先執(zhí)行原理來靈活運(yùn)用選擇器的分組定義

實(shí)例：

HTML代碼：

<div>

? ? ? ? <h1>一級標(biāo)題</h1>

? ? ? ? <h2>二級標(biāo)題</h2>

? ? ? ? <p>段落<b>粗體文字</b></p>

<div>

設(shè)置：

? ? ? 1、希望所有標(biāo)題的顏色是藍(lán)色的，并且字體的粗細(xì)為700。

? ? ? 2、希望一號標(biāo)題為14號字體，并且居中對齊。二號標(biāo)題為12號字體，不需要居中對齊，其它的文本內(nèi)容也為12號字體。

? ? ? 3、希望段落文本的首行要縮進(jìn)兩個(gè)字的距離。

根據(jù)以上要求，寫的CSS樣式：

? ? ?1、 h1,h2{color:blue;font-weight:700;font-size:14px;text-align:center;}；

? ? ?2、 h2{font-size:12px;text-align:left;}；

? ? ?3、p{font-size:12px;text-indent:2em;}；

? ? ? 第一行代碼把h1和h2兩個(gè)標(biāo)題標(biāo)簽的樣式寫在了一起，設(shè)置為一個(gè)組，設(shè)置顏色（color）為藍(lán)色，字體粗細(xì)（font-weight）為700，字體尺寸（font-size）為14像素（px），文本對齊方式（text-align）為居中（center）。

? ? ? 第二行代碼重設(shè)了h2標(biāo)題的字體尺寸（font-size）、文本對齊方式（text-align）這兩個(gè)樣式屬性，設(shè)置12像素，左對齊。相同的選擇器，寫在后面的比寫在前面的優(yōu)先級更高，也就是說寫在后面的會(huì)被優(yōu)先使用，如果說前后兩個(gè)選擇器里面都對同一個(gè)屬性設(shè)置了值（比如說前面的設(shè)置了font-size:14px;后面的設(shè)置了font-xize:12px;）那么后面的那一個(gè)才是有效的，前面設(shè)置的那一個(gè)將不會(huì)被執(zhí)行（font-size:12px被執(zhí)行，font-size:14px將被忽略）。

? ? 第三行代碼設(shè)置p標(biāo)簽字體尺寸（font-size）為12像素（px），文本首行縮進(jìn)（text-indnt）2個(gè)字符（em）。（em是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸。）

效果：