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ếtCSS để đị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
1 a {
2 font : 12px arial , tahoma ;
3 color : blue ;
4 border : 1px solid #e1e1e1 ;
5 background : #e2e3e4
6 }
Cach loai bo gach chan duoi link lien ketMặ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.
a {text-decoration: none}
Tạo hiệu ứng hover cho liên kết
Ví dụ sau ta sẽ định dạng choliên kết như hình bên dưới
Code HTML:
HOME
ABOUT EWEBVN
CONTACT ME
Đị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:
p a{ color: #fff; background: #f77800; width: 150px; display: block; padding: 3px 10px;}
Khi đưa chuột lên liên kết, liênkế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:
p a:hover{background: green}
Tương tự ta có thể định dạngcho trạng thái a:visitted và a:active
