狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

CSS 21天入門:鏈接

admin
2024年10月18日 22:36 本文熱度 748

前面的 HTML 教程圖片與超鏈接里,講過鏈接的標(biāo)簽,現(xiàn)在來看看對于鏈接有哪些樣式。

鏈接的狀態(tài)

鏈接不同于普通文字,它可以點(diǎn)擊,而點(diǎn)擊用到了鼠標(biāo)。

結(jié)合可點(diǎn)擊和鼠標(biāo)是否在鏈接上面,鏈接分成以下四個(gè)狀態(tài):

  • a:link - 正常的鏈接,也就是沒有被用戶訪問過的鏈接狀態(tài)。

  • a:visited - 已經(jīng)被用戶訪問過的鏈接,即點(diǎn)擊過的鏈接狀態(tài)。

  • a:hover - 用戶正要訪問(點(diǎn)擊),當(dāng)用戶鼠標(biāo)放在鏈接上時(shí)的鏈接狀態(tài)。

  • a:active - 用戶正要訪問(點(diǎn)擊),當(dāng)用戶點(diǎn)擊鏈接那一刻的鏈接狀態(tài)。

a:link {   color: black; }  a:visited {   color: red; }  a:hover {   color: orange; }  a:active {   color: green; } 
<p><href="../../html/sample-code/2-2-1.html">IT從業(yè)指北公眾號 (link)</a></p> <p>   <href="../../html/sample-code/2-3-1.html">IT從業(yè)指北公眾號 (visited)</a> </p> <p><href="../../html/sample-code/2-4-1.html">IT從業(yè)指北公眾號 (hover)</a></p> <p><href="../../html/sample-code/2-5-1.html">IT從業(yè)指北公眾號 (active)</a></p> 

當(dāng)為鏈接定義以上不同狀態(tài)時(shí),要遵守順序,即:

  • a:hover 必須出現(xiàn)在 a:link 和 a:visited 的后面。

  • a:active 必須出現(xiàn)在 a:hover 的后面。

有一個(gè)幫助記憶的方法,記住愛(Love)恨(hate)的英文單詞,上述的狀態(tài)首字母落在這兩個(gè)單詞中間。

L(link)OV(visited)E 和 H(hover)A(active)TE

鏈接樣式

上面展示了修改不同狀態(tài)下的鏈接顏色,除顏色,還有其它樣式可以修改。

下劃線

默認(rèn)情況下,鏈接包含下劃線,如果不想要下劃線,可以去掉。

a:link {   text-decoration: none; } 

text-decoration 默認(rèn)值是 underline。

背景顏色

鏈接的背景同樣可以改變,使用 background-color 就可以。

a:link {   background-color: yellow; } 

可以為四種不同狀態(tài)下的鏈接指定不同的背景色。

鏈接實(shí)例

通過上述的樣式的樣式組合,可以實(shí)現(xiàn)專業(yè)又好看的鏈接樣式,以下示例供參考。

div a:link {   background-color: green;   color: white;   padding: 10px;   border: 1px solid green;   text-decoration: none; }  div a:visited {   background-color: white;   color: blue;   border: 1px solid blue; }  div a:hover {   border: 1px solid orange;   background-color: white;   color: orange; }  div a:active {   color: green;   background-color: white;   border: 1px solid green; } 
<div>   <href="../../html/sample-code/2-10-1.html">IT從業(yè)指北公眾號</a> </div> 

效果如下:

怎么樣,看起來還不錯(cuò)吧?

總結(jié)

  • ?? 在 CSS 中鏈接有四種狀態(tài)的樣式可以設(shè)置,它們分別是 link, visited, hover 和 active。

  • ?? 當(dāng)為同一個(gè)鏈接指定不同的狀態(tài)樣式時(shí),要遵循上述順序。

  • ?? 通過不同的樣式組合,可以改變鏈接樣式滿足各種需求。


該文章在 2024/10/19 12:16:32 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved