CSS Styling Links: Tùy chỉnh giao diện liên kết

CSS cho phép chúng ta tùy chỉnh giao diện liên kết (links) theo ý muốn. Có thể định dạng văn bản bằng cách thêm màu, background, tăng kích thước, v.v. Hơn nữa, có thể thêm animation để tạo hiệu ứng trực quan dễ chịu.

Lưu ý quan trọng: Thứ tự các pseudo-selector cho link phải tuân theo: :link, :visited, :hover, :active (nhớ bằng câu: LoVe HeArt).

Các trạng thái của link

Ví dụ 1: Style cơ bản và hover

<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 25px; }
#mod {
    padding: 10px;
    color: darkturquoise;
    border: thin solid;
    background-color: lemonchiffon;
    text-decoration: none;
}
#mod:hover {
    color: white;
    box-shadow: 0 0 0 1px black;
    background-color: slateblue;
}
</style>
</head>
<body>
<p><a href="mailto:user@example.com">Demo link</a></p>
<p><a id="mod" href="mailto:user@example.com">Modified demo link</a></p>
</body>
</html>

Ví dụ 2: Link trong button, hover effect nâng cao

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 25px; display: flex; float: left;
    border: thin solid; background-color: snow; padding: 20px;
}
body * { border-radius: 5%; }
#mod {
    padding: 10px; color: royalblue; text-decoration: none;
}
#mod:hover {
    box-shadow: 0 0 10px 2px black;
    text-decoration: overline;
    font-size: 1.2em;
}
</style>
</head>
<body>
<div>
    <button><a href="#">Demo</a></button>
    <a id="mod" href="#">Demo</a>
</div>
</body>
</html>

Best Practice cho Link Styling

/* Reset cơ bản */
a {
    color: var(--link-color, #0066cc);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

/* Hover/Focus rõ ràng cho accessibility */
a:hover,
a:focus {
    color: var(--link-hover, #004499);
    text-decoration: underline;
    outline: none; /* Chỉ bỏ nếu có focus style tùy chỉnh */
}
a:focus-visible {
    outline: 2px solid var(--focus-color, #0066cc);
    outline-offset: 2px;
}

/* Visited - hạn chế style do privacy */
a:visited { color: var(--link-visited, #663399); }

/* Active - feedback khi click */
a:active { color: var(--link-active, #cc0000); }

Accessibility (Khả năng tiếp cận)

• Luôn có focus indicator rõ ràng cho điều hướng bàn phím
• Không chỉ dùng màu để phân biệt trạng thái — thêm text-decoration, border, icon
• Tỷ lệ 대비 (contrast) đủ cho mọi trạng thái
• Tránh outline: none trừ khi có thay thế rõ ràng