2.1 CSS簡介

第1章已經(jīng)介紹過，HTML網(wǎng)頁實(shí)際包含網(wǎng)頁的內(nèi)容及網(wǎng)頁的排版布局兩個(gè)方面：網(wǎng)頁的內(nèi)容主要由需要顯示的文字內(nèi)容、圖片內(nèi)容、各種表單元素等組成；網(wǎng)頁的排版布局則包括顯示網(wǎng)頁內(nèi)容時(shí)所用的顏色、字體、邊框線，以及網(wǎng)頁內(nèi)容的位置和大小尺寸等。CSS就是用于有效地設(shè)計(jì)和實(shí)現(xiàn)網(wǎng)頁排版布局的一組描述或定義。

如圖2-1所示，3個(gè)網(wǎng)頁的內(nèi)容完全一樣，但是它們的排版布局不同，區(qū)別在于左邊的網(wǎng)頁是示例1-9沒有應(yīng)用CSS的效果，中間和右邊的網(wǎng)頁應(yīng)用了兩種不同CSS的效果。

圖2-1 網(wǎng)頁內(nèi)容相同而排版布局不同的效果

CSS是Cascading Style Sheets的縮寫，中文翻譯為“層疊樣式表”。CSS具有下述特點(diǎn)。（1）CSS 通過“樣式”來表示網(wǎng)頁的顏色、字體、背景色、邊框線以及網(wǎng)頁內(nèi)容的位置和大小尺寸等屬性。

（2）一系列樣式組成了“樣式表”。

（3）定義“樣式表”的方式有3種，為外部樣式表文件、內(nèi)部樣式表及元素中的樣式表。如圖2-2所示，外部樣式表文件（如 external.css）定義的是所有網(wǎng)頁的排版規(guī)則，內(nèi)部樣式表（如A、B、C部分）定義的是所在網(wǎng)頁的排版規(guī)則，而元素中的樣式表定義的是所在標(biāo)簽元素的排版規(guī)則。其中，外部樣式表文件可以有效地將網(wǎng)頁內(nèi)容和網(wǎng)頁的排版布局分離，當(dāng)多個(gè)網(wǎng)頁使用了同一個(gè)外部樣式表文件時(shí)，只要修改一個(gè)外部樣式表文件，就可以方便地同時(shí)改變這些網(wǎng)頁的排版布局。

（4）在網(wǎng)頁的標(biāo)記中應(yīng)用“樣式”時(shí)采用的是“層疊式”原則。

圖2-2 樣式表的3種定義方式

CSS是由HTML發(fā)展而來的，因此，與HTML文檔相類似，CSS在不同瀏覽器中的表現(xiàn)效果也會稍有不同。雖然最新版本的CSS3仍然在開發(fā)中，但是大多數(shù)瀏覽器都已經(jīng)支持CSS3的大部分定義。本書將主要介紹適用于大多數(shù)瀏覽器的一些常用的CSS3樣式內(nèi)容，對于CSS3的詳細(xì)規(guī)范內(nèi)容，讀者可以通過萬維網(wǎng)聯(lián)盟網(wǎng)站（https://www.w3.org/TR/CSS/）進(jìn)行查詢。