以下內容不再屬于css屬性, 但暫時歸入屬性篇中.
鏈接(link): 在html里用<a></a>標明鏈接, 在css里用a作為鏈接的選擇器名.
css的缺點和它的優(yōu)點一樣明顯, 其最大的缺陷就在于網頁的動態(tài)表現(xiàn)不足, 在這一點上和Flash差距尤為突出.
好在css還是留了一手, 那就是鏈接的偽類選擇器, 所謂偽類就是指依賴于瀏覽器或是用戶的狀態(tài). 對于鏈接來講, 存在link, hover, visited, active四種狀態(tài), 即四種偽類選擇器: a:link(存在鏈接, 但無鼠標動作), a:visited(被點擊或訪問過), a:hover(鼠標懸停于鏈接上時的狀態(tài)), a:active(鼠標點擊與釋放之間的狀態(tài)).
css便是以這幾個偽類選擇器實現(xiàn)了其為數(shù)不多的動態(tài)效果. 目前最為常用的就是導航條和按鈕的動態(tài)顯示. 以下用一個動態(tài)按鈕的實例來說明這四個偽類選擇器.
1. 首先準備一副圖片(button.png), 如下圖(160px*240px), 其由四幅160px*60px的小圖自上而下排列而成.


2. 接著需要往你的本地調試文件夾(調試環(huán)境的建立方法參考屬性(1)中的說明)的index.htm中寫入html代碼, 如下:
<div id=”button”><a href=”#”></a></div>
3. 在style.css中寫入以下代碼:
body {background-color: #FFF;}
#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
#button a:link { background-position:0 0;}
#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}
可以看到如 Example2 的效果.
4. 代碼解釋:
<div id=”button”><a href=”#”></a></div>
在index.htm寫入如上代碼, 目的在于插入一個id名為”button”的盒子(div),且其內含有一個鏈接<a href=”#”></a>.
#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
在css文件中寫入以上代碼, 目的在于控制盒子中鏈接的表現(xiàn), 通過名為”#button a”的選擇器來實現(xiàn). 鏈接的寬高為160px*60px, 背景為圖片button.png.
在這強調一下display:block的作用. 由于在html文件中,鏈接<a href=”#”> </a>中沒有任何的內容(content)填充, 如果沒有聲明”display:block”, 那么即使聲明了選擇器”#button a”的寬高, 瀏覽器也會因為html文件中沒有內容而無法顯示鏈接. 所以”display:block”在這里的作用就在于強制瀏覽器顯示沒有內容填充的鏈接.
#button a:link { background-position:0 0;}
用偽類選擇器a:link聲明鏈接的背景圖片在左上角顯示, 即距離左邊和頂邊分別0, 0. 但由于已經在選擇器 “#button a”中聲明了圖片位置, 此代碼可有可無.
#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}
用偽類選擇器a:hover聲明鼠標懸停時, 背景圖片上移60px, 而使排在第二位的綠色小圖片顯示出來;
用偽類選擇器a:active聲明在鼠標點擊與釋放之間的狀態(tài)時, 背景圖片上移120px, 而使排在第三位的紅色小圖片顯示;
用偽類選擇器a:visited聲明在鏈接被點擊或訪問過時, 背景圖片上移180px, 而使排在第四位的灰色小圖片顯示;
現(xiàn)在你基本了解了css動態(tài)按鈕的制作過程, 但以上css代碼還存在一個嚴重的缺陷, 相信你會很快發(fā)現(xiàn)問題所在——這個按鈕居然是一個”一次性按鈕“, 也就是說這個按鈕在點擊第一次后, 就一直顯示那個灰色小圖片, 你能想出解決方法嗎? 請在留言中指出.
答案會在下一篇文章中說明! 下篇將會涉及css的核心內容——盒子模型, margin和padding屬性.(正文完)

最新評論