css基本定義 active、hover、link、visited總合應用
支援CSS1 以上
說明：active、hover、link、visited總合應用
css定義：
未訪問 a tag 套用樣式
a:link {
font-size: 20px; 字型20像素
color: blue; 字顏色blue
background-color:pink; 背色pink
}
移動到此 a tag 套用樣式
a:hover {
font-size: 40px; 字型40像素
color: red; 字顏色red
background-color: yellow;背色yellow
}
點下此 a tag 套用樣式
a:active {
font-size: 50px; 字型50像素
color: lime; 字顏色lime
background-color: gray; 背色gray
}
已訪問 a tag 套用樣式
a:visited {
font-size: 30px; 字型30像素
color: green; 字顏色green
background-color:red; 背色red
}
程式：
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 active、hover、link、visited總合應用</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
/* 未訪問 a tag */
a:link {
font-size: 20px;
color: blue;
background-color:pink;
}
/* 移動到此 a tag*/
a:hover {
font-size: 40px;
color: red;
background-color: yellow;
}
/* 點下此 a tag */
a:active {
font-size: 50px;
color: lime;
background-color: gray;
}
/* 已訪問 a tag*/
a:visited {
font-size: 30px;
color: green;
background-color:red;
}
</style>
</head>
<body>
<a href="#1">這是a tag 1</a>
<div>
<a href="#2">這是a tag 2</a>
</div>
</body>
</html>
未訪問 a tag 套用樣式
圖1：
移動到此 a tag 套用樣式
圖2：
點下此 a tag 套用樣式
圖3：
已訪問 a tag 套用樣式
圖4：
測試結束~
如果還不了解可參考：w3schools CSS Selector Reference
感謝~
其它文章
沒有留言:
張貼留言