5/8/13

Liên kết và tùy biến liên kết trong bài viết trên blog

Đăng bởi Admin | 5/8/13 | 0 nhận xét

Liên kết và tùy biến liên kết cho bài viết trong blog


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 đổ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.
                                                                                               Theo: namkna 
                                                                                                Thu thuat vi tinh

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva