首先我們要知道html a標簽的顏色設置:
我們都知道在html中a標簽在網頁中默認的顏色是什么樣的,現在試個代碼看一下:
!doctype html html head meta charset= utf-8 title PHP /title /head body a href= # php /a /body /html
這是一個基礎的html文檔的代碼,看在瀏覽器中的顯示效果:
上面的未點擊的網址就是這樣藍色的,點擊之后就是紫色的,這樣的鏈接看上去不太好看,我們要給a標簽設置一個顏色。比如說,我要給未點擊的網址設置一個顏色,就紅色吧,未點擊之前是紅色的,點擊之后是就是黑色的。我們來做一下效果:
head meta charset= utf-8 title PHP /title style type= text/css a:link{color:red;}a:visited{color:black;} /style /head body a href= # php /a /body
這是一段簡單的css代碼,來看看效果圖:
這是未被訪問的樣子,是紅色的;
這是已被訪問的樣式,是黑色的。我們來解釋下代碼:
a:link :是未被訪問的樣式,可以在里面加很多東西,比如說去掉下劃線,換顏色等功能都能在這里實現;
a:visited :是已被點擊后的樣式,也可以在里面加很多元素,可以去下劃線,改顏色,放大等功能;
a:hover :這個是鼠標懸停的樣式,這個等下有實例介紹,我們先來認識一下,是把鼠標停在超鏈接的位置的時候可以設置變顏色;
a:active :這個說是已被激活的樣式,簡單得說就是能把鼠標點上去的時候,瞬間出的樣式,在很多網站上都有這種樣式的;
現在我們再來看個實例,把上面四個都放進去的效果:
head meta charset= utf-8 title PHP /title style type= text/css a:link{color:red;}a:visited{color:black;}a:hover{color:pink;}a:active{color:#ccc;} /style /head body a href= # php /a /body
我們現在來看看在瀏覽器中顯示的效果:
這是鼠標懸停的效果,做出來了
這是點擊瞬間的效果。(想看更多,請點擊css視頻教程)
超鏈接a標簽的總結:
如此這個a標簽的四種錨偽類的css樣式都介紹完了,我們來回憶一下四種的用處,一個是未被點擊的樣式,就是沒有點擊,正常顯示的樣式,被點擊之后的樣式是你點擊了這個標簽后的樣式,還有一個是鼠標懸停的樣式,就是你一把鼠標放上去就會變的效果,這個效果是很好用的,大家用處以后就知道了,最后一個是點擊的瞬間的效果,這四種效果可以說是a標簽必備的四種的樣式了,這樣設置才能更好。
【小編推薦】
html5 datalist標簽的用法是什么?這里有datalist標簽的用法實例
html中的include標簽是什么?html include實現配置解析
以上就是html a標簽怎么設置顏色?超鏈接的顏色設置總結(css樣式)的詳細內容,其它編程語言
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答