CSS Standard Link Styles: Kiểu liên kết chuẩn

Chúng ta có thể style link theo yêu cầu. Khuyến nghị link nên có style phân biệt với văn bản bình thường. Các style mặc định cho các trạng thái link như sau:

Default Link Colors (Theo đặc tả HTML/CSS)

Lưu ý: Màu trên có thể thay đổi với các phiên bản trình duyệt mới. Thứ tự pseudo-selector: :link, :visited, :hover, :active.

Ví dụ 1: Link mặc định (không 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="jdbc-mini-logo.jpg"></a>
</body>
</html>

Ví dụ 2: Custom link styles trong table

<!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>

Modern Link System (Khuyến nghị)

:root {
    --link-color: #0066cc;
    --link-hover: #004499;
    --link-visited: #663399;
    --link-active: #cc0000;
    --link-focus: #0066cc;
    --link-underline: underline;
}

a {
    color: var(--link-color);
    text-decoration: var(--link-underline);
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

a:hover { color: var(--link-hover); }
a:visited { color: var(--link-visited); }
a:active { color: var(--link-active); }

/* Focus visible cho keyboard navigation */
a:focus-visible {
    outline: 2px solid var(--link-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* External link indicator */
a[href^="http"]:not([href*="yourdomain.com"])::after {
    content: " ↗";
    font-size: 0.8em;
    vertical-align: super;
}

Accessibility Checklist

• ✅ Contrast ratio ≥ 4.5:1 (text) / 3:1 (large text)
• ✅ Focus indicator rõ ràng (:focus-visible)
• ✅ Không chỉ dùng màu — có underline/icon/border
• ✅ Link text mô tả đích đến (tránh "click here")
• ✅ :visited style khác biệt nhưng không rò rỉ privacy