一、屬性列表


二、常用屬性


三、一些特殊效果：

1、z-index:設(shè)置DIV的層疊順序。用z-index屬性時，position必需要指定為absolute才行。

2、cursor:設(shè)置DIV上光標(biāo)的樣式。

3、clip:設(shè)置剪輯矩形。clip:rect(top right bottom left);設(shè)置上下左右的距離,但此時要把position指定為absolute。

4、opacity 透明度 filter:alpha(opacity=value) eg：filter:alpha(opacity=50);opacity:0.5;

四、定位和控制

絕對定位和相對定位 （position）

絕對定位：

定位屬性將是網(wǎng)蟲們打開幸福之門的鑰匙：

H4 { position: absolute; left: 100px; top: 43px }

這項CSS規(guī)則讓瀏覽器將<H4>的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這里唯一設(shè)置了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽窗口。

左邊和頂部屬性很直觀，左邊（left）設(shè)定要素距瀏覽器窗口左邊的距離，頂部（top）設(shè)定距離瀏覽器窗口頂部的距離。設(shè)定這些距離時，你可以使用所學(xué)過的各種度單位或比例值。使用比例值時，比例值的是相對于母體要素的尺寸。

你可以定位什么呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。

相對定位：

絕對定位使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設(shè)置。相對定位指你所定位的要素的位置相對于在文件中所分配的位置。例：

I { position: relative; left: 40px; top: 10px }

相對定位的關(guān)鍵在于定位了的要素的位置是相對于它通常應(yīng)在的位置進(jìn)行定位。相對定位單元出現(xiàn)在普通的靜態(tài)定位單元的行間，定位時沒有把自己和靜態(tài)定位單元完全分開。如果你停止使用相對定位，則文字的顯示位置將恢復(fù)正常。使用相對定位時要小心，否則容易將頁面弄得非常亂。

除了相對定位和絕對定位，你還可以使用static（靜止）參數(shù)值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設(shè)置。也就是說，除了邊距特性，或通過使用 float 特性來浮動單元可影響單元的定位外，其它均不可以。

定位單元的控制 （width、height、visiblility）

除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁面的可視性。

寬度：定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設(shè)定字符向右流動的限制，即設(shè)定要素的寬度。

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

瀏覽器接到這項規(guī)則時，它將文字按照規(guī)則規(guī)定的效果顯示，還將段落的最大水平尺寸限制在150象素。

寬度屬性只適用于絕對定位的要素。你可以使用我們學(xué)過的任何一種長度單位，或使用比例值設(shè)定寬度，比例值指相對于母體要素的比例。IE 4中，這項屬性還可用于圖象。你可以通過寬度設(shè)置人為地拉寬或壓縮圖象。

高度：理論上講，高度應(yīng)該和寬度的設(shè)置類似，只不過是在垂直方向上：

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

這里我用了“理論上講”，因為有些瀏覽器不支持高度屬性。

可視性：利用CSS，你可以隱藏要素，使其在頁面上看不見。這條屬性對于定位了的和未定位的要素都適用。

H4 { visibility: hidden }

選項：

visible 使要素可以被看見

hidden 使要素被隱藏

inherit 指它將繼承母體要素的可視性設(shè)置。

值 inherit 為缺省值。這使單元繼承父單元的可見性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見性取代。例如，段內(nèi)的 EM 單元被指定為可見，這時如果該段被隱藏，則段內(nèi)的所有其它內(nèi)容都將消失，而唯有 EM 單元中的文本是可見的。

當(dāng)一個要素被隱藏后，它仍然要占據(jù)瀏覽器窗口中的原有空間。所以，如果你將文字包圍在一幅被隱藏的圖象周圍，那么，其顯示效果將是文字包圍著一塊空白區(qū)域。此新聞

這條屬性在編寫語言和使用動態(tài)HTML時很有用，比如你可以使某段落或圖象只在鼠標(biāo)滑過時才顯示。

單元層次 （z-index）

特性 z-index 用于堆疊屏幕上的單元。缺省情況下，單元堆疊的順序為它們出現(xiàn)在HTML標(biāo)記的順序——也就是說，后出現(xiàn)單元堆疊在早出現(xiàn)單元的上面。Z-index 特性實際上定義同屬（sibling）單元的堆疊順序以及單元相對父單元的堆疊。按照規(guī)范草案，具有正 z-index 值的單元群都堆疊在父單元之上，它們自己的堆疊順序則按其取值的大小來決定（值大的單元在上層）。同樣，具有負(fù) z-index 值的單元群都堆疊在父單元之下，它們自己的堆疊順序也按取值的大小來定（值大的單元在上層，例如值為 -1 的單元在值為 -2 的單元的上面）。

該參數(shù)值使用純整數(shù)。z-index用于絕對定位或相對定位了的要素。你也可以給圖象設(shè)定z-index。（對于Communicator，最好將 <IMG>標(biāo)簽包在<SPAN>或 <DIV>標(biāo)簽內(nèi)，然后將z-index應(yīng)用到<SPAN>或 <DIV>。）

剪輯絕對定位單元 （clip）

絕對定位單元可以被剪輯——也即剪輯顯示給用戶的區(qū)域，只顯示單元的一部分而把其余部分作透明處理。對于傳統(tǒng)的基于文本和圖像的網(wǎng)絡(luò)頁面，這并不是一個很有用的特征。但若要求多媒體頁面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支持多媒體頁面，它們通過文檔的腳本接口動態(tài)地調(diào)整單元周圍的剪輯區(qū)，從而實線文本“劃入”和圖像漸顯等顯示特征。

在CSS中，剪輯通過 clip 特性來控制，這一特性只能用于絕對定位單元，其缺省值為 auto，按單元的外邊緣來剪輯單元（實際上等于沒有剪輯）。另外，可通過如下表達(dá)式設(shè)置剪輯框：

clip : rect(top,right.bottom,left) ;

其中 top、right、bottom 和 left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對于被剪輯單元左上角的位置。Top、right、bottom 和 left 的值可以為任意絕對或相對長度值（但不能為百分比值），或者是關(guān)鍵字 auto。取值為 auto 意味著剪輯區(qū)域的各邊放好以后，被剪輯單元中的任何內(nèi)容都不會超出這個區(qū)域。

控制單元溢出 （overflow）

固定絕對或相對定位單元的 width 和 height，很可能會因為指定的區(qū)域不能滿足單元實際內(nèi)容的需要，而造成單元內(nèi)容溢出。這時可使用 overflow 來指定瀏覽器如何處理溢出：值 none（缺省值）允許瀏覽器顯示溢出的內(nèi)容，因此單元可溢出指定的區(qū)域。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內(nèi)容，這樣，超出指定區(qū)域的單元內(nèi)容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內(nèi)容（同 clip），不過，瀏覽器應(yīng)該（如果可能的話）為單元提供滾動條以使用戶能通過滾動來瀏覽被剪輯的內(nèi)容