1.3.2　CSS樣式入門

掌握了CSS選擇器的應(yīng)用，我們要選中HTML文檔中的任何元素都非常容易，在實(shí)際開發(fā)中，常用的選擇器是類選擇器，我們可以根據(jù)組件的不同樣式將其定義為不同的類，通過類選擇器來對組件進(jìn)行樣式定義。

CSS提供了非常豐富的樣式供開發(fā)者進(jìn)行配置，包括元素背景的樣式、文本的樣式、邊框與邊距樣式、渲染的位置等。本節(jié)將為讀者介紹一些常用的樣式配置方法。

1．元素的背景配置

在CSS中，與元素的背景配置相關(guān)的屬性都是以background開頭的。使用CSS對元素的背景樣式進(jìn)行設(shè)置，可以實(shí)現(xiàn)相當(dāng)復(fù)雜的元素渲染效果。常用的背景配置屬性如表1-1所示。

表1-1　CSS背景屬性配置

2．元素的文本配置

元素的文本配置包括對齊方式配置、縮進(jìn)配置、文字間隔配置等。下面的CSS代碼將演示這些文本配置屬性的使用方式。

HTML標(biāo)簽：

     <div class="text">文本配置屬性 HelloWorld</div>

CSS設(shè)置：

效果如圖1-10所示。

圖1-10　使用CSS對文本元素進(jìn)行配置

3．邊框與邊距配置

使用CSS可以對元素的邊框進(jìn)行設(shè)置，例如設(shè)置元素的邊框樣式、寬度、顏色等。示例代碼如下：

HTML元素：

     <div class="border">設(shè)置元素的邊框</div>

CSS設(shè)置：

上面的示例代碼中，border-style屬性用于設(shè)置邊框的樣式，例如solid將其設(shè)置為實(shí)線；border-width屬性用于設(shè)置邊框的寬度，border-color屬性用于設(shè)置邊框的顏色。上面的代碼運(yùn)行后的效果如圖1-11所示。

圖1-11　邊框設(shè)置效果

使用border開頭的屬性配置會默認(rèn)對元素的4個邊框都進(jìn)行設(shè)置，也可以單獨(dú)對元素某個方向的邊框進(jìn)行配置，使用border-left、border-right、border-top、border-bottom開頭的屬性進(jìn)行設(shè)置即可。

元素定位是CSS非常重要的功能之一，我們看到的網(wǎng)頁之所以多姿多彩，都要?dú)w功于CSS可以靈活地對元素進(jìn)行定位。

在網(wǎng)頁布局中，CSS盒模型是一個非常重要的概念，其通過內(nèi)外邊距來控制元素間的相對位置。盒模型結(jié)構(gòu)如圖1-12所示。

圖1-12　CSS盒模型示意圖

可以通過CSS的height和width屬性控制元素的寬度和高度，padding相關(guān)的屬性可以設(shè)置元素的內(nèi)邊距，可以使用padding-left、padding-right、padding-top和padding-bottom控制4個方向上的內(nèi)邊距。margin相關(guān)的屬性用來控制元素的外邊距，使用margin-left、margin-right、margin-top和margin-bottom控制4個方向的外邊距。通過margin和padding的設(shè)置，可以靈活地控制元素間的相對位置。示例如下：

HTML元素：

     <span class="sp1">sp1</span>
     <span class="sp2">sp2</span>
     <span class="sp3">sp3</span>
     <span class="sp4">sp4</span>

CSS設(shè)置：

頁面渲染效果如圖1-13所示。

圖1-13　控制元素內(nèi)外邊距

需要注意，上面的元素之所以在一行展示，是因?yàn)閟pan標(biāo)簽定義的元素默認(rèn)為行內(nèi)元素，不會自動換行布局。

關(guān)于元素的絕對定位與浮動的相關(guān)內(nèi)容，不作為我們要了解的重點(diǎn)，在本書后續(xù)的測試案例中，我們會逐步使用這些技術(shù)為讀者演示。