โค้ด css จะใช้ในการตกแต่งส่วนต่างๆของหน้าเว็บไซต์ให้มีความสวยงาม คราวนี้เราจะมาอธิบายในส่วนของการใส่สีส่วนต่างๆของ link ที่อยู่ภายใต้ <style>…</style>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> a:link { } a:visited { } a:hover { } a:active { } </style> |
- a:link จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ที่แสดงปกติ
- a:visited จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ที่ผู้ใช้งานเคยคลิกแล้ว
- a:hover จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ในเวลาที่เลื่อนเมาส์เข้าไปยังบริเวณ link นั้นๆ
- a:active จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ในเวลาที่ผู้ใช้งานกดคลิก link นั้นๆ
ตัวอย่างการตั้งค่า
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <head> <style> a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; } </style> </head> <body> <p><b><a href="http://info.arit.rmutp.ac.th/" target="_blank">This is a link</a></b></p> </body> </html> |
ผลลัพทธ์ที่ได้
- a:link ตั้งค่า background เป็นสีเหลือง จึงแสดงผลลัพธ์นี้เป็นค่าเริ่มต้นสำหรับ link
- a:hover ตั้งค่า background เป็นสีเขียวอ่อน จึงแสดงผลลัพธ์นี้เมื่อผู้ใช้งานนำเมาส์ไปวางบริเวณ link
- a:active ตั้งค่า background เป็นสีชมพู จึงแสดงผลลัพธ์นี้ในขณะที่ผู้ใช้งานคลิกเมาส์ที่ตัว link
- a:visited ตั้งค่า background เป็นสีฟ้า จึงแสดงผลลัพธ์นี้หลังจากกลับมาที่หน้าเดิมที่เคยคลิก link ดังกล่าวไปแล้ว
