Liên kết và tùy biến liên kết cho blog/web

Khi bạn vào trang web nào đó, Bạn sẽ thấy trong trang của họ có các link liên kết. Các link này thường có màu khác với màu chữ chung để độc giả dễ phân biệt. Có trang màu link thay đổi khi click chuột hoặc dê chuột qua link đó, cũng có trang màu link không thay dổi khi click vào đó hoặc di chuột qua nó.

Tất cả hiệu ứng link liên kết  đều có một cấu chúc chung cơ bản như bên dưới.

a:link{
color:blue; /*màu chữ link khi chưa dê chuột hoặc click vào*/
}
a:visited{
color: red; /*Màu chữ link đã xem rồi*/
}
a:hover{
color:orange; /*Màu chữ link khi dê chuột vào */
}
a:active{
color:red; /*Màu chữ link sau khi click */
}

Tùy biến link!

Từ cấu trúc trên ta có thể tùy biến thêm như:

1- Thêm gạch chân khi ai đó di chuột qua bạn chỉ cần thêm một trạng thái là Text-decoration:underline vào thẻ a:hover vào giữa hai dấu ngoặc {}

a:hover{
color:orange;
text-decoration:underline;
}

- Bỏ dấu gạch chân cho link thì bạn thay underline thành none như bên dưới (Trường hợp này áp dụng khi thẻ a:hover bạn để underline và bạn muốn một class nào đó không gạch chân ví dụ cho thẻ #sidebar.

#sidebar a:hover{
color:orange;
text-decoration:none;
}

- Làm tương tự với các thẻ còn lại.
2- Thên nền backgroud khi dê chuột qua:

a:hover {
color: orange;
text-decoration:underline;
background-color: #dddddd; /* Mã màu nền */
} 

3 -Thay đổi con trỏ khi ai đó di chuột qua đường link. Bạn thử đổi con trỏ thành dấu chấm hỏi (biểu tượng của giúp đỡ - helf).

a:hover {
color: orange;
text-decoration:underline;
background-color: #dddddd; /* Mã màu nền */
cursor: help; 
} 

Một vài trạng thái con trỏ khác bạn cũng có thể dùng:

auto
crosshair
help
move
pointer
text
wait
e-resize
ne-resize
n-resize
nw-resize
s-resize
se-resize 

- Bạn nên cẩn thận khi sử dụng những trạng thái của con trỏ trên trang web bởi vì nếu bạn dùng không đúng cách có thể làm cho người đọc nhầm lẫn và khó hiểu.