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