發現CSS控件的好處

網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。

很長時間以來，網絡開發者通過使用圖片和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格式創建控件是既快而且高效的，并且結果對于大多用戶都足夠滿足需要。這個技術的優勢對于基于圖標的控件開發可以創造出一個新的標準。