home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีเปลี่ยนสีลิงก์ (Link Color) ใน HTML

ใช้ CSS property color เพื่อเปลี่ยนสีของลิงก์ (<a>) ได้ทั้ง inline style และ stylesheet

วิธีการ

<a href="/about" style="color: red;">Red Link</a>
<a href="/contact" style="color: #0066cc;">Blue Link</a>
<a href="/blog" style="color: rgb(34, 197, 94);">Green Link</a>

ตัวอย่างเต็ม

<!DOCTYPE html>
<html>
<head>
  <title>HTML Link Color</title>
</head>
<body>
  <h2>About</h2>
  <p>
    Our <a href="/about/about_team.htm" style="color: red">Team</a>
    comprises of programmers, writers, and analysts.
  </p>
</body>
</html>

สถานะลิงก์ต่างๆ (Pseudo-classes)

ควรกำหนดสีสำหรับทุกสถานะเพื่อ UX ที่ดี:

a:link { color: #0066cc; }      /* ยังไม่ได้คลิก */
a:visited { color: #663399; }    /* คลิกแล้ว */
a:hover { color: #004499; }      /* hover */
a:active { color: #cc0000; }     * กำลังคลิกอยู่ */
a:focus { outline: 2px solid #0066cc; } /* keyboard focus */

ลำดับที่แนะนำ (LVHA)

เขียน CSS ตามลำดับ: Link, Visited, Hover, Active (LoVe HAte)

ข้อควรทราบ

  • inline style override global styles
  • ควรคงสัดส่วนความต่างสี (contrast ratio ≥ 4.5:1) ตาม WCAG
  • ไม่ควรใช้สีเดียวกับข้อความปกติ (ผู้ใช้แยกไม่ได้)