亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

5.1 第5日
在樣式表最后一天的課程中，我們將學習樣式表最精彩的部分：定位和疊放。
我們都知道,在網(wǎng)頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標簽和隱式GIF圖象，即使這樣也不能保證定位的精確，因為瀏覽器和操作平臺的不同會使顯示的結(jié)果發(fā)生變化。
而CSS能使你看到希望的曙光。利用今天我們即將學到的CSS屬性，你可以精確地設定要素的位置，還能將定位的要素疊放在彼此之上，還有...還有......你自己慢慢看吧！
以下是今天將學習的各種屬性：
定位
左邊
頂部
寬度
高度
可視性
z-index
注意：由于CSS定位開發(fā)得比其它CSS屬性晚，所以IE3不支持CSS定位屬性。定位屬性只能用于4.0版的瀏覽器。
下面我們回答第4天留下的小問題。

5.2 絕對定位
定位（左邊和頂部）
定位屬性將是網(wǎng)蟲們打開幸福之門的鑰匙：
H4 { position: absolute; left: 100px; top: 43px }
這項CSS規(guī)則讓瀏覽器將<H4>的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置，請觀看代碼的執(zhí)行效果。
注意這里唯一設置了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽窗口。
左邊和頂部屬性很直觀，左邊（left)設定要素距瀏覽器窗口左邊的距離，頂部(top)設定距離瀏覽器窗口頂部的距離。
設定這些距離時，你可以使用所學過的各種度單位或比例值。使用比例值時，比例值的是相對于母體要素的尺寸。
你可以定位什么呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。范例。

5.3 相對定位
絕對定位使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設置。相對定位指你所定位的要素的位置相對于在文件中所分配的位置。例：
I { position: relative; left: 40px; top: 10px }
請點擊查看代碼的執(zhí)行效果
相對定位的關鍵在于定位了的要素的位置是相對于它通常應在的位置進行定位。如果你停止使用相對定位，則文字的顯示位置將恢復正常。范例。
使用相對定位時要小心，否則容易將頁面弄得非常亂。
除了相對定位和絕對定位，你還可以使用static（靜止）參數(shù)值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設置。
還不錯吧？下面我們將學習如何控制定位了的要素。

5.4 控制定位了的要素
除了控制定位要素的左上角位置，你還可以控制要素的寬度和高度，及要素在頁面的可視性。
寬度
定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字符向右流動的限制，即設定要素的寬度。
DIV { position: absolute; left:
200px; top: 40px; width: 150px }
瀏覽器接到這項規(guī)則時，它將文字按照規(guī)則規(guī)定的效果顯示，還將段落的最大水平尺寸限制在150象素。見范例。
寬度屬性只適用于絕對定位的要素。你可以使用我們學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對于母體要素的比例。
IE 4中，這項屬性還可用于圖象。你可以通過寬度設置人為地拉寬或壓縮圖象。
高度
理論上講，高度應該和寬度的設置類似，只不過是在垂直方向上：
DIV { position: absolute; left: 200px; top: 40px; height:
150px }
這里我用了“理論上講”，因為常用的幾種瀏覽器都不支持高度屬性。（你最多只能在IE
4中用高度設置拉長圖象。）
可視性
利用CSS，你可以隱藏要素，使其在頁面上看不見。這條屬性對于定位了的和未定位的要素都適用。
H4 { visibility: hidden }
我很想給你看一個例子，但是，因為要將它設為看不見，那我這個例子讓你看什么呢？
選項：
visible使要素可以被看見
hidden使要素被隱藏
inherit指它將繼承母體要素的可視性設置。
當一個要素被隱藏后，它仍然要占據(jù)瀏覽器窗口中的原有空間。所以，如果你將文字包圍在一幅被隱藏的圖象周圍，那么，其顯示效果將是文字包圍著一塊空白區(qū)域。
這條屬性在編寫語言和使用動態(tài)HTML時很有用，比如你可以使某段落或圖象只在鼠標滑過時才顯示。
Communicator不支持可視性屬性。只有IE 4的用戶可以享受其美妙之處！

