Munu
Link
Property Purpose
a:link กำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click
a:visited กำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว
a:hover กำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link
a:active กำหนด style ให้กับ link ขณะถูกคลิก
Example
<html>
<head>
<style type=”text/css”>
.linkbox a:link {color: #FF0000} /* unvisited link สีแดง*/
.linkbox a:visited {color: #00FF00} /* visited link สีเขียว*/
.linkbox a:hover {color: #FF00FF} /* mouse over link สีชมพู */
.linkbox a:active {color: #0000FF} /* selected link สีน้ำเงิน*/
</style>
</head>
<body>
<div class=”linkbox”>
<a href=”css_chapter01.html”>Chapter1</a>
<a href=”css_chapter02.html”>Chapter2</a>
<a href=”css_chapter03.html”>Chapter3</a>
<a href=”css_chapter04.html”>Chapter4</a>
<a href=”css_chapter05.html”>Chapter5</a>
</div>
<body>
</html>
Output
Chapter1 Chapter2 Chapter3 Chapter4 Chapter5
Example
<html>
<head>
<style type=”text/css”>
.linkpage a { font:12px Arial, Helvetica, sans-serif;
background: #F8FBFC;
color: #56ADDC;
text-decoration: none;
padding: 2px 4px;
border: 1px solid #1BA0CD;
}
.linkpage a:hover { background-color:#C0F5FA;
border-color: #608BD2;
color:#0076AE
}
.linkpage span { font: 12px Arial, Helvetica, sans-serif;
color:#333333;
padding: 2px 4px;
}
</style>
</head>
<body>
<div class=”linkpage” style=”margin:auto; padding:10px”>
<span>Page :</span>
<a href=”css_chapter01.html”>« First</a>
<a href=”css_chapter14.html”>‹ Prev</a>
<a href=”css_chapter01.html”>1</a>
<a href=”css_chapter02.html”>2</a>
<a href=”css_chapter03.html”>3</a>
<a href=”css_chapter16.html”>Next ›</a>
<a href=”css_chapter25.html”>Last »</a>
</div>
<body>
</html>
Output
Page : « First ‹ Prev 1 2 3 Next › Last »
