Chỉnh sửa CSS cho thẻ a

CSS cho thẻ a

Thẻ a – thẻ dùng để tạo các liên kết giữa các trang web, theo mặc định sẽ có màu xanh và được gạch chân. Thường thì chúng ta sẽ thay đổi CSS cho nó để đem lại nhiều hiệu ứng thú vị hơn với người dùng. Hôm nay Blog Kiến càng sẽ cùng bạn tiến hành một vài thì nghiệm nhỏ với thẻ này.

Trước tiên chúng ta phải biết đến 4 lớp giả của thẻ a, đó là:

  • link: trạng thái khi liên kết chưa nhận bất cứ tác động nào, chúng ta sử dụng lệnh a:link {Các Lệnh CSS} để điều chỉnh.
  • hover: trạng thái khi liên kết được di chuột qua, nó rất quan trọng nên bạn phải hết sức chú ý, chúng ta sử dụng a:hover {Các Lệnh CSS} để điều chỉnh.
  • visited: trạng thái khi người dùng đã click vào liên kết trước đó (hậu tố ed ám chỉ quá khứ), chúng ta sử dụng a:visted {Các lệnh CSS} để điều chỉnh.
  • active: trạng thái khi liên kết đang được nhấn, chúng ta sử dụng a:active {Các Lệnh CSS} để điều chỉnh.

Và dưới đây là những ví dụ cụ thể:

“Ngoại hình” của Thẻ a theo mặc định:
Kiến càng

Bỏ gạch chân cho liên kết (sử dụng text-decoration:none):
Kiến càng

Di chuột qua sẽ chuyển thành màu đỏ (sử dụng hover):
Kiến càng

Nhấn vào link thì chuyển thành màu vàng (bạn nhấn và giữ chuột trái một lúc thì hiệu ứng sẽ rõ hơn – sử dụng active):
Kiến càng

Chuyển thành màu xám nếu đã được click (sử dụng visited):
Kiến càng

Đoạn code CSS cho đoạn ở trên:

a:hover{
color: red;
}
a {
text-decoration: none;
}
a:active {
color: #FF0;
}
a:visited {
color: gray;
}

Bạn không cần phải định nghĩa cả 4 trạng thái – một hoặc hai trạng thái có khi đã đạt yêu cầu, thường hover hay được chú ý nhiều nhất, active và visited ít quan trọng hơn nhiều.