DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS基礎教程:CSS控制超鏈接樣式詳解
CSS基礎教程:CSS控制超鏈接樣式詳解
編輯:CSS進階教程     

用CSS控制超鏈接樣式-css超鏈接

本文將講解通過css樣式或通過css來控制超鏈接樣式。這裡主要講文字類型的超鏈接,超鏈接的樣式包括通過CSS來控制設置超鏈接有無下劃線、超鏈接文字顏色等樣式。

什麼是超鏈接?
超鏈接通俗地指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序。而在一個網頁中用來超鏈接的對象,可以是一段文本或者是一個圖片。當浏覽者單擊已經鏈接的文字或圖片後,鏈接目標將顯示在浏覽器上,並且根據目標的類型來打開或運行。

超鏈接的代碼
<a href="http://www.poluoluo.com/" target="_blank" title="關於div css的網站">DIV+CSS</a>
解析如下:
href 後跟被鏈接地址目標網站地址這裡是http://www.poluoluo.com/
target
_blank -- 在新窗口中打開鏈接
_parent -- 在父窗體中打開鏈接
_self -- 在當前窗體打開鏈接,此為默認值
_top -- 在當前窗體打開鏈接,並替換當前的整個窗體(框架頁)

title 後跟鏈接目標說明,也就是超鏈接被鏈接網址情況簡要說明,或標題

CSS可控制超鏈接樣式-css鏈接樣式如下
a:link是超級鏈接的初始狀態
a:hover是把鼠標放上去時懸停的狀況
a:active 是鼠標點擊時
a:visited是訪問過後的情況

超鏈接樣式案例
1、通常對全站超鏈接樣式化方法
a{color:#333;text-decoration:none; } //對全站有鏈接的文字顏色樣式為color:#333;並立即無下劃線text-decoration:none;
a:hover {color:#CC3300;text-decoration:underline;}//對鼠標放到超鏈接上文字顏色樣式變為color:#CC3300;並文字鏈接加下劃線text-decoration:underline;

2、通過鏈接內設置類控制超鏈接樣式css方法
案例超鏈接代碼<a href="http://www.poluoluo.com/" class="poluoluocom">CSS</a>
對應CSS代碼
a.poluoluocom{color:#333;text-decoration:none; }
a.poluoluocom:hover {color:#CC3300;text-decoration:underline;}
通過這樣的設置可以控制鏈接內的css類名為“poluoluocom”超鏈接的樣式

3、通過對應超鏈接外的父級的css類的css樣式來控制超鏈接的樣式
案例超鏈接代碼<div class="poluoluocom"><a href="http://www.poluoluo.com/">CSS</a></a>
對應CSS代碼
.poluoluocom a{color:#333;text-decoration:none; }
.poluoluocom a:hover {color:#CC3300;text-decoration:underline;}

這裡值得注意的是a.poluoluocom與.poluoluocom a的樣式css代碼區別

這裡就是常見的通過div css來對超鏈接樣式設置案例及分析。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved