發現CSS控制項的好處

 

很長時間以來，網路開發人員通過使用圖片和javascript指令碼代碼來開發互動控制項。然而，在許多情況下使用CSS的規則來定義文本超連結的格式將是開發互動式控制項的一個較好選擇。使用CSS技術開發更快更有效，所以現在在眾多網站上看到這種技術已經不是一件奇怪的事情了。

使用傳統方法開發控制項的缺點
 
使用傳統的技術開發一個控制項常常是從用一個包含了一個矩形或其它形狀文本輸入框的小表徵圖開始的。這個控制項也許使用陰影、光效、傾斜或者其它的效果予以修飾，但是它本質也就只是一個包含了文本的架構。

首先，你需要為控制項的每個狀態建立一個獨立的表徵圖。例如，你需要為控制項在預設情況下建立一個表徵圖，還要為其在滑鼠指標指向這個控制項的時候建立一個表徵圖。僅僅是這樣一個簡單的效果，你就需要至少兩個表徵圖（預設和滑鼠指向兩個狀態），如果你要加入點擊和訪問過的狀態，每個控制項就需要三或四個表徵圖。

在你的網頁中加入一個基本的表徵圖用於超連結再簡單不過，只需要牢記輸入合適的位置以滿足訪問需要

為了使你的控制項具有互動性，你需要增加javascript指令碼代碼來使控制項表徵圖能夠在滑鼠事件發生的時候有所反應，比如說在滑鼠指向表徵圖的時候。像Dreamweaver這樣的開發軟體可以使用簡單的滑鼠操作自動添加代碼，但是這些程式碼封裝含了網頁的大小資訊。

為了使得動態效果，你需要預先下載圖片這樣當使用者指向這個控制項的時候瀏覽器能立即改變。預先下載圖片將會使網頁的載入時間變長，而且它的不方便之處還在於即使是使用者不需要使用所有的控制項，它也要載入所有的圖片的。

是什麼使得CSS技術具有優越性？
使用CSS，你可以從一個簡單的文本超連結中建立一個完全的互動控制項。適當的格式化可以把一個段落變化或者分解成一個圍繞著文本超連結的矩形框。在超連結文本中添加動態效果，只需要多幾條簡單的CSS代碼就可以使得控制項具有互動性。與基於表徵圖的空間相比，這個控制項有以下幾個優點：

1、不需要任何的表徵圖。CSS通過格式化文本來建立控制項效果，所以不需要建立任何獨立的表徵圖檔案。

2、你不需要鍵入任何的文字屬性，因為CSS控制項的文本就已經具有了完全的可訪問性。

3、更加有效代碼。CSS規則和分類的代碼比其所取代的javascript指令碼代碼更小，因而瀏覽器執行的更快。

4、沒有表徵圖需要積極式載入。含有CSS控制項的網頁載入速度要明顯快一些。

5、CSS規則可以在所有的網站上容易地使用和維護。可以通過修改你的CSS風格更改你網頁上所有的控制項形態。

通過為超連結的控制項格式化建立規則，你可以通過在其他檔案中使用超串連格式化使控制項看上去和用起來與其它的不同。
解析一個CSS控制項的例子

下面是一個引用的CSS風格表單的例子。格式化規則建立的.button類有80象素寬，背景是黑色的，白色的邊框，白色的文字框。

.button {

....border: 1px solid White;

....padding: 5px;

....width: 80px;

....color: White;

....font-family: Arial, Helvetica, sans-serif;

....font-size: 1.1em;

....font-weight: normal;

....text-align: center;

....height: 1.25em;

....background-color: Black;

}

 

接下來，風格表單包括具體說明格式是如何隨著超連結的狀態變化而變化的規則。這些規則都是相互關聯的並且只在類.button的範圍內影響。預設的連結狀態不改變；滑鼠覆蓋的狀態是在藍色背景下的白色的文本邊框；訪問過的狀態是在深灰色背景下的淺灰色文字框。

 

.button a:link {

    text-decoration : none;

    color : White;

}

.button a:hover {

    text-decoration: none;

    color : White;

    font-weight : bold;

    background : Blue;

}

.button a:visited {

    text-decoration : none;

    color : #BBBBBB;

    background : #333333;

}

 

下面的代碼顯示了在網頁上使用CSS控制項的簡單操作。所有需要做的就只是將合適的類的屬性添加到模組標籤中去（例如分段或者是段落），而這個標籤包含一個簡單的超連結。在這種情況下，結果將是三個矩形控制項：Home，Gallery和About Us。

    <div class="button"><a href="default.htm">Home</a></div>

    <div class="button"><a href="gallery.htm">Gallery</a></div>

    <div class="button"><a href="about_us.htm">About Us</a></div>

在文本超連結中使用CSS格式建立控制項是既快而且高效的，並且結果對於大多使用者都足夠滿足需要。這個技術的優勢對於基於表徵圖的控制項開發可以創造出一個新的標準。