Chỉnh sửa CSS cho thẻ a: một trong những cái quan trọng nhất mà bạn cần PHẢI biết

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à:

1. 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.
2. 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.
3. 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.
4. 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.

Đọc thêm về các lớp giả first-letter, first-child & selector trong CSS.

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

---

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

Code mẫu:

<style>
a {text-decoration:none}
</style>
<a href="https://kiencang.net">Kiến càng</a>

Đọc thêm cách CSS cho văn bản.

---

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

Code mẫu:

<style>
a:hover {color:red;}
</style>
<a id="hoverme" href="https://kiencang.net">Kiến càng</a>

Kết quả:

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):

Code mẫu:

<style>
a:active {color:yellow;}
</style>
<a id="clickme" href="https://kiencang.net">Kiến càng</a>

Kết quả:

Kiến càng

---

Đọc thêm các cách khai báo màu sắc trong CSS.

---

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

Code mẫu:

<style>
a:visited {color:grey;}
</style>
<a id="vistedme" href="https://kiencang.net">Kiến càng</a>

Kết quả:

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.