三．層疊樣式表的格式

一般來說，樣式表的聲明分為選擇符（selector）和塊{}（block），塊里包含屬性（properties）和屬性的取值（value），基本格式如下：

選擇符 {屬性：值}

其它格式1：

選擇符1，選擇符2，選擇符3 {屬性1：值1；屬性2：值2；屬性3：值3}

有時候多個選擇符將使用相同的設置，為了簡化代碼，我們可以一次性為它們設置樣式，并在多個選擇符之間加上“，”來分隔它們。

當有多個屬性的時候，必須在兩個屬性之間用“；”來分隔。

其它格式2：

選擇符1 選擇符2 {屬性1：值1；屬性2：值2；屬性3：值3}

和格式1非常相似，只是在選擇符之間少加了“，”，但作用卻大不相同。表示如果選擇符2包括的內(nèi)容同時包括在選擇符1里的時候，所設置的樣式規(guī)則才起作用。

四．層疊樣式表的分類

為了使網(wǎng)頁的格式不過分的單調(diào)，必需讓相同的選擇符也能分類，并能按照不同的類別來進行不同的樣式設計?；靖袷饺缦拢?br>
選擇符.類別名 {屬性：值}

類別名將可以在HTML的標識符里引用：

< 標識符 class=類別名>網(wǎng)頁內(nèi)容

五．層疊樣式表的偽類

除了上述的分類方式外，為了使分類的使用更靈活多樣，又產(chǎn)生了偽類的概念。類和偽類有什么樣的區(qū)別呢？

一般地說，選擇符可以和多個類采用捆綁的形式來設定，這樣雖然能夠為同一個選擇符創(chuàng)建多種不同的樣式，但捆綁的形式同時也限制了設定的類為其它的選擇符所使用。偽類的產(chǎn)生就是為了解決這個問題，每個預聲明的偽類都可以被所有的HTML標識符引用，當然有些塊級內(nèi)容的設置除外?；靖袷饺缦拢?br>
.偽類名 {屬性：值}

偽類可以被任何標識符在HTML里引用。

<標識符 class=偽類名>網(wǎng)頁內(nèi)容
七．控制文字的樣式

控制文字的樣式包括文字大小寫、文字修飾兩個部分。

1．文字大小寫

文字大小寫使網(wǎng)頁的設計者不用在輸入文字時就完成文字的大小寫，而可以在輸入完畢后，再根據(jù)需要對局部的文字設置大小寫。

基本格式如下：

text-transform: 參數(shù)

參數(shù)取值范圍：

·uppercase：所有文字大寫顯示

·lowercase：所有文字小寫顯示

·capitalize：每個單詞的頭字母大寫顯示

·none：不繼承母體的文字變形參數(shù)

注意：繼承是指HTML的標識符對于包含自己的標識符的參數(shù)會繼承下來。

2．文字修飾

文字修飾的主要用途是改變?yōu)g覽器顯示文字鏈接時的下劃線。

基本格式如下：

text-decoration: 參數(shù)

參數(shù)取值范圍：

·underline：為文字加下劃線

·overline：為文字加上劃線

·line-through：為文字加刪除線

·blink：使文字閃爍

·none：不顯示上述任何效果

八．控制文本的樣式

控制文本的樣式包括單詞距離、字母距離、文本行距、文本水平對齊、文本垂直對齊文本縮進六個部分。

1．單詞間距

單詞間距指的是英文每個單詞之間的距離，不包括中文文字。

基本格式如下：

word-spacing: 間隔距離

間隔距離的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。

2．字母間距

字母間距是指英文字母之間的距離，功能、用法，以及參數(shù)的設置和單詞間距很相似。

基本格式如下：

letter-spacing: 字母間距

3．行距

行距是指上下兩行基準線之間的垂直距離。一般地說，英文五線格練習本，從上往下數(shù)的第三條橫線就是計算機所認為的該行的基準線。

基本格式如下：

line-height: 行間距離

行間距離取值：

·不帶單位的數(shù)字：以1為基數(shù)，相當于比例關(guān)系的100%

·帶長度單位的數(shù)字：以具體的單位為準

·比例關(guān)系

注意：如果文字字體很大，而行距相對較小的話，可能會發(fā)生上下兩行文字互相重疊的現(xiàn)象。

4．文本水平對齊

文本水平對齊可以控制文本的水平對齊，而且并不僅僅指文字內(nèi)容，也包括設置圖片、影像資料的對齊方式。

基本格式如下：

text-align: 參數(shù)

參數(shù)的取值：

·left：左對齊

·right：右對齊

·center：居中對齊

·justify：相對左右對齊

但需要注意的是，text-alight是塊級屬性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等標識符里。

5．文本垂直對齊

