在前面的章節(jié)介紹完了聲明與應(yīng)用的方法及 一些特性之後，從這章開始，便要正式進入ＣＳＳ的指令介紹了！本章有兩個介紹的主 題，個部份介紹的是顏色與背景性質(zhì)的ＣＳＳ，其主要的作用在于設(shè)定元素的前景 顏色、背景顏色與背景圖形等樣式設(shè)定的性質(zhì)；而第二部份為您介紹的是用于控制擺放 元素位置的ＣＳＳ的指令。
顏 色 背 景 的�。谩。印。印≈浮×�
color 設(shè)定前景顏色
支 持：ＩＥ３、ＩＥ４、ＮＣ４適 用：所有元素可能值：
設(shè)定顏色，請參考章顏色使用的相關(guān)說明預(yù)設(shè)值：視瀏覽器而定繼承性：有
一般范例：SPAN { color : BLUE }同軸范例：background-color 設(shè)定背景顏色
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
設(shè)定顏色，請參考章顏色使用的相關(guān)說明
transparent
將父元素（顏色或圖案）的背景透明化預(yù)設(shè)值：transparent繼承性：無
一般范例：BODY { background-color : BLUE }同軸范例：background-image 設(shè)定背景圖形
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
設(shè)定圖檔URL，請參考章URL表示的相關(guān)說明
none
不使用背景圖案預(yù)設(shè)值：transparent繼承性：無
一般范例：BODY { background-image : URL("http://yourweb/path/file_name") }同軸范例： background-repeat 設(shè)定背景重復(fù)
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
repeat
重復(fù)背景圖形填滿頁面
repeat-x
水平方向重復(fù)背景圖形
repeat-y
垂直方向重復(fù)背景圖形
no-repeat
不重復(fù)顯示背景圖形預(yù)設(shè)值：repeat繼承性：無
一般范例：BODY { background-repeat : repeat-x }同軸范例：background-attachment 設(shè)定背景附著
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
scroll
背景圖形隨著卷軸卷動
fixed
背景圖形隨著卷軸卷動（浮水�。╊A(yù)設(shè)值：scrool繼承性：無
一般范例：BODY { background-attachment : fixed }同軸范例：background-position 設(shè)定背景位置
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素 可能值：
X% Y%
圖形上X% Y%的點對準(zhǔn)元素的X% Y%位置
X Y
將圖形左上角置于元素左上角水平 X垂直 Y之處
center
背景圖形置于中央
left
背景圖形對 左邊
right
背景圖形對 右邊
top
背景圖形對 頂部
bottom
背景圖形對 底部預(yù)設(shè)值：0% 0%繼承性：無
一般范例：BODY { background- position : 50% }同軸范例：background 綜合設(shè)定背景性質(zhì)
支 持：ＩＥ３、ＩＥ４、ＮＣ４適 用：所有元素 可能值：
background-color
設(shè)定背景顏色
background-image
設(shè)定背景圖形
background-repeat
設(shè)定背景重復(fù)
background-attachment
設(shè)定背景附著
background-position
設(shè)定背景位置預(yù)設(shè)值：無繼承性：無
一般范例：BODY { BLUE url(image/gif) repeat-x fixed center }同軸范例：
位 置 擺 放 的�。谩。印。印≈浮×�
float 設(shè)定浮動性質(zhì)（多用于文繞圖的情形）
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素或圖形可能值：
left
元素靠左，文字圍繞其右
right
元素靠右，文字圍繞其左
none
以預(yù)設(shè)的方法顯示預(yù)設(shè)值：none繼承性：無
一般范例：DIV { float : right }同軸范例：clear 設(shè)定性質(zhì)（設(shè)定是否允許浮動元素之存在）
支 持：ＩＥ４適 用：區(qū)塊元素或圖形可能值：
both
若兩邊有浮動元素，則該元素移至浮動元素下方
left
若左邊有浮動元素，則該元素移至浮動元素下方
right
若右邊有浮動元素，則該元素移至浮動元素下方
none
以預(yù)設(shè)的方法顯示預(yù)設(shè)值：none繼承性：無
一般范例：DIV { clear : right }同軸范例：width 設(shè)定寬度
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素或圖形可能值：
長度單位，請參考章基本單位的相關(guān)說明
百分比，以父元素寬度為基準(zhǔn)
auto
以固定比例自動變化大小預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { width : 300pt }同軸范例：height 設(shè)定高度
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素或圖形可能值：
長度單位，請參考章基本單位的相關(guān)說明
百分比，以父元素寬度為基準(zhǔn)
auto
以固定比例自動變化大小預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { height : 300pt }同軸范例：position 設(shè)定位置
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素可能值：
absolute
以父元素為基準(zhǔn)，擺設(shè)在特定位置上
relative
以相鄰元素為基準(zhǔn)，擺設(shè)在特定位置上
static
預(yù)設(shè)位置，以該元素于原始碼中位置而定預(yù)設(shè)值：absolute繼承性：無
一般范例：DIV { position : static }同軸范例：top 設(shè)定頂端位置
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素可能值：
長度單位，請參考章基本單位的相關(guān)說明
百分比，以父元素寬度為基準(zhǔn)
auto
以正常方式顯示預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { top : 30pt }同軸范例：left 設(shè)定左端位置
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素可能值：
長度單位，請參考章基本單位的相關(guān)說明
百分比，以父元素寬度為基準(zhǔn)
auto
以正常方式顯示預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { left : 30pt }同軸范例：clip 設(shè)定裁剪（設(shè)定某區(qū)域形狀及大小，區(qū)域外通透）
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素 可能值：
rect(top,right,bottom,left)
設(shè)定矩形之上右下左長度，會自動比對對邊長度一般 寫法為rect(0,長度,長度,0)不可以寫為rect(0,0,長度,長度)四個數(shù)值皆可以"auto"代替
auto
以正常方式顯示預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { clip : rect(0,100px,50px,0) }同軸范例：overflow 設(shè)定溢位處理（控制當(dāng)元素內(nèi)容超過該元素大小時的顯示方式）
支 持：ＩＥ４適 用：區(qū)塊元素 可能值：
visible
元素將不會依所設(shè)訂大小顯示，而能看見所有內(nèi)容
hidden
超過元素所設(shè)訂大小之部份將被隱藏不予顯示
scroll
如有必要出現(xiàn)卷軸可讓使用者看到全部的內(nèi)容
auto
以預(yù)設(shè)的方式顯示預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { overflow : scroll }同軸范例：visibility 設(shè)定可視度
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
visible
設(shè)定該元素顯示
hidden
設(shè)定該元素不顯示，但仍占據(jù)空間
inherit
以父元素可視度決定預(yù)設(shè)值：inherit繼承性：無
一般范例：DIV { visibility : hidden }同軸范例：z-index 設(shè)定Ｚ軸參數(shù)（三度空間）
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素可能值：
十進位數(shù)值，數(shù)值大的元素會出現(xiàn)在數(shù)值小的元素的上方
auto
當(dāng)元素位置重復(fù)時，原始碼中寫在後面元素會出現(xiàn)在寫在前面元素的上方預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { z-index : 3 }同軸范例：
顏 色 背 景 的 Ｃ�。印。印≈浮×�
color 設(shè)定前景顏色
支 持：ＩＥ３、ＩＥ４、ＮＣ４適 用：所有元素可能值：
設(shè)定顏色，請參考章顏色使用的相關(guān)說明預(yù)設(shè)值：視瀏覽器而定繼承性：有
一般范例：SPAN { color : BLUE }同軸范例：background-color 設(shè)定背景顏色
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
設(shè)定顏色，請參考章顏色使用的相關(guān)說明
transparent
將父元素（顏色或圖案）的背景透明化預(yù)設(shè)值：transparent繼承性：無
一般范例：BODY { background-color : BLUE }同軸范例：background-image 設(shè)定背景圖形
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
設(shè)定圖檔URL，請參考章URL表示的相關(guān)說明
none
不使用背景圖案預(yù)設(shè)值：transparent繼承性：無
一般范例：BODY { background-image : URL("http://yourweb/path/file_name") }同軸范例： background-repeat 設(shè)定背景重復(fù)
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
repeat
重復(fù)背景圖形填滿頁面
repeat-x
水平方向重復(fù)背景圖形
repeat-y
垂直方向重復(fù)背景圖形
no-repeat
不重復(fù)顯示背景圖形預(yù)設(shè)值：repeat繼承性：無
一般范例：BODY { background-repeat : repeat-x }同軸范例：background-attachment 設(shè)定背景附著
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
scroll
背景圖形隨著卷軸卷動
fixed
背景圖形隨著卷軸卷動（浮水�。╊A(yù)設(shè)值：scrool繼承性：無
一般范例：BODY { background-attachment : fixed }同軸范例：background-position 設(shè)定背景位置
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素 可能值：
X% Y%
圖形上X% Y%的點對準(zhǔn)元素的X% Y%位置
X Y
將圖形左上角置于元素左上角水平 X垂直 Y之處
center
背景圖形置于中央
left
背景圖形對 左邊
right
背景圖形對 右邊
top
背景圖形對 頂部
bottom
背景圖形對 底部預(yù)設(shè)值：0% 0%繼承性：無
一般范例：BODY { background- position : 50% }同軸范例：background 綜合設(shè)定背景性質(zhì)
支 持：ＩＥ３、ＩＥ４、ＮＣ４適 用：所有元素 可能值：
background-color
設(shè)定背景顏色
background-image
設(shè)定背景圖形
background-repeat
設(shè)定背景重復(fù)
background-attachment
設(shè)定背景附著
background-position
設(shè)定背景位置預(yù)設(shè)值：無繼承性：無
一般范例：BODY { BLUE url(image/gif) repeat-x fixed center }同軸范例：
位 置 擺 放 的�。谩。印。印≈浮×�
float 設(shè)定浮動性質(zhì)（多用于文繞圖的情形）
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素或圖形可能值：
left
元素靠左，文字圍繞其右
right
元素靠右，文字圍繞其左
none
以預(yù)設(shè)的方法顯示預(yù)設(shè)值：none繼承性：無
一般范例：DIV { float : right }同軸范例：clear 設(shè)定性質(zhì)（設(shè)定是否允許浮動元素之存在）
支 持：ＩＥ４適 用：區(qū)塊元素或圖形可能值：
both
若兩邊有浮動元素，則該元素移至浮動元素下方
left
若左邊有浮動元素，則該元素移至浮動元素下方
right
若右邊有浮動元素，則該元素移至浮動元素下方
none
以預(yù)設(shè)的方法顯示預(yù)設(shè)值：none繼承性：無
一般范例：DIV { clear : right }同軸范例：width 設(shè)定寬度
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素或圖形可能值：
長度單位，請參考章基本單位的相關(guān)說明
百分比，以父元素寬度為基準(zhǔn)
auto
以固定比例自動變化大小預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { width : 300pt }同軸范例：height 設(shè)定高度
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素或圖形可能值：
長度單位，請參考章基本單位的相關(guān)說明
百分比，以父元素寬度為基準(zhǔn)
auto
以固定比例自動變化大小預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { height : 300pt }同軸范例：position 設(shè)定位置
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素可能值：
absolute
以父元素為基準(zhǔn)，擺設(shè)在特定位置上
relative
以相鄰元素為基準(zhǔn)，擺設(shè)在特定位置上
static
預(yù)設(shè)位置，以該元素于原始碼中位置而定預(yù)設(shè)值：absolute繼承性：無
一般范例：DIV { position : static }同軸范例：top 設(shè)定頂端位置
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素可能值：
長度單位，請參考章基本單位的相關(guān)說明
百分比，以父元素寬度為基準(zhǔn)
auto
以正常方式顯示預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { top : 30pt }同軸范例：left 設(shè)定左端位置
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素可能值：
長度單位，請參考章基本單位的相關(guān)說明
百分比，以父元素寬度為基準(zhǔn)
auto
以正常方式顯示預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { left : 30pt }同軸范例：clip 設(shè)定裁剪（設(shè)定某區(qū)域形狀及大小，區(qū)域外通透）
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素 可能值：
rect(top,right,bottom,left)
設(shè)定矩形之上右下左長度，會自動比對對邊長度一般 寫法為rect(0,長度,長度,0)不可以寫為rect(0,0,長度,長度)四個數(shù)值皆可以"auto"代替
auto
以正常方式顯示預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { clip : rect(0,100px,50px,0) }同軸范例：overflow 設(shè)定溢位處理（控制當(dāng)元素內(nèi)容超過該元素大小時的顯示方式）
支 持：ＩＥ４適 用：區(qū)塊元素 可能值：
visible
元素將不會依所設(shè)訂大小顯示，而能看見所有內(nèi)容
hidden
超過元素所設(shè)訂大小之部份將被隱藏不予顯示
scroll
如有必要出現(xiàn)卷軸可讓使用者看到全部的內(nèi)容
auto
以預(yù)設(shè)的方式顯示預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { overflow : scroll }同軸范例：visibility 設(shè)定可視度
支 持：ＩＥ４、ＮＣ４適 用：所有元素可能值：
visible
設(shè)定該元素顯示
hidden
設(shè)定該元素不顯示，但仍占據(jù)空間
inherit
以父元素可視度決定預(yù)設(shè)值：inherit繼承性：無
一般范例：DIV { visibility : hidden }同軸范例：z-index 設(shè)定Ｚ軸參數(shù)（三度空間）
支 持：ＩＥ４、ＮＣ４適 用：區(qū)塊元素可能值：
十進位數(shù)值，數(shù)值大的元素會出現(xiàn)在數(shù)值小的元素的上方
auto
當(dāng)元素位置重復(fù)時，原始碼中寫在後面元素會出現(xiàn)在寫在前面元素的上方預(yù)設(shè)值：auto繼承性：無
一般范例：DIV { z-index : 3 }同軸范例：
上一篇：
第五章 文字性質(zhì)的ＣＳＳ
下一篇：
第三章 ＣＳＳ的應(yīng)用補充