第四章 顏色背景的CSS

本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

   

🎼 Ｓ的指令介紹了！本章有兩個介紹的主題，第一個部份介紹的是顏色與背景性質的ＣＳＳ，其主要的作用在於設定元素的前景顏色、背景顏色與背景圖形等樣式設定的性質；而第二部會為您介紹的是用來控制擺放元素位置的ＣＳＳ的指令。

顏色背景的Ｃ　Ｓ　Ｓ　指令

   

４ＣＣＣＥ顏色使用的相關說明預設值：視瀏覽器而定繼承性：有一般範例：SPAN { color : BLUE }同軸範例：background-color　設定背景顏色支援：ＩＥ４、 ＮＣ４適用：所有元素可能值：設定顏色，請參考第一章顏色所使用的相關說明transparent將父元素（顏色或圖案）的背景透明化預設值：transparent繼承性：無一般範例： BODY { background-color : BLUE }同軸範例：background-image　設定背景圖形支援：ＩＥ４、ＮＣ４適用：所有元素可能值：< ;url>設定圖檔URL，請參考第一章URL表示的相關說明none不使用背景圖案預設值：transparent繼承性：無一般範例：BODY { background-image : URL("http://yourweb /path/file_name") }同軸範例：background-repeat　設定背景重複支援：ＩＥ４、ＮＣ４適用：所有元素可能值：repeat重複背景圖形填滿頁面repeat-x水平方向重複背景圖形repeat-y垂直方向重複背景圖形no-repeat不重複顯示背景圖形預設值：repeat繼承性：無一般範例： BODY { background-repeat : repeat- x }同軸範例：background-attachment　設定背景附著支援：ＩＥ４、ＮＣ４適用：所有元素可能值：scroll背景圖形隨著捲軸捲動fixed背景圖形隨著捲軸捲動（浮水印）預設值：scrool繼承性：無一般範例：BODY { background-attachment : fixed }同軸範例：background-position　設定背景位置支援：ＩＥ４、ＮＣ４適用：區塊元素 可能值： X% Y%圖形上X% Y%的點對準元素的X% Y %位置 X Y將圖形左上角置於元素左上角水平X垂直Y之處center背景圖形置於中央left背景圖形對左邊right背景圖形對右邊top背景圖形對頂部bottom背景圖形對底部預設值：0% 0%繼承性：無一般範例：BODY { background- position : 100% 50% }同軸範例：background　綜合設定背景性質支援：ＩＥ３、ＩＥ４、ＮＣ４可能適用：所有元素-color設定背景顏色background-image設定背景圖形background-repeat設定背景重複background-attachment設定背景附著background-position設定背景位置預設值：無繼承性：無一般範例：BODY { BLUE url (image/gif) repeat-x fixed center }同軸範例：     



float　設定浮動性質（多用於文繞圖的情形）支援：ＩＥ４、ＮＣ４適用：區塊元素或圖形可能值：left元素靠左，文字圍繞其右right元素靠右，文字圍繞其左none預設的方法顯示預設值：none繼承性：無一般範例：DIV { float : right }同軸範例：

clear　設定清除性質（設定是否允許浮動元素之存在）支援：ＩＥ４適用：區塊元素或圖形可能值：both若兩邊有浮動元素，則該元素移至浮動元素下方left若左邊有浮動元素，則該元素移至浮動元素下方right若右邊有浮動元素，則元素移至浮動元素下方none以預設的方法顯示預設值：none繼承性：無一般範例：DIV { clear : right }同軸範例：

width設定寬度支援：ＩＥ４、ＮＣ４適用：區塊元素或圖形可能值：長度單位，請參考第一章基本單位的相關說明百分比，以父元素寬度為基準auto以固定比例自動變化大小預設值：auto繼承：無一般範例：DIV { width : 300pt }同軸範例：

height　設定高度支援：ＩＥ４、ＮＣ４適用：區塊元素或圖形可能值：長度單位，請參考第一章基本單位的相關說明百分比，以父元素寬度為基準auto以固定比例自動變化大小預設值：auto繼承性：無一般範例：DIV { height : 300pt }同軸範例：

position　設定位置支援：ＩＥ４、ＮＣ４適用：區塊元素可能值：absolute以父元素為基準，擺設在特定位置上relative相鄰元素為基準，擺設在特定位置上static預設位置，以該元素於原始碼中位置而定預設值：absolute繼承：無一般範例：DIV { position : static }同軸範例：

top　設定頂端位置支援：ＩＥ４、ＮＣ４適用：區塊元素可能值：長度單位，請參考第一章基本單位的相關說明百分比，以父元素寬度為基準auto以正常方式顯示預設值：auto繼承性：無一般範例：DIV { top : 30pt }同軸範例：

left　設定左端位置支援：ＩＥ４、ＮＣ４適用：區塊元素可能值：長度單位，請參考第一章基本單位的相關說明百分比，以父元素寬度為基準auto以正常方式顯示預設值：auto繼承性：無一般範例：DIV { left : 30pt }同軸範例：

clip　設定裁切（設定某區域形狀及大小，區域外通透）支援：ＩＥ４、ＮＣ４適用：區塊元素元素可能值：rect(top,right,bottom,left)設定矩形之上右下左長度，會自動比對對邊長度一般寫法為rect(0,長度,長度,0)不可以寫成rect(0 ,0,長度,長度)四個數值皆可"auto"取代auto以正常方式顯示預設值：auto繼承性：無一般範例：DIV { clip : rect(0,100px,50px,0) }同軸範例：

overflow　設定溢位處理（控制當元素內容超過該元素大小時的顯示方式）支援：ＩＥ４適用：區塊元素 可能值： visible元素將不會依所設訂大小顯示，而能看見所有內容hidden超過元素所設訂大小之部將被隱藏不予顯示scroll如有必要出現捲軸可讓使用者看到全部的內容auto以預設的方式顯示預設值：auto繼承：無一般範例：DIV { overflow : scroll }同軸範例：

visibility　設定可視度支援：ＩＥ４、ＮＣ４適用：所有元素可能值：visible設定此元素顯示hidden設定此元素不顯示，但仍佔據空間inherit以父元素視覺度決定預設值：inherit繼承性：無一般範例：DIV { visibility : hidden }同軸範例：

z-index　設定Ｚ軸參數（三度空間）支援：ＩＥ４、ＮＣ４適用：區塊元素可能值：十進位數值，數值大的元素元素會出現在數值小的元素的上方auto當元素位置重複時，原始碼中寫在後面元素會出現在寫在前面元素的上方預設值：auto繼承性：無一般範例：DIV { z-index : 3 }同軸範例：

   

 以上就是第四章顏色背景的CSS的內容，更多相關內容請關注PHP中文網（www.php.cn）！