Standard Link Styles ใน CSS (สไตล์ลิงก์มาตรฐาน)

เราสามารถจัดสไตล์ลิงก์ตามต้องการ แนะนำให้ลิงก์มีสไตล์ที่แยกจากข้อความปกติ สไตล์เริ่มต้นของเบราว์เซอร์สำหรับสถานะลิงก์ต่างๆ มีดังนี้:

หมายเหตุ: สีอาจเปลี่ยนในเบราว์เซอร์รุ่นใหม่ สำหรับการทำงานที่ถูกต้อง ลำดับ pseudo selectors คือ: :link, :visited, :hover, :active

ตัวอย่างที่ 1: ลิงก์มาตรฐาน (ไม่มี CSS)

<!DOCTYPE html>
<html>
<head>
  <style> * { text-align: center; } </style>
</head>
<body>
  <h2>Learn JDBC</h2>
  <a href="">Click here</a> <br/><br/>
  <a href="#">And here <img src="https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html>

ผลลัพธ์

ปกติ:

Active state:

ตัวอย่างที่ 2: ผสมลิงก์มาตรฐานและกำหนดเอง

<!DOCTYPE html>
<html>
<head>
  <style>
    #one { color: black; text-decoration: none; }
    #two { font-style: italic; box-shadow: inset 0 0 8px coral; }
    table, td { font-size: 1.4em; padding: 8px; text-align: center; border: thin solid; }
  </style>
</head>
<body>
  <table>
    <tr>
      <td><a id="one" href="#">1</a>(non standard link)</td>
      <td id="two"><a href="#">2</a></td>
    </tr>
    <tr>
      <td><a href="">3</a></td>
      <td><a href="#">4</a></td>
    </tr>
  </table>
</body>
</html>

ผลลัพธ์

ปกติ:

คลิก "2":

แนวทางปฏิบัติแนะนำ (Modern Reset)

/* Reset link styles แล้วสร้างใหม่ */
a {
  color: inherit;           /* สืบทอดสีจากพาเรนต์ */
  text-decoration: none;    /* ลบ underline */
  transition: color 0.2s;
}

a:hover { color: #0066cc; text-decoration: underline; }
a:focus { outline: 2px solid #0066cc; outline-offset: 2px; }
a:active { color: #cc0000; }

/* Visited - จำกัดเฉพาะ color properties */
a:visited { color: #551a8b; }

Accessibility Checklist

• ✅ Contrast ratio ≥ 4.5:1 (WCAG AA)
• ✅ Focus indicator ชัดเจน (ไม่ใช้ outline: none โดยไม่ทดแทน)
• ✅ Underline หรือ indicator อื่นสำหรับลิงก์ในข้อความ
• ✅ Visited state แยกจาก unvisited ได้ชัดเจน