Jquery中文網 www.4271936.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 HTML超鏈接a標記CSS樣式寫法示例

HTML超鏈接a標記CSS樣式寫法示例

發布時間:2020-05-09   編輯:www.4271936.live
jquery中文網為您提供HTML超鏈接a標記CSS樣式寫法示例等資源,歡迎您收藏本站,我們將為您提供最新的HTML超鏈接a標記CSS樣式寫法示例資源
下面我們介紹對于css初學者會有一點幫助了,主要告訴你HTML超鏈接a標記CSS樣式寫法,這里簡單舉了一個實例。

定義鏈接樣式的四個偽類

    1 :link   
    
    2 :visited   
    
    3 :hover   
    
    4 :active  

因為我們要定義鏈接樣式,所以其中必不可少的就是超級鏈接中的錨標簽--a,錨標簽和偽類鏈接起來書寫的方法就是定義鏈接樣式的基礎方法,它們的寫法如下:


    1 a:link,定義正常鏈接的樣式;   
    
    2 a:visited,定義已訪問過鏈接的樣式;   
    
    3 a:hover,定義鼠標懸浮在鏈接上時的樣式;   
    
    4 a:active,定義鼠標點擊鏈接時的樣式

樣式表CSS中定義鏈接 A 的順序,可能會對大家有一些幫助:


A:link { color: #000000; TEXT-DECORATION: none}
A:visited { COLOR: #000000; TEXT-DECORATION: none}
A:hover { COLOR: #ff7f24; text-decoration: underline;}
A:active { COLOR: #ff7f24;   text-decoration: underline;}


a :link、a:hover、a:visited這幾個元素,定義CSS時候的順序不同,也會直接導致鏈接顯示的效果不同。
我想,原因就在于瀏覽器解釋CSS時遵循的“就近原則”。

 代碼如下 復制代碼


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
A.mytest:link {
 FONT-SIZE: 12px; COLOR: #5b5b5b; TEXT-DECORATION: none
}
A.mytest:visited {
 FONT-SIZE: 12px; COLOR: #969696; TEXT-DECORATION: none
}
A.mytest:active {
 FONT-SIZE: 12px; COLOR: #0099ff; TEXT-DECORATION: none
}
A.mytest:hover {
 FONT-SIZE: 12px; COLOR: #ff6102; TEXT-DECORATION: none
}
--></style>
<title>Insert title here</title>
</head>
<body>
<A href="#" class="mytest">test</A>
</body>
</html>

您可能感興趣的文章:
JQuery入門—JQuery程序的代碼風格詳細介紹
使用JQuery和CSS模擬超鏈接的用戶單擊事件的實現代碼
jquery 指南/入門基礎
JQuery結合CSS操作打印樣式的方法
jqurey 學習筆記 傳智博客佟老師附詳細注釋
JQuery里選擇超鏈接的實現代碼
SEO優化中關于站內優化的技巧
asp.net的html控件在頁面跳轉上的使用及seo優化
jQuery 改變CSS樣式基礎代碼
彈出層之1:JQuery.Boxy (一) 使用介紹

[關閉]
微信下载APP完成任务如何赚钱 江苏快3老快3开奖走势图 亿纬锂能股票股吧 sg飞艇是什么有什么套路 股票融资杠杆是多少 吉林快3基本走势图 秒速赛车彩票技巧 股票配资怎么玩 安徽快三万能形态走势图 秒速时时彩开奖记录 福建快3开奖结果一定牛