Bài 9: Định dạng liên kết với CSS

Để hiểu về cách định dạng cho liên kết, truớc tiên chúng ta cùng tìm hiểu về các trạng thái của các liên kết trên website.
Một liên kết có 4 trạng thái sau:

• a:link – liên kết khi chưa được click.
• a:visited – liên kết đã được click.
• a:hover – khi người dùng di chuyển chuột lên liên kết.
• a:active – khi liên kết được nhấn (nhấn và không thả chuột).

Theo đó, chúng ta có thể viết CSS để định dạng  cho từng trạng thái này của liên kết.
Trong thiết kế web, đa số chúng ta chỉ viết CSS cho hai trạng thái a:link (tương đương a) và a:hover.
Các định dạng liên kết chủ yếu bao gồm:

• Các thuộc định dạng font chữ, kích cỡ…
• Các thuộc tính định dạng text
• Định dạng màu sắc (color)
• Định dạng đường viền (border)
• Và định dạng background

Ví dụ về cách định dạng liên kết

Làm sao bỏ đường gạch chân của liên kết

Mặc định, các liên kết luôn có đường gạch chân, nhưng với CSS chúng ta có thể loại bỏ một cách dễ dàng với thuộc tính text-decoration.

Tạo hiệu ứng hover cho liên kết

Ví dụ sau ta sẽ định dạng cho liên kết như hình bên dưới

Code HTML:

Định dạng cho các liên kết hiện thị với màu trắng, nền màu cam, ta viết CSS như sau:

Khi đưa chuột lên liên kết, liên kết hiển thị với nền màu xanh, ta viết CSS cho trạng thái a:hover của liên kết:

Tương tự ta có thể định dạng cho trạng thái a:visitted và a:active