首頁 web前端 css教學 a標籤的css樣式中的四個狀態

a標籤的css樣式中的四個狀態

Jun 12, 2018 am 11:17 AM
a標籤 css樣式

這篇文章主要介紹了關於a標籤的css樣式中的四個狀態,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

a標籤有四個「狀態」的先後過程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能設定有無底線(總是有的),下面有個範例大家可以看看

表示所有狀態下的連結如a{color:red}
① a: link:未造訪連結,如a:link {color:blue}
② a:visited:已造訪連結,如a:visited{color:blue}
③ a:active:啟動時(連結取得焦點時)連結的顏色,如a:active{color:blue}
④ a:hover:滑鼠移到連結上時,如a:hover {color:blue}
一般a:hover和a:visited連結的狀態(顏色、底線等)應該是相同的。
前三者分別對應body元素的link、vlink、alink這三個屬性。
四個「狀態」的先後過程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能設定有無底線(總是有的)。
舉例:偽類的常見狀態值 

<style type = “text/css”> 
a {font-size:16px} 
a:link {color: blue; text-decoration:none;} //未访问:蓝色、无下划线 
a:active:{color: red; } //激活:红色 
a:visited {color:purple;text-decoration:none;} //已访问:purple、无下划线 
a:hover {color: red; text-decoration:underline;} //鼠标移近:红色、下划线 
</style>
登入後複製

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

CSS Border屬性之solid的使用介紹

css滑鼠樣式cursor的講解

#

以上是a標籤的css樣式中的四個狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

index.html是什麼文件? index.html是什麼文件? Feb 19, 2024 pm 01:36 PM

index.html代表網頁的首頁文件,是網站的預設頁面。當使用者造訪一個網站時,通常會先載入index.html頁面。 HTML(HypertextMarkupLanguage)是一種用來建立網頁的標記語言,index.html也是一種HTML檔。它包含網頁的結構和內容,以及用於格式化和佈局的標籤和元素。下面是一個範例的index.html程式碼:&lt

css怎麼去掉a標籤自帶顏色 css怎麼去掉a標籤自帶顏色 Apr 25, 2024 pm 05:42 PM

若要移除 a 標籤自帶顏色,可使用下列方法:使用 CSS 的 color 屬性指定文字顏色。使用 CSS 的 link-color 屬性指定連結顏色。使用 CSS 的 text-decoration 屬性去除底線和預設文字顏色。使用 CSS 的 hover 顏色屬性來變更滑鼠懸停時的文字顏色。使用 CSS 的 visited 顏色屬性來變更已造訪的 a 標籤的文字顏色。

怎麼用a標籤跳到另一個頁面 怎麼用a標籤跳到另一個頁面 Sep 11, 2023 pm 04:01 PM

a標籤來建立超鏈接,然後透過a標籤,可以將一個頁面連結到另一個頁面。詳細介紹:要實現頁面跳轉,需要將目標頁面的URL填入href屬性中,URL可以是相對路徑,也可以是絕對路徑,相對路徑是相對於目前頁面的路徑,而絕對路徑是完整的URL地址。

跳到指定頁面的PHP程式碼實作方法 跳到指定頁面的PHP程式碼實作方法 Mar 07, 2024 pm 02:18 PM

在編寫網站或應用程式時,經常會遇到需要跳到指定頁面的需求。在PHP中,我們可以透過幾種方法來實現頁面跳躍。下面我將為您示範三種常用的跳轉方法,包括使用header()函數、使用JavaScript程式碼和使用meta標籤。使用header()函數header()函數是PHP中用來發送原始的HTTP頭部資訊的函數,在實現頁面跳躍時可以結合使用該函數。下面是一個

如何使用HTML和CSS建立一個幻燈片佈局頁面 如何使用HTML和CSS建立一個幻燈片佈局頁面 Oct 16, 2023 am 09:07 AM

如何使用HTML和CSS建立幻燈片佈局頁面引言:幻燈片佈局在現代web設計中被廣泛使用,在展示資訊或圖片時具有很大的吸引力和互動性。本文將介紹如何使用HTML和CSS建立幻燈片佈局頁面,並提供具體的程式碼範例。一、HTML佈局結構首先,我們需要建立一個HTML佈局結構,包含一個投影片容器和多個投影片項目。程式碼如下所示:&lt;!DOCTYPEhtml&

PHP網頁中文亂碼怎麼辦?一個完整解決方案 PHP網頁中文亂碼怎麼辦?一個完整解決方案 Mar 26, 2024 pm 03:27 PM

PHP網頁中文亂碼問題是在網頁顯示中出現中文字元顯示為亂碼的情況,這種情況通常是由於編碼不一致或未設定字元集所導致的。解決PHP網頁中文亂碼問題需要從多個方面入手,以下是一些常見的解決方案以及具體的程式碼範例。設定PHP檔案編碼:首先確保PHP檔案本身的編碼是UTF-8,可以在編輯器中設定儲存時使用UTF-8編碼,或在PHP檔案頭部新增下列程式碼設定編碼:&amp;l

3秒跳轉頁面實作方法:PHP程式指南 3秒跳轉頁面實作方法:PHP程式指南 Mar 25, 2024 am 10:42 AM

標題:3秒跳轉頁面實作方法:PHP程式設計指南在網頁開發中,頁面跳轉是常見的操作,一般情況下我們使用HTML中的meta標籤或JavaScript的方法進行頁面跳轉。不過,在某些特定的情況下,我們需要在伺服器端進行頁面跳轉。本文將介紹如何使用PHP程式實作一個在3秒內自動跳到指定頁面的功能,同時會給出具體的程式碼範例。 PHP實現頁面跳躍的基本原理PHP是一種在

a標籤屬性有哪些 a標籤屬性有哪些 Nov 24, 2023 am 09:51 AM

a標籤屬性有:1、href;2、target;3、rel;4、download;5、hreflang;6、type。詳細介紹:1、href,定義連結的目標URL,這是「<a>「標籤最常用的屬性,它可以連結到網頁的任何部分,如頁面頂部、特定段落等;2、target,定義連結在哪裡開啟;3、rel,定義連結的關係,這個屬性允許指定目前文件與連結文件之間的關係等等。

See all articles