CSS样式表——超链接样式
生活随笔
收集整理的這篇文章主要介紹了
CSS样式表——超链接样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
主要作用是給用HTML做的鏈接修改樣式
主要包括：
1.超鏈接訪問前（被點前）狀態a:link
2.超鏈接訪問后（被點后）狀態a:visited
3.鼠標指向超鏈接時（放在上面）狀態a:hover
4.點擊超鏈接時的狀態a:active
注意的是：順序不能改變 簡單記為L V H A
基本格式為:
<style type="text/css"> a:link { color:blue; text-decoration:none; } a:visitd {] a:hover {} a:active {} </style>例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>360標簽</title><link href="360小標簽css表.css" rel="stylesheet" type="text/css" /> </head><body> <table align="center" width="100%" border="0" cellspacing="0" cellpadding="8"><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.autohome.com.cn">汽車之家</a></td><td><a href="http://zibo.bitauto.com">易 車 網</a></td><td><a href="http://www.pcauto.com.cn">太平洋汽車</a></td><td><a href="http://www.anjuke.com">安 居 客</a></td><td><a href="http://out.zhe800.com">折800</a></td><td><a href="http://www.suning.com"><font color="#00CC33">蘇寧易購</a></font></td></tr><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.12306.cn">12306官網</a></td><td><a href="http://www.people.com.cn">人民</a><span>?</span><a href="http://www.xinhuanet.com">新華</a></td><td><a href="http://www.ganji.com">趕 集 網</a></td><td><a href="http://union.dangdang.com">當 當 網</a></td><td><img src="360小圖標/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅游網</a></td><td><a href="http://www.baidu.com"><font color="#00CC33"><i><b>1號店</b></i></a> <a href="http://www.baidu.com"><img src="360小圖標/搶福袋.jpg" width="40"/></a></td></font></tr><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.zhenai.com">真愛婚戀網</a></td><td><a href="http://www.moonbasa.com">夢 芭 莎</a></td><td><a href="http://www.baidu.com">亞 馬 遜</a></td><td><a href="http://www.baidu.com">藝 龍 網</a></td><td><a href="http://www.baidu.com">去哪兒網</a></td><td><a href="http://www.baidu.com">美 麗 說</a></td></font></tr><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.baidu.com">美 團 網</a></td><td><a href="http://www.baidu.com">樂視視頻</a></td><td><img src="360小圖標/唯品會.jpg" width="15"/><a href="http://www.baidu.com">唯 品 會</a></td><td><a href="http://www.baidu.com"><font color="#CC6600">聚美優品</a></td></font><td><a href="http://www.baidu.com">搜 房 網</a></td><td><a href="http://www.baidu.com">蘑 菇 街</a></td></font></tr><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.baidu.com">獵 聘 網</a></td><td><a href="http://www.baidu.com">1 藥 網</a></td><td><a href="http://www.baidu.com">陸金所理財</a></td><td><a href="http://www.baidu.com">六 間 房</a></td><td><a href="http://www.baidu.com">攜程機票</a></td><td><a href="http://www.baidu.com">12306·搶票</a></td></font></tr> </table></body> </html> View Code?
這是未修改樣式的超鏈接(從來沒點過的默認藍色，點過之后默認紫色）
下面用樣式表修改
@charset "utf-8";
/* CSS Document */
<style type="text/css">
*
{
margin:0px;
margin:0px;
}
a:link
{
color:#000;
text-decoration:none;}/*下劃線*/
a:visited
{
color:#000;
text-decoration:none}
a:hover
{
color:#F00;
text-decoration:underline;}
a:active
{
color:#F60;
text-decoration:underline;}
</style>
效果為：
?
?
轉載于:https://www.cnblogs.com/Chenshuai7/p/5071585.html
總結
以上是生活随笔為你收集整理的CSS样式表——超链接样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 12月23号 Foundation库N
- 下一篇： 你应该知道的25道Javascript面