5.5 疊放文字和圖象
下面我將要談到我一直吹噓的在頁面上重疊要素的方法。它不是通過設定邊距負值或采用更小的行高來實現(xiàn)，而是通過......
z-index
當你定位多個要素并將其重疊時，你可以使用z-index來設定哪一個要素應出現(xiàn)在最上層。
H2 { position: relative; left: 10px; top: 0px; z-index: 10
}
H1 { position: relative; left: 33px; top: -35px; z-index: 1 }
觀察這條CSS規(guī)則的執(zhí)行效果（我將<H2>的文字設為綠色，以便你觀察其不同之處）：
Stylesheets
Mania
由于<H2>文字的z-index參數(shù)值更高，所以它顯示在
<H1>文字的上面。（IE 4在MAC機上執(zhí)行這一項時會出問題，它會將<H1>放在最上面。
該參數(shù)值使用純整數(shù)。z-index用于絕對定位或相對定位了的要素。
你也可以給圖象設定z-index。（對于Communicator，最好將
<IMG>標簽包在<SPAN>或 <DIV>標簽內(nèi)，然后將z-index應用到<SPAN>或
<DIV>。）范例。

5.6 同低版本瀏覽器的兼容性
(SORRY! 內(nèi)容暫無)

5.7 放眼未來
World Wide Web組織自規(guī)定了樣式表標準之后并未止步不前。甚至在主要的幾種瀏覽器尚未完全支持CSS功能時，CSS2已經(jīng)在醞釀之中。CSS2的標準已經(jīng)制定。而接下來的問題只是：5.0版本的瀏覽器是否會支持CSS2。
以下簡要介紹CSS的新增功能：
對CSS1的調(diào)整
CSS屬性中又加了幾項，比如icon將意味著文字內(nèi)容的尺寸應符合計算機正在使用的icon文字的尺寸。定義選擇器（selector）和情景選擇器（contextual
selector）的方法也將更加靈活。
新增的“絕技”
新的文字陰影屬性將會受到大家的歡迎。
想使鼠標滑過某一鏈接時鼠標顯示的手形有所改變嗎？你可以使用光標屬性設定鼠標顯示的不同形狀。
記得我們怎樣用 A:active來設定用戶點擊鏈接文字時的屬性嗎？:hover將使我們能夠?qū)崿F(xiàn)當鼠標移到文字上面時就改變文字顯示。很酷吧！
這些只是未來CSS的幾種小把戲。
控制表格
我們設計網(wǎng)頁布局時總是要用到表格，學習完本課程之后，我們還可以用CSS來設計網(wǎng)頁布局。如果利用CSS能更好地控制表格，那該有多好。是的，它能夠做到。
此外，你還能夠控制文件打印時的分頁，你還可以制定某些打印指令。
你還有可能實現(xiàn)通過聲控系統(tǒng)進入你的網(wǎng)頁。諸如voice-family和speech-rate等屬性將設定如何將你的網(wǎng)頁內(nèi)容用聲音自動朗讀出來。

5.8 第5日的練習
熟能生巧。所以我們需要加強實踐。
請觀看本頁，并重新制作出其效果�；蛘咧辽傧氤鲎约簯�該怎樣實踐才能實現(xiàn)這些效果。注意：為使范例能正確顯示，你必須安裝4.0版本的瀏覽器。
（我也充分認識到這個范例做得很傻，這只是一個例子。sorry!）

5.9 復習
祝賀你學完了本次課程！
今天我們學習了定位和疊放，總結(jié)如下：
定位（position）是最令人中意的CSS屬性，你可以利用它精確地控制某要素在頁面的位置。
左邊（left）用于設定要素的水平位置。
頂部（top）用于設定要素的垂直位置。
寬度（width）使你能控制要素的顯示寬度。
高度（height）用于設定要素的高度。
可視性（visibility）用于設定顯示還是隱藏某要素。
z-index使你能設定重疊的要素中那個要素顯示在最上面。
希望本次課程對你有所幫助。還有很多CSS的功能我們還沒有涉及。還有一些小的瀏覽器問題我們也沒有一一列出。所以你自己還必須繼續(xù)深入學習。
互聯(lián)網(wǎng)上的CSS資源
The Official Home of
CSS - World Wide Web組織有關CSS的新聞和動向，包括正式制定的 CSS1 和 CSS2
標準（CSS2目前還只是一個待批準的建議）
Webmonkey's
Stylesheets Collection - 網(wǎng)猴的CSS內(nèi)容集錦。
Web Review Style
Sheets Reference Guide - CSS在不同瀏覽器上的適用規(guī)格最新指南。
CSSCheck
- 檢查你的CSS代碼的語法。
CSS Pointers -
有關CSS相當完整的資源鏈接清單。
comp.infosystems.www.authoring.stylesheets
- Usenet新聞組，共享和探討CSS的問題及解決方案。
感謝你學完了本課程。你現(xiàn)在已經(jīng)掌握了樣式表的威力。你可以利用CSS在互聯(lián)網(wǎng)盡情發(fā)揮自己的創(chuàng)意，體現(xiàn)你的才華！