1.3.2　CSS樣式入門

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

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

1.元素的背景配置

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

2.元素的文本配置

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

HTML標(biāo)簽：

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

CSS設(shè)置：

【代碼片段1-10　源碼見附件代碼/第1章/3.selector.html】

效果如圖1-10所示。

3.邊框與邊距配置

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

HTML元素：

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

CSS設(shè)置：

【代碼片段1-11　源碼見附件代碼/第1章/3.selector.html】

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

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

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

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

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

【代碼片段1-12　源碼見附件代碼/第1章/3.selector.html】

HTML元素：

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

CSS設(shè)置：

頁(yè)面渲染效果如圖1-13所示。

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

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