css入門教程資料（4）

餘二五發表於2017-11-14
CSS
控制顏色和背景的樣式包括顏色屬性、背景顏色、背景圖片、背景圖片重複、背景圖片固定、背景定位六個部分。
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”
左下箭頭形
本文轉自 牛海彬 51CTO部落格，原文連結：http://blog.51cto.com/newhappy/76819，如需轉載請自行聯絡原作者


相關文章