文字連結可以說是網頁中最常見的頁面元素了，預設的文字連結樣式都是帶下劃線的效果，這種一陳不變的外觀可能使許多朋友都想改變它，以使之符合頁面的整體效果，自從樣式表得到廣泛的應用後，這個願望現在可以非常方便的實現。今天我要跟大家介紹利用樣式表打造多彩的文字連結效果。我將分為初級篇、進階篇和高級篇給大家作介紹，所有的連結樣式效果我們都將在Dreamweaver的樣式編輯器中完成，關於Dreamweaver中的樣式編輯器的用法請參考先前的介紹。連結樣式瀏覽效果如下圖；具體的頁面瀏覽請看這裡
一、 準備工作
我們將首先建立一個基本的連結樣式，其他的樣式將在此基礎上新增一個自訂的Class類別。
1、 Shift+F11開啟樣式面板，點選新樣式按鈕，如圖一；
2、 在Type選項中選擇Use CSS Selector，建立預設連結樣式，如圖二；
3. 依照圖三所示設定預設連結的樣式為無底線，字體為宋體9pt，其他色彩等等都不設置，我們將在後面為每一個Class類分別設定。
4、 定義樣式類別Class。我們下面的每一個樣式風格都是定義了一個單獨的類，並將其賦予連結文字。步驟如下：點選新增開啟新定義樣式面板，選擇Make Custom Style（class）定義自己的樣式類別。如圖四；
5、 為連結文字新增樣式類別。在Dreamweaver中選擇一項連結文字，在視窗最下端的快速標籤選擇條上選擇標籤，右鍵點擊此標籤，選擇Set Class將自訂的樣式賦予此連結文字即可，如圖五；
6、 其它連結文字樣式的做法與此相同，後面我將不再作介紹。在本教學中有關定義hover狀態的連結樣式辦法，朋友們可以自己製作。我也不再作介紹，只是提示定義時直接輸入[.t1:hover]即可。
二、 初級連結樣式
這部分的連結效果我們將完全在樣式編輯器的Type分類中完成，如何創建和設定我不再細說，只把完成的面板圖給大家看，並稍作介紹。
1、 普通連結。如圖六；
普通的連結都是在樣式編輯器的Category分類中的第一項Type中設定，Color定義連結字體的顏色，Decoration定義連結的劃線風格，分為以下幾類：
underline：底線overline：上線line-through：刪除線blink：閃線none：無底線
本部分的其他幾種連結樣式都是透過改變劃線的組合來達到的效果。
2、 無底線鏈接，如圖七；
3、 雙劃線鏈接，如圖八；
4、 刪除線鏈接，如圖九；
三、 進階連結樣式
接下來我介紹一種另類連結樣式的定義方法，這種方法主要是利用樣式表中的Border屬性來取代普通連結的劃線，由於Border有較多的控制參數和樣式，因此可以實作一些特殊的效果。我們來看看下面的面板，如圖十；
在Border選項中包含Width（劃線寬度）、Color（劃線色彩）、Style（劃線種類）三部分，而每部分又是可以針對不同的邊框設定不同的參數，這是普通鏈結劃線不可能實現的效果。
需要提醒大家的是，使用這種方法定義連結樣式還有一個必要的條件：就是必須定義樣式中的Box屬性，如圖十一；
這是因為Border是屬於樣式中的塊狀元素，我們必須先定義一個塊狀元素才可以使Border運作。我們只要任意定義Box選項中的Width或Height即可，具體數值大家可以試著看看效果，我在這裡定義了Height為0。下面我們來看看可以做出什麼樣的效果。
1、 另類連結樣式。設置如圖十二；
2、 客製化底線色彩，我們可以定義出下劃線與文字不同的色彩，這是普通連結文字不可能實現的效果，只要將Border的色彩和文字的色彩定義的不同即可，如圖十三；
3、 客製化底線距離。此種劃線的距離我們可以在Box分類中設置，只要改變Padding的數值，在本例中我們設定Padding—Bottom為5pix，如圖十四；
4、 客製化劃線長度和對齊方式。更進一步我們也可以精確定義劃線的長度與對齊方式，開啟Box分類設定Width為200，如圖十五；設定Block分類的Text Align為Center，即中間對齊，如圖十六；
5、 客製化雙劃線效果。改變Border中的Style即可改變劃線的外觀，其中設定Style為Double，並設定Bottom為3pix即可達到雙劃線的效果。如圖十七；
四、 高級連結樣式
透過組合應用上面介紹的技術，我們還可以創造出更複雜的文字連結樣式，以下我們介紹三個例子。
1、 定義塊狀連結。首先給連結增加一個背景色，如圖十八；
再為文字鏈接增加四邊框即可實現平面塊狀文字鏈接，如圖十九；
2、 定義按鈕狀文字連結。改變邊框的樣式，定義Border-Style為outset，如圖二十；
定義Box選項中的Width和Height可以定義按鈕的寬與高，定義Padding為2pix可以使連結文字與按鈕四周有2pix的間距，如圖二十一；
3、 定義特效文字連結。 CSS樣式表中還包含了一組特效濾鏡，我們可以再結合濾鏡與前邊的參數來建立特殊的連結樣式。本例中我創建了一個使用Blur濾鏡的文字鏈接，並帶有邊框效果。如圖二十二；
4、 定義靜態背景切換的效果。本例是透過對連結文字普通狀態和Hover狀態設定不同的背景圖片來實現背景切換的效果。見下圖：
5. 動態背景切換的效果。此效果與上例基本上一樣，只是在Hover狀態定義了一個動態Gif圖片背景。而且這張圖片需要一點技巧就是設定循環為一遍，並在最後加上一個幀，設定幀的時間為一個較大的值，如10000。這樣可以讓動畫執行一邊後就停止。為改善效果執行時的速度，我們還需要在Dreamweaver中增加了一個Preload /doc/webpage/images/images行為。這需要開啟行為面板，並新增Preload /doc/webpage/images/images行為，如圖：
我們可以把最後兩種連結樣式所需要用到的四張圖片都預先載入，如下圖：
五、 總結
我就介紹這麼多連結樣式，配合設定連結文字的hover狀態，可以實現非常漂亮的效果，具體的頁面瀏覽請看這裡，希望朋友們根據上面的思路，組合創造出更多地鏈接文字樣式。記住，樣式表就好比網頁製作中具有寶藏的一個冰山，今天我們只是揭開了冰山小小的一個角落，更多的寶藏等著你去挖掘。