Link ลิงค์ จุดเชื่อมโยง

หน้าแรก CSS 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

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">&laquo; First</a>
<a href="css_chapter14.html">&lsaquo; 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 &rsaquo;</a> 
<a href="css_chapter25.html">Last &raquo;</a> 
</div>
<body>
</html>

Output

Page : « First ‹ Prev 1 2 3 Next › Last »

ขึ้นไปด้านบน