11 CSS3簡單入門 鏈結

2022-05-16 17:24:51 字數 1687 閱讀 3663

這一次簡單介紹下css3鏈結的使用

a:link  普通的、未被訪問過鏈結時

a:visited  使用者已經訪問過鏈結時

a:hover  滑鼠指標位於鏈結的上方時

a:active  鏈結被點選時

text-decoration屬性大多用於去掉鏈結種的下劃線

直接上**:

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>css3鏈結

title

>

6<

style

type

="text/css"

>

7a:link

15/*

曾經訪問過該網頁時的顏色

*/16

a:visited

17/*

游標移動到該鏈結上面時的顏色

*/18

a:hover

19/*

滑鼠點選該鏈結時的顏色

*/20

a:active

21style

>

22head

>

23<

body

>

24<

a href

="">【極客學院】web前端開發

a>

25body

>

26html

>

開啟網頁後的效果

這個是從未點選過鏈結的時候,此時鏈結下面本該有一條下劃線的,這裡是沒有的

因為我們去除了鏈結下面的下滑線  text-decoration: none;

這裡是我們把游標移動到鏈結上面(沒有點選)時,鏈結顏色變為天藍色(aqua)

這裡是我們滑鼠點選鏈結時(此時說還未鬆開左鍵),鏈結變為黃綠色(yellowgreen)

劃重點:這裡我們如果再重新整理頁面,會發現頁面上的鏈結顏色為紅色,不是為藍色,就算你關閉瀏覽器,

重新開啟該html檔案,鏈結的顏色也為紅色,為什麼呢?

因為我們之前是有點選過該鏈結的,瀏覽器是有歷史記錄的,所以鏈結肯定為紅色

再回到鏈結所在的頁面,這時鏈結重新變回藍色

這次寫的內容也是短小精煉,理解起來應該也沒啥難度,實操一下基本都懂

最後希望這篇簡單的隨筆能對你們有所幫助吧(= ̄ω ̄=)

沒用就當看著玩啦[狗頭]

CSS簡單入門

css指層疊樣式表 cascading style sheets 定義如何顯示html元素 選擇器 h1 屬性 值 選擇器優先順序 內聯 外聯 id 類 元素 偽類 id選擇器為標有特定id的html元素設定樣式 para1選中同一class元素 center選中同一類元素 pselector ps...

css的簡單入門

在乙個style標籤中,去編寫css內容,最好將style標籤寫在這個head標籤中 幫助我們找到我們要修飾的標籤或者元素 元素選擇器 元素的名稱id選擇器 以 開頭 id在整個頁面中必須是唯一的 id的的名稱類選擇器 以 開頭 類的名稱偽類選擇器 通常都是用在a標籤上 外部樣式 通過link標籤引...

CSS入門 偽類 動態鏈結

偽類 動態鏈結 偽類可以看做是一種特殊的類選擇符,是能被支援css的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈結在不同狀態下定義不同的樣式效果。1.語法 偽類的語法是在原有的語法裡加上乙個偽類 pseudo class selector pseudo class 選擇符 偽類 偽類和類...