ads by google

วันอาทิตย์ที่ 5 สิงหาคม พ.ศ. 2555

Link

PropertyPurpose
a:linkกำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click
a:visitedกำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว
a:hoverกำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link
a:activeกำหนด style ให้กับ link ขณะถูกคลิก

ตัวอย่าง
<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>
ผลลัพธ์
Chapter1 Chapter2 Chapter3 Chapter4 Chapter5
ตัวอย่าง
<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>
ผลลัพธ์
Page : « First ‹ Prev 1 2 3 Next › Last »

เขียนโดย ที่