DIV CSS 佈局教程網

　　文字鏈接可以說是網頁中最常見的頁面元素了，默認的文字鏈接樣式都是帶下劃線的效果，這種一陳不變的外觀可能使很多朋友都想改變它，以使之符合頁面的整體效果，自從樣式表得到廣泛的應用後，這個願望現在可以非常方便的實現。今天我給大家介紹利用樣式表打造多彩的文字鏈接效果。我將分為初級篇、進階篇和高級篇給大家作介紹，所有的鏈接樣式效果我們都將在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的色彩和文字的色彩定義的不同即可，如圖；

12下一頁