ＣＳＳ技術(shù)優(yōu)勢及其濾鏡應(yīng)用

陳玉萍

[摘要]介紹CSS的兩個核心概念。作為一種制作網(wǎng)頁的技術(shù)，CSS可以控制Web站點的布局和外觀，豐富WEB網(wǎng)頁編輯，實現(xiàn)許多神奇的效果。主要討論CSS的技術(shù)優(yōu)勢及在網(wǎng)頁中如何利用CSS的濾鏡屬性為網(wǎng)頁添加媒體特性。

[關(guān)鍵詞]CSS 層疊 樣式 濾鏡

中圖分類號：TP3文獻(xiàn)標(biāo)識碼：A文章編號：1671－7597（2009）0510109－01

一、CSS概述

CSS（Cascading Style Sheets）也就是層疊樣式表，它可以控制和重設(shè)HTML中的絕大多數(shù)標(biāo)記。如今網(wǎng)頁的排版格式越來越復(fù)雜，很多效果需要通過CSS來實現(xiàn)。CSS有兩個核心概念：層疊和樣式。層疊（Cascading）

也就是說多個CSS樣式可以作用于同一個對象，形成樣式的層疊現(xiàn)象，CSS能夠根據(jù)一套規(guī)則來決定對象應(yīng)該繼承哪些樣式以及顯示為什么樣的效果；樣式（Style）是CSS的基礎(chǔ)，CSS通過一個個樣式來作用于網(wǎng)頁對象，并規(guī)定它們呈現(xiàn)為不同的外觀。網(wǎng)頁的外觀正是通過無數(shù)個大大小小的樣式來描繪的。一個網(wǎng)頁內(nèi)部可能包含無數(shù)個CSS樣式，同時每個CSS樣式內(nèi)部也包含無數(shù)個規(guī)則。

二、CSS的優(yōu)勢

這一點可以分為以下三個主要方面：靈活性、呈現(xiàn)性和可訪問性。

（一）靈活性。每個Web設(shè)計者和開發(fā)者在對布置好的頁面進(jìn)行一點“小小的”更改時，雖然只需要處理有限的幾個頁面，但往往要耗費很多的精力。這是因為定義頁面外觀的標(biāo)記本身是頁面的一部分。也就是Web頁面內(nèi)容與格式不分離。如果能夠從實際頁面的流程（或代碼）中刪除這些標(biāo)記，或者采用更好的辦法，即將其外置，就可以對這些標(biāo)記進(jìn)行集中更改。而這就是CSS所能做的。它的最大特點是讓網(wǎng)頁設(shè)計者在設(shè)計網(wǎng)頁時可以將網(wǎng)頁內(nèi)容（Content）與顯示格式（Format）分開編寫，也即內(nèi)容與表現(xiàn)的分離。比如在傳統(tǒng)的基于表格的布局中，將站點瀏覽從頁面左側(cè)移到頁面右側(cè)需要幾個小時重復(fù)而乏味的工作。但是，如果使用CSS的定位屬性（通常稱作CSS-P）來設(shè)計頁面，只需更改外部樣式表中的“浮動”或“位置”屬性，即可更新頁面。并且可以更新站點中使用該樣式的所有頁面，使網(wǎng)頁的表現(xiàn)非常統(tǒng)一，容易修改。

（二）呈現(xiàn)性。傳統(tǒng)的基于表格的布局是頁面下載速度慢的主要原因。如果使用CSS，瀏覽器從服務(wù)器接收內(nèi)容后，立刻就可以開始呈現(xiàn)過程，因為頁面中沒有或只有很少的顯示標(biāo)記。若使用外部樣式表還有一個潛在的呈現(xiàn)方面的好處。即站點的第一頁將提示瀏覽器將頁面使用的已鏈接樣式表文件緩存起來。從而使用CSS可以減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度，減少硬盤容量?？傊?，基于CSS的站點很容易實現(xiàn)快速更新、外觀一致、代碼教少以及更快的下載速度。

