Tạo kiểu cho liên kết (Links) với CSS

Để tạo kiểu cho liên kết với CSS, trước hết cần biết 4 trạng thái của link: link (chưa xem), visited (đã xem), hover (chuột trỏ), active (đang click). Sử dụng pseudo-classes của thẻ anchor:

a:link      - liên kết chưa xem
a:visited   - liên kết đã xem
a:hover     - chuột trỏ vào
a:active    - đang được click

Ví dụ 1: Các trạng thái khác nhau

<!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>Các hướng dẫn</h1>
<p><a href="https://www.tutorialspoint.com/java">Java</a></p>
<p><a href="https://www.tutorialspoint.com/csharp">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>

Kết quả

Ví dụ 2: Loại bỏ underline, cùng màu

<!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>Tiêu đề Demo</h1>
<div>
  <p>Đây là <a href="https://tutorialspoint.com">tham chiếu</a></p>
</div>
</body>
</html>

Kết quả

Thứ tự quan trọng (LVHA):

a:link → a:visited → a:hover → a:active

Viết theo thứ tự này để tránh xung đột specificity.