文本的垂直對齊應當是相對于文本母體的位置而言的，不是指文本在網(wǎng)頁里垂直對齊。比如說，表格的單元格里有一段文本，那么對這段文本設置垂直居中就是針對單元格來衡量的，也就是說，文本將在單元格的正中顯示，而不是整個網(wǎng)頁的正中。

基本格式如下：

vertical-align: 參數(shù)

參數(shù)取值：

·top：頂對齊

·bottom：底對齊

·text-top：相對文本頂對齊

·text-bottom：相對文本底對齊

·baseline：基準線對齊

·middle：中心對齊

·sub：以下標的形式顯示

·super：以上標的形式顯示

6．文本縮進

文本縮進可以使文本在相對默認值較窄的區(qū)域里顯示，主要用于中文板式的首行縮進，或是為大段的引用文本和備注做成縮進的格式。

基本格式如下：

text-indent: 縮進距離

縮進距離取值：

·帶長度單位的數(shù)字

·比例關(guān)系

但是需要注意的是，在使用比例關(guān)系的時候，有人會認為瀏覽器默認的比例是相對段落的寬度而言的，其實事實并非如此，整個瀏覽器的窗口才是瀏覽器所默認的參照物。

另外，text-indent是塊級屬性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等標識符里。
九．控制顏色和背景的樣式

控制顏色和背景的樣式包括顏色屬性、背景顏色、背景圖片、背景圖片重復、背景圖片固定、背景定位六個部分。

1．顏色屬性

基本格式如下：

color: 參數(shù)

顏色參數(shù)取值范圍：

·以RGB值表示

·以16進制（hex）的色彩值表示

·以默認顏色的英文名稱表示

以默認顏色的英文名稱表示無疑是最為方便的，但由于預定義的顏色種類太少，所以更多的網(wǎng)頁設計者喜歡用RGB的方式。RGB方式的好處很多，不但可以用數(shù)字的形式精確地表示顏色，而且也是很多圖像制作軟件（如Photoshop）里默認使用的規(guī)范，這樣一來就為圖片和網(wǎng)頁更好地結(jié)合打下了堅實的基礎。

2．背景顏色

在HTML當中，要為某個對象加上背景色只有一種辦法，那就是先做一個表格，在表格中設置完背景色，再把對象放進單元格。這樣做比較麻煩，不但代碼較多，還要為表格的大小和定位傷些腦筋?，F(xiàn)在用CSS就可以輕松地直接搞定了，而且對象的范圍很廣，可以是一段文字，也可以只是一個單詞或一個字母。

基本格式如下：

background-color: 參數(shù)

參數(shù)取值和顏色屬性一樣。

3．背景圖片

基本格式如下：

background-image: url(URL)

URL就是背景圖片的存放路徑。如果用“none”來代替背景圖片的存放路徑，將什么也不顯示。

4．背景圖片重復

背景圖片重復控制的是背景圖片平鋪與否，也就是說，結(jié)合背景定位的控制可以在網(wǎng)頁上的某處單獨顯示一幅背景圖片。

基本格式如下：

background-repeat: 參數(shù)

參數(shù)取值范圍：

·no-repeat：不重復平鋪背景圖片

·repeat-x：使圖片只在水平方向上平鋪

·repeat-y：使圖片只在垂直方向上平鋪

如果不指定背景圖片重復屬性，瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。

5．背景圖片固定

背景圖片固定控制背景圖片是否隨網(wǎng)頁的滾動而滾動。如果不設置背景圖片固定屬性，瀏覽器默認背景圖片隨網(wǎng)頁的滾動而滾動。為了避免過于花哨的背景圖片在滾動時傷害瀏覽者的視力，所以可以解除背景圖片和文字內(nèi)容的捆綁，該為和瀏覽器窗口捆綁。

基本格式如下：

background-attachment: 參數(shù)

參數(shù)取值范圍：

·fixed：網(wǎng)頁滾動時，背景圖片相對于瀏覽器的窗口而言，固定不動

·scroll：網(wǎng)頁滾動時，背景圖片相對于瀏覽器的窗口而言，一起滾動

6．背景定位

背景定位用于控制背景圖片在網(wǎng)頁中顯示的位置。

基本格式如下：

background-position: 參數(shù)表

參數(shù)取值范圍：

·帶長度單位的數(shù)字參數(shù)

·top：相對前景對象頂對齊

·bottom：相對前景對象底對齊

·left：相對前景對象左對齊

·right：相對前景對象右對齊

·center：相對前景對象中心對齊

·比例關(guān)系

參數(shù)中的center如果用于另外一個參數(shù)的前面，表示水平居中；如果用于另外一個參數(shù)的后面，表示垂直居中。