เพื่อจัดสไตล์ลิงก์ด้วย CSS ต้องรู้สถานะ (states) ของลิงก์ 4 สถานะ: link, visited, hover, active ใช้ pseudo-classes ของ anchor element:
a:link - ลิงก์ที่ยังไม่ได้เยี่ยมชม a:visited - ลิงก์ที่เยี่ยมชมแล้ว a:hover - เมื่อเมาส์ชี้อยู่เหนือลิงก์ a:active - ลิงก์ที่กำลังถูกคลิก (กดค้าง)
ตัวอย่างที่ 1: สไตล์ลิงก์พื้นฐาน
<!DOCTYPE html> <html> <head> <style> a:link { color: orange; text-decoration: underline; } a:hover { color: red; text-decoration: underline; } a:active { color: green; text-decoration: underline; } </style> </head> <body> <h1>Tutorials</h1> <p><a href="https://www.tutorialspoint.com/java">Java</a></p> <p><a href="https://www.tutorialspoint.com/chsharp">C#</a></p> <p><a href="https://www.tutorialspoint.com/jquery">jQuery</a></p> <p><a href="https://www.tutorialspoint.com/ruby">Ruby</a></p> <p><a href="https://www.tutorialspoint.com/pytorch">PyTorch</a></p> </body> </html>
ผลลัพธ์
ตัวอย่างที่ 2: ลบ underline ทุกสถานะ
<!DOCTYPE html> <html> <head> <style> a:link { color: blue; text-decoration: none; } a:hover { color: blue; text-decoration: none; } a:active { color: blue; text-decoration: none; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is the <a href="https://tutorialspoint.com">reference</a></p> </div> </body> </html>
ผลลัพธ์
ลำดับความสำคัญ (LVHA Order) - สำคัญมาก!
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
ต้องเขียนในลำดับนี้เสมอ (Love HAte) มิฉะนั้นสถานะทับซ้อนจะทำงานผิด
Pseudo-classes เพิ่มเติม
:focus- เมื่อลิงก์ได้รับโฟกัส (Tab เข้า) - สำคัญสำหรับ accessibility:focus-visible- เฉพาะเมื่อโฟกัสด้วยคีย์บอร์ด (ไม่ใช่เมาส์):target- เมื่อ URL มี hash ตรงกับ ID ขององค์ประกอบ
แนวทางปฏิบัติที่ดี (Best Practices)
- คงสีต่างกันระหว่าง :link และ :visited เพื่อให้ผู้ใช้รู้ว่าอ่านแล้ว
- hover ควรเด่นชัด (สีสว่าง/underline) เพื่อบอกว่าเป็นลิงก์
- active ให้ feedback ทันทีเมื่อคลิก
- อย่าเอา outline ออก (outline: none) เว้นแต่จะใส่ focus style เอง
