Home »

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

Monday, 6 May 2013

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ừ 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
Tags: ,

Comments[ 0 ]


Post a Comment