ใช้งาน link element กับสถานะที่เกี่ยวข้อง

CSS จะทำให้เราสามารถกำหนดรูปแบบได้จากสถานะของลิ้งค์ที่แตกต่างกันคือ แบบที่ผู้ใช้ยังไม่เคยกด ,ขณะที่ผู้ใช้เอาเม้าส์ไปวาง, ขณะที่ผู้ใช้กด , และขณะอื่นๆ(ที่เคยกดไปแล้ว)

a:link {color:red;}
a:visited {color:orange;}
a:focus {color:purple;}
a:hover {color:green;}
a:active {color:blue;}
สิ่งเพิ่มเติมที่ 9.22 โค้ด ที่มีลิ้งค์ element ปรากฏอยู่ใน p element เหมือนกับการเขียนลิ้งค์ตามปรกติ

<p>ย่อหน้าที่ 1 ประกอบด้วยเนื้อหาจำนวนมากมาก</p>
<p>ย่อหน้าที่ 2 ประกอบด้วย<a href=”http://meewebfree.com”>ลิ้งค์</a>ส่วนหนึ่ง</p>
<div id=”bwork”>
<h2>หัวข้อที่ 2 </h2>
</div>
สิ่งเพิ่มเติมที่ 9.23 โค้ดที่จะใช้สำหรับทดสอบ link ในสถานะต่างๆ


สิ่งเพิ่มเติมที่ 9.24 เมื่อแสดงหน้าเว็บออกมา ลิ้งค์จะปรากฏเป็นสีแดง


สิ่งเพิ่มเติมที่ 9.25 เมื่อนำเม้าส์ไปวางบนลิ้งค์จะปรากฏเป็นสีเขียว


สิ่งเพิ่มเติมที่ 9.26 เมื่อเล่น tab มา active ที่ลิ้งค์จะปรากฏเป็นสีม่วง


สิ่งเพิ่มเติมที่ 9.27 เมื่อกดที่ลิ้งค์ จะทำให้สีขณะที่กด เปลี่ยนเป็นสีน้ำเงิน


สิ่งเพิ่มเติมที่ 9.28 เมื่อลิ้งค์ดังกล่าวเคยถูกกดไปแล้ว จะทำให้ลิ้งค์เปลี่ยนเป็นสีส้ม

การกำหนดรูปแบบให้กับสถานะต่างๆของลิ้งค์
1. พิมพ์ a โดยa ในที่นี้คือชื่อ ของ tag link นั่นเอง
2. พิมพ์ : (เครื่องหมาย colon)
3. พิมพ์ link เพื่อกำหนดรูปแบบให้กับลิ้งค์ใดๆที่ยังไม่เคยถูกกด
หรือ พิมพ์ visited เพื่อกำหนดรูปแบบให้กับลิ้งค์ที่ถูก click แล้ว
หรือ พิมพ์ focus เพื่อกำหนดรูปแบบให้กับลิ้งค์เมื่อเลื่อน cursor จาก keyboard มาทับ
หรือ พิมพ์ hover เพื่อกำหนดรูปแบบให้กับลิ้งค์เมื่อนำเม้าส์ไปวาง
หรือ พิมพ์ active เพื่อกำหนดรูปแบบให้กับลิ้งค์เมื่อลิ้งค์นั้นเคยถูกคลิกไปแล้ว

เพิ่มเติม
- ใน browser ทั่วๆไป เราสามารถใช้ pseudo-classes ได้ (class ที่ตัวหนังสือเกิดการเปลี่ยนรูปแบบได้ไม่หยุดนิ่งคงที่ เช่นเกิดจากการย่อหน้าเว็บ หรือขนาด browser ที่เปลี่ยนไป) กับ link a tag
- ถ้าสถานะของลิ้งค์ เกิดขึ้นพร้อมๆกัน ในเวลาเดียวกัน สิ่งที่จะแสดงออกมาจะเรียงตามดำกับความสำคัญดังนี้ link, visited, focus, hover , active (LVFHA)

No comments yet.
You must be logged in to post a comment.