ＣＳＳ技術優勢及其濾鏡應用

陳玉萍

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

[關鍵詞]CSS 層疊 樣式 濾鏡

中圖分類號：TP3文獻標識碼：A文章編號：1671－7597（2009）0510109－01

一、CSS概述

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

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

二、CSS的優勢

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

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

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

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

三、CSS的濾鏡屬性在動態網站中的應用舉例

在開發動態網站中，CSS的作用不容忽視。很多時候，需要結合CSS來動態控制網頁的布局，以及利用CSS來設計動態網頁的顯示效果。

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

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

filter：filtername（parameters）

Filter：是濾鏡屬性選擇符;

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

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

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

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

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

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

四、結論

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

參考文獻：

[1]席一凡，《動態網頁設計教程》，2004.

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

[3]朱俊、汪舒銀，《CSS在網頁設計中的應用》，2007.