一、 準備工作
我們將首先創建一個基本的鏈接樣式，其他的樣式將在此基礎上添加一個自定義的Class類。
1、 Shift+F11打開樣式面板，點擊新建樣式按鈕，如圖一；
2、 在Type選項中選擇Use CSS Selector，創建默認鏈接樣式，如圖二；
3、 按照圖三中所示設定默認鏈接的樣式為無下劃線，字體為宋體9pt，其他色彩等等都不設置，我們將在后面為每一個Class類分別設置。
4、 定義樣式類Class。我們下面的每一個樣式風格都是定義了一個單獨的類，并將其賦予鏈接文字。步驟如下：點擊添加打開新定義樣式面板，選擇Make Custom Style（class）定義自己的樣式類。如圖四；
5、 為鏈接文字添加樣式類。選擇一項鏈接文字，在窗口最下端的快速標簽選擇條上選擇標簽，右鍵點擊此標簽，選擇Set Class將自定義的樣式賦予此鏈接文字即可，如圖五；
6、 其它鏈接文字樣式的做法與此相同，后面我將不再作介紹。在本教程中有關定義hover狀態的鏈接樣式辦法，朋友們可以自己制作。我也不再作介紹，只是提示定義時直接輸入[.t1:hover]即可。
二、 初級鏈接樣式
這部分的鏈接效果我們將完全在樣式編輯器的Type分類中完成，如何創建和設置我不再細說，只把完成的面板圖給大家看，并稍作介紹。
1、 普通鏈接。如圖六；
這部分的鏈接效果我們將完全在樣式編輯器的Type分類中完成，如何創建和設置我不再細說，只把完成的面板圖給大家看，并稍作介紹。
1、 普通鏈接。如圖六；
普通的鏈接都是在樣式編輯器的Category分類中的第一項Type中設定，Color定義鏈接字體的顏色，Decoration定義鏈接的劃線風格，分為以下幾類：
underline：下劃線
overline：上劃線
line-through：刪除線
blink：閃動線
none：無劃線
本部分的其他幾種鏈接樣式都是通過改變劃線的組合來達到的效果。
2、 無下劃線鏈接，如圖七；
3、 雙劃線鏈接，如圖八；
4、 刪除線鏈接，如圖九；
三、 進階鏈接樣式
接下來我介紹一種另類鏈接樣式的定義方法，這種方法主要是利用樣式表中的Border屬性來替代普通鏈接的劃線，由于Border有更多的控制參數和樣式，因此可以實現一些特殊的效果。我們來看看下面的面板，如圖十；
接下來我介紹一種另類鏈接樣式的定義方法，這種方法主要是利用樣式表中的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、 定義塊狀鏈接。首先給鏈接增加一個背景色，如圖十八；
再為文字鏈接增加四邊框即可實現平面塊狀文字鏈接，如圖十九；
通過組合應用上面介紹的技術，我們還可以創作出更復雜的文字鏈接樣式，下面我們介紹三個例子。
1、 定義塊狀鏈接。首先給鏈接增加一個背景色，如圖十八；
再為文字鏈接增加四邊框即可實現平面塊狀文字鏈接，如圖十九；
2、 定義按鈕狀文字鏈接。改變邊框的樣式，定義Border-Style為outset，如圖二十；
定義Box選項中的Width和Height可以定義按鈕的寬和高，定義Padding為2pix可以使鏈接文字與按鈕四周有2pix的間距，如圖二十一；
3、 定義特效文字鏈接。CSS樣式表中還包含了一組特效濾鏡，我們可以再結合濾鏡與前邊的參數創建特殊的鏈接樣式。本例中我創建了一個使用Blur濾鏡的文字鏈接，并帶有邊框效果。如圖二十二；
4、 定義靜態背景切換的效果。本例是通過對鏈接文字普通狀態和Hover狀態設定不同的背景圖片來實現背景切換的效果。見下圖：
5、 動態背景切換的效果。此效果與上例基本一樣，只是在Hover狀態定義了一個動態Gif圖片背景。而且這個圖片需要一點技巧就是設定循環為一遍，并在最后添加一個幀，設定幀的時間為一個較大的值，如10000。這樣可以執行一邊后就停止。為改善效果執行時的速度，我們還需要增加了一個Preload /doc/webpage/images/images行為。這需要打開行為面板，并添加Preload /doc/webpage/images/images行為，如圖：
我們可以把最后兩種鏈接樣式所需要用到的四張圖片都預先載入，如下圖：
五、 總結
我就介紹這么多鏈接樣式，配合設置鏈接文字的hover狀態，可以實現非常漂亮的效果，希望朋友們根據上面的思路，組合創造出更多地鏈接文字樣式。記住，樣式表就好比網頁制作中具有寶藏的一個冰山，今天我們只是揭開了冰山小小的一個角落，更多的寶藏等著你去挖掘。
定義Box選項中的Width和Height可以定義按鈕的寬和高，定義Padding為2pix可以使鏈接文字與按鈕四周有2pix的間距，如圖二十一；
3、 定義特效文字鏈接。CSS樣式表中還包含了一組特效濾鏡，我們可以再結合濾鏡與前邊的參數創建特殊的鏈接樣式。本例中我創建了一個使用Blur濾鏡的文字鏈接，并帶有邊框效果。如圖二十二；
4、 定義靜態背景切換的效果。本例是通過對鏈接文字普通狀態和Hover狀態設定不同的背景圖片來實現背景切換的效果。見下圖：
5、 動態背景切換的效果。此效果與上例基本一樣，只是在Hover狀態定義了一個動態Gif圖片背景。而且這個圖片需要一點技巧就是設定循環為一遍，并在最后添加一個幀，設定幀的時間為一個較大的值，如10000。這樣可以執行一邊后就停止。為改善效果執行時的速度，我們還需要增加了一個Preload /doc/webpage/images/images行為。這需要打開行為面板，并添加Preload /doc/webpage/images/images行為，如圖：
我們可以把最后兩種鏈接樣式所需要用到的四張圖片都預先載入，如下圖：
五、 總結
我就介紹這么多鏈接樣式，配合設置鏈接文字的hover狀態，可以實現非常漂亮的效果，希望朋友們根據上面的思路，組合創造出更多地鏈接文字樣式。記住，樣式表就好比網頁制作中具有寶藏的一個冰山，今天我們只是揭開了冰山小小的一個角落，更多的寶藏等著你去挖掘。