（三）可訪問性。在決定使用何種Web頁面布局工具時，重要的是要考慮哪一種方法最適合實現(xiàn)所需的布局目標(biāo)，并且可以讓大多數(shù)訪問者順利的瀏覽站點。這就是可訪問性問題。利用CSS可以輕松建立可訪問站點。這是因為使用CSS，可以在頁面中完整定義不可視元素。由于CSS沒有顯示標(biāo)記，當(dāng)使用CSS-P進(jìn)行設(shè)計時，設(shè)計者只專注于內(nèi)容的實際“流”，考慮的是它在頁面上的邏輯順序。在查看文檔的源代碼時，段落在文檔的html 中仍然是所看到的位置。這使頁面更容易訪問。

三、CSS的濾鏡屬性在動態(tài)網(wǎng)站中的應(yīng)用舉例

在開發(fā)動態(tài)網(wǎng)站中，CSS的作用不容忽視。很多時候，需要結(jié)合CSS來動態(tài)控制網(wǎng)頁的布局，以及利用CSS來設(shè)計動態(tài)網(wǎng)頁的顯示效果。

例如，在Google新聞咨詢中文主頁中，可以動態(tài)定制網(wǎng)頁的顯示內(nèi)容和方式。實際上它正是通過腳本動態(tài)控制CSS來實現(xiàn)的。如果缺少CSS技術(shù)的支持，設(shè)計類似的網(wǎng)頁動態(tài)效果是非常困難的。下面利用CSS濾鏡屬性使頁面產(chǎn)生多媒體效果。

1．CSS的濾鏡屬性的標(biāo)識符是filter。它的書寫格式是：

filter：filtername（parameters）

Filter：是濾鏡屬性選擇符;

filtername是濾鏡屬性名，這里包括alpha、blur、chroma等等多種屬性;

parameters是表示各個濾鏡屬性的參數(shù)，也正是這些參數(shù)決定了濾鏡將以怎樣的效果顯示。

2．CSS濾鏡使用實例，模擬探照燈動畫效果，如圖1。

下面介紹制作方法：（1）插入一個圖層，作為“父層”，該層用來放要顯示的內(nèi)容（文字或圖片）。再在該層上插入一個層，作為子層，它主要用來產(chǎn)生遮罩效果。也就是當(dāng)子層運動到父層時就可見，在父層之外不可見。（2）在父層屬性面板上設(shè)置顯示窗口，也就是設(shè)置圖層的“Clip”屬性，在該屬性中用的是相對坐標(biāo)，其中：L、T是左上角坐標(biāo)；R、B是右下角坐標(biāo)。以后的子層將只有在你設(shè)置的窗口中才顯示。設(shè)置好的層屬性參數(shù)面板如下圖2。

3．在子層上插一個背景透明的圓形圖片，另外圓外的圖象部分必須透明。然后在子層上加載一個顏色與父層背景顏色相同的mask濾鏡，并把子層拉大，使其能完全覆蓋父層的內(nèi)容，這樣在瀏覽器中父層上的內(nèi)容就只有圓形圖片那一部分能看見。

4．拖動子層，使其上的圖片正好覆蓋父層內(nèi)容的首部，按“Alt+F9”，調(diào)出時間軸面板，把子層拖到時間軸面板上，把最后一幀拖到100幀，再在第50幀插入一個關(guān)鍵幀，并把子層的圖片與父層內(nèi)容的尾部重合，在時間軸面板上選取“Loop”（循環(huán)播放）和“Auto”（自動播放）。

四、結(jié)論

利用CSS所定義的樣式信息可以應(yīng)用到整個網(wǎng)站。它的使用在一定程度上減少了網(wǎng)頁的格式代碼，加快了下載顯示的速度，而且在網(wǎng)頁設(shè)計中利用它的濾鏡特效，使網(wǎng)站的信息更豐富、網(wǎng)頁表現(xiàn)更美觀。

參考文獻(xiàn)：

[1]席一凡，《動態(tài)網(wǎng)頁設(shè)計教程》，2004.

[2]Elizabeth Castro，《HTML XHTMLCSS基礎(chǔ)教程》，2007.

[3]朱俊、汪舒銀，《CSS在網(wǎng)頁設(shè)計中的應(yīng)用》，2007.