很長時間以來，網(wǎng)絡(luò)開發(fā)者通過使用圖片和javascript腳本代碼來開發(fā)交互式的控件。然而，在許多情況下使用CSS的規(guī)則來定義文本超鏈接的格式將是開發(fā)交互式控件的一個較好選擇。使用CSS技術(shù)開發(fā)更快更有效，所以現(xiàn)在在眾多網(wǎng)站上看到這種技術(shù)已經(jīng)不是一件奇怪的事情了。
使用傳統(tǒng)方法開發(fā)控件的缺點

使用傳統(tǒng)的技術(shù)開發(fā)一個控件常常是從用一個包含了一個矩形或其它形狀文本輸入框的小圖標開始的。這個控件也許使用陰影、光效、傾斜或者其它的效果予以修飾，但是它本質(zhì)也就只是一個包含了文本的框架。
首先，你需要為控件的每個狀態(tài)創(chuàng)建一個獨立的圖標。例如，你需要為控件在默認情況下創(chuàng)建一個圖標，還要為其在鼠標指針指向這個控件的時候創(chuàng)建一個圖標。僅僅是這樣一個簡單的效果，你就需要至少兩個圖標（默認和鼠標指向兩個狀態(tài)），如果你要加入點擊和訪問過的狀態(tài)，每個控件就需要三或四個圖標。
在你的網(wǎng)頁中加入一個基本的圖標用于超鏈接再簡單不過，只需要牢記輸入合適的位置以滿足訪問需要
為了使你的控件具有交互性，你需要增加javascript腳本代碼來使控件圖標能夠在鼠標事件發(fā)生的時候有所反應(yīng)，比如說在鼠標指向圖標的時候。像Dreamweaver這樣的開發(fā)軟件可以使用簡單的鼠標操作自動添加代碼，但是這些代碼包含了網(wǎng)頁的大小信息。
為了使得動態(tài)效果，你需要預(yù)先下載圖片這樣當用戶指向這個控件的時候瀏覽器能立即改變。預(yù)先下載圖片將會使網(wǎng)頁的加載時間變長，而且它的不方便之處還在于即使是用戶不需要使用所有的控件，它也要加載所有的圖片的。
是什么使得CSS技術(shù)具有優(yōu)越性？
使用CSS，你可以從一個簡單的文本超鏈接中創(chuàng)建一個完全的交互控件。適當?shù)母袷交梢园岩粋€段落變化或者分解成一個圍繞著文本超鏈接的矩形框。在超鏈接文本中添加動態(tài)效果，只需要多幾條簡單的CSS代碼就可以使得控件具有交互性。與基于圖標的空間相比，這個控件有以下幾個優(yōu)點：
1、不需要任何的圖標。CSS通過格式化文本來創(chuàng)建控件效果，所以不需要創(chuàng)建任何獨立的圖標文件。
2、你不需要鍵入任何的文本屬性，因為CSS控件的文本就已經(jīng)具有了完全的可訪問性。
3、更加有效的代碼。CSS規(guī)則和分類的代碼比其所取代的javascript腳本代碼更小，因而瀏覽器執(zhí)行的更快。
4、沒有圖標需要預(yù)先加載。含有CSS控件的網(wǎng)頁加載速度要明顯快一些。
5、CSS規(guī)則可以在所有的網(wǎng)站上容易地使用和維護。可以通過修改你的CSS風格更改你網(wǎng)頁上所有的控件形態(tài)。
通過為超鏈接的控件格式化創(chuàng)建規(guī)則，你可以通過在其他文件中使用超連接格式化使控件看上去和用起來與其它的不同。
解析一個CSS控件的例子

下面是一個引用的CSS風格表單的例子。格式化規(guī)則創(chuàng)建的.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;
} 
 
接下來，風格表單包括具體說明格式是如何隨著超鏈接的狀態(tài)變化而變化的規(guī)則。這些規(guī)則都是相互關(guān)聯(lián)的并且只在類.button的范圍內(nèi)影響。默認的鏈接狀態(tài)不改變；鼠標覆蓋的狀態(tài)是在藍色背景下的白色的文本邊框；訪問過的狀態(tài)是在深灰色背景下的淺灰色文本框。
 
.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;
    colo