第五天 超連接僞類

http://www.aa25.cn/div_css/906.shtml

今天咱們開始學習《十天學會web標準(div+css)》超連接僞類，包含如下內容和知識點：

• 連接的四種樣式
• 將連接轉換爲塊狀
• 用css製做按鈕
• 首字下沉

1、超連接的四種樣式

原本計劃這節課放到第九章中講解，但下邊的章節都涉及到了，因此提早來學習一下，上節課講解的內容比較多，這節課就少講些，只要理解了僞類，就輕鬆多了。

超連接能夠說是網頁發展史上一個偉大的發明，它使得許多頁面相互連接從而構成一個網站。說到超連接，它涉及到一個新的概念：僞類，咱們先看下超連接的四種樣式：

a:link {color: #FF0000} /* 未訪問的連接 */
a:visited {color: #00FF00} /* 已訪問的連接 */
a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
a:active {color: #0000FF} /* 選定的連接 */

以上分別定義了超連接未訪問時的連接樣式，已訪問的連接樣式，鼠標移上時連接樣式和選定的連接樣式。之因此稱之爲僞類，也就是說它不是一個真實的類，正常的類是以點開始，後邊跟一個名稱，而它是以a開始後邊跟個冒號，再跟個狀態限定字符；好比第三個a:hover的樣式，只有當鼠標移動到該連接上時它才生效，而a:visited只對已訪問過的連接生效。僞類使得用戶體驗大大提升，好比咱們能夠設置鼠標移上時改變顏色或下劃線等屬性來告知用戶這個是能夠點擊的，設置已訪問過的連接的顏色變灰暗或加刪除線告知用戶這個連接的內容已訪問過了。

下面來作一個默認狀態下是藍色，鼠標放上是紅色加下劃線，選定（按下）時爲紫色，已訪問過爲灰色加刪除線的實例來說解一下。首先插入兩個帶超連接的內容：

<p><a href="#">這裏是連接</a></p>
<p><a href="10.html">這裏也是連接</a></p>

從上圖中能夠看出，插入的超連接默認是藍色來下劃線的，這是標籤的默認樣式所致，下來咱們在css樣式中定義

設置完a:link的樣式後，下面分別設置a:visited ，a:hover ，a:active的樣式

生成的源代碼以下：

 

   提示：能夠先修改部分代碼後再運行

 注意：四種狀態的順序必定不能顛倒，不然有些不生效

 

2、將連接轉換爲塊級元素

連接在默認狀態下是內聯元素，轉換爲塊級元素後能夠得到更大的點擊區域，能夠設置寬度和高度，將連接轉換爲塊狀，只需增長一個display:block的css屬性便可。

a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }

這樣設置的結果是全局a都執行這個樣式顯示，下面設置一下鼠標劃過期 的狀態，其它幾種狀態設置方法相同

 

   提示：能夠先修改部分代碼後再運行

 

 

3、用css製做按鈕

學會了把超連接轉換爲塊級元素，想製做個css按鈕簡直太簡單了，只需在上一步的基礎上增長一個按鈕的背景圖片便可實現。下面以製做淘寶網首頁的免費註冊按鈕來說解，設置最經常使用的默認樣式和鼠標移上時的樣式，以下圖

首先須要準備默認狀態和鼠標劃過狀態的圖片以下：

修改以前的html以下，而後從新定義css樣式：

<p><a href="#">免費註冊</a></p>

 

   提示：能夠先修改部分代碼後再運行

 

 

本例中運用到了背景圖片，有關背景圖片的詳細運用將在下一節中講解，你也能夠查看css樣式表手冊，首先了解下或者學習以下視頻教程http://www.aa25.cn/div_css/895.shtml

4、首字下沉

首字下沉是css僞類上的又一個運用，它能夠直接經過css樣式表向某個選擇器中的文本首字母添加特殊的樣式，而不須要把首字添加一個標籤或經過程序來實現，今天以製做word裏的首字下沉爲例來說解，應用以下僞元素：

:first-letter

在頁面中添加以下一段內容，只用設置樣式就能夠實現首字下沉了：

<p>標準之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS視頻教程,web2.0標準,DIV+CSS佈局入門教程,網頁佈局實例,css佈局實例,div+css模板,div+css實例解析,網站重構，網頁代碼,水晶圖標,幻燈廣告圖片.教程適合初學者按部就班學習!</p>

爲了便於觀察效果，咱們設置p的樣式以下：

p { width: 400px; line-height: 1.5; font-size: 14px; }

而後設置p:first-letter的樣式

 

   提示：能夠先修改部分代碼後再運行