Tùy biến liên kết cho Blog/Web

Hôm nay mình sẽ giới thiệu đến các bạn cách tùy biến liên kết , đây không phải là vấn đề mới mẻ nhưng lại rất quan trong cho 1 trang web . Mình hy vọng sẽ giúp được các bạn mới vào có thể nhanh chóng hiểu và sử dụng.Bất kì một trang web nào khi chúng ta truy cập cũng có rất nhiều đường link . Mỗi người quản lý trang web đều có sự lựa chọn cách hiện thị cho các đường link đó . Khi rê chuột hoặc click vào link đều có những hiệu ứng khác nhau . Đó là sự lựa chọn riêng .

Đây cấu trúc chung của link liên kết

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 */
}

Bây giờ chúng ta tùy biến link liên kết

Chúng ta chú ý đến  a:hover  là thẻ điều chỉnh khi chúng ta rê chuột
                         

a:hover{
color:orange; /* Màu chữ khi rê chuột */
text-decoration:underline; /* Có dấu gạch chân khi rê chuột */
}

Bỏ dấu gạch chân : ví dụ như trong thẻ sidebar

#sidebar a:hover{
color:orange;
text-decoration:none;  */ Bỏ dấu gạch chân */
}

Thêm nền khi rê chuột

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

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 số trạng thái con trỏ bạn có thể tham khảo

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

Bảng mã màu : Click vào đây

Chúc các bạn thành công !