css入門教程資料（4）

九．控制顔色和背景的樣式

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

1．顔色屬性

基本格式如下：

color: 參數

顔色參數取值範圍：

·以RGB值表示

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

·以預設顔色的英文名稱表示

以預設顔色的英文名稱表示無疑是最為友善的，但由于預定義的顔色種類太少，是以更多的網頁設計者喜歡用RGB的方式。RGB方式的好處很多，不但可以用數字的形式精确地表示顔色，而且也是很多圖像制作軟體（如Photoshop）裡預設使用的規範，這樣一來就為圖檔和網頁更好地結合打下了堅實的基礎。

2．背景顔色

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

background-color: 參數

參數取值和顔色屬性一樣。

3．背景圖檔

background-image: url(URL)

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

4．背景圖檔重複

背景圖檔重複控制的是背景圖檔平鋪與否，也就是說，結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景圖檔。

background-repeat: 參數

參數取值範圍：

·no-repeat：不重複平鋪背景圖檔

·repeat-x：使圖檔隻在水準方向上平鋪

·repeat-y：使圖檔隻在垂直方向上平鋪

如果不指定背景圖檔重複屬性，浏覽器預設的是背景圖檔向水準、垂直兩個方向上平鋪。

5．背景圖檔固定

背景圖檔固定控制背景圖檔是否随網頁的滾動而滾動。如果不設定背景圖檔固定屬性，浏覽器預設背景圖檔随網頁的滾動而滾動。為了避免過于花哨的背景圖檔在滾動時傷害浏覽者的視力，是以可以解除背景圖檔和文字内容的捆綁，該為和浏覽器視窗捆綁。

background-attachment: 參數

·fixed：網頁滾動時，背景圖檔相對于浏覽器的視窗而言，固定不動

·scroll：網頁滾動時，背景圖檔相對于浏覽器的視窗而言，一起滾動

6．背景定位

背景定位用于控制背景圖檔在網頁中顯示的位置。

background-position: 參數表

·帶長度機關的數字參數

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

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

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

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

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

·比例關系

參數中的center如果用于另外一個參數的前面，表示水準居中；如果用于另外一個參數的後面，表示垂直居中。 

十．控制清單的樣式

清單是HTML裡一種很有用的顯示方式，可以把相關的并列内容整齊地垂直排列，使網頁顯得整潔專業，并讓浏覽者有一目了然的感覺。

樣式表為清單增加了一些功能，控制清單的樣式包括清單樣式、圖形符号、清單位置三個部分。

1．清單符号

清單符号是指顯示于每一個清單項目前的符号辨別。

list-style-type：參數

·disc：圓形

·circle：空心圓

·square：方塊

·decimal：十進制數字

·lower-roman：小寫羅馬數字

·upper-roman：大寫羅馬數字

·lower-alpha：小寫希臘字母

·upper-alpha：大寫希臘字母

·none：無符号顯示

參數中的disc是預設選項。

2．圖形符号

圖形符号指原來清單的項目符号将可以使用圖形來代替。

list-style-image：URL

URL是用來代替項目符号的圖形檔案的位址，可以使用相對位址或絕對位址。

3．清單位置

清單位置描述清單在何處顯示。

list-style-position：參數

·inside：在BOX模型内部顯示

·outside：在BOX模型外部顯示

這裡又出現了一個新的概念：BOX模型。BOX是指一種容器，包含了應用樣式規則的對象，具體介紹将在後文中給出。

十一．控制使用者界面的樣式

在網頁上，滑鼠平時呈箭頭形，指向連結時成為手形，等待網頁下載下傳時成為沙漏形……這似乎是約定俗成的。雖然這樣的設計能使我們知道浏覽器現在的狀态或是可以做什麼，但這些好像還不能完全地滿足我們的需要。就拿連結來說，可以是指向一個幫助檔案，也可以是向前進一頁或是向後退一頁，針對如此多的功能光靠千篇一律的手形滑鼠是不能說明問題的。值得慶幸的是，CSS提供了多達13種的滑鼠形狀，供我們選擇。

cursor：滑鼠形狀參數

CSS滑鼠形狀參數表：

CSS代碼

滑鼠形狀

style="cursor:hand"

手形

style="cursor:crosshair"

十字形

style="cursor:text"

文本形

style="cursor:wait"

沙漏形

style="cursor:move"

十字箭頭形

style="cursor:help"

問号形

style="cursor:e-resize"

右箭頭形

style="cursor:n-resize"

上箭頭形

style="cursor:nw-resize"

左上箭頭形

style="cursor:w-resize"

左箭頭形

style="cursor:s-resize"

下箭頭形

style="cursor:se-resize"

右下箭頭形

style="cursor:sw-resize"

左下箭頭形