Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Ninh Bình Web. Bài viết này mình xin giới thiệu đến các bạn một thành phần rất quan trọng trong mọi website, đó chính là liên kết. Cũng như một đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính định dạng CSS,… cho một liên kết.
Liên Kết Tạo Kiểu
Liên kết có thể được tạo phong cách với bất cứ thuộc tính nào của CSS (ví dụ như color, font-family, background, vv).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <style> a { color: hotpink; } </style> </head> <body> <p><b><a href="default.asp" target="_blank">Đây là một đường dẫn</a></b></p> </body> </html> |
Ngoài ra, các liên kết có thể được tạo kiểu khác nhau tùy thuộc vào trạng thái của chúng.
Bốn trạng thái liên kết là:
a:link– một liên kết bình thường, không được phépa:visited– liên kết mà người dùng đã truy cậpa:hover– một liên kết khi người dùng di chuột qua nóa:active– một liên kết thời điểm nó được nhấp
Ví du :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <style> /*Liên kết bình thường */ a:link { color: red; } /* Liên kết đã được truy cập */ a:visited { color: green; } /* Khi di chuột qua liên kết */ a:hover { color: hotpink; } /*Liên kết tại thời điểm được nhấp */ a:active { color: blue; } </style> </head> <body> <p><b><a href="default.asp" target="_blank">Đây là liên kết</a></b></p> </body> </html> |
Khi đặt kiểu cho một số trạng thái liên kết, có một số quy tắc đặt hàng:
a: hover PHẢI đến sau: liên kết và: đã truy cập
a: hoạt động phải đến sau một: di chuột
Trang Trí Văn Bản
Các text-decoration chủ yếu được sử dụng để loại bỏ gạch dưới từ các liên kết: Ví dụ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } |
Màu Nền
Các background-color có thể được dùng để xác định một màu nền cho các liên kết: Ví dụ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <style> a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; } </style> </head> <body> <p><b><a href="default.asp" target="_blank">Đây là liên kết</a></b></p> </body> </html> |
Nút Liên Kết (Phần Nâng Cao)
Ví dụ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } </style> </head> <body> <a href="default.asp" target="_blank">Đây là liên kết</a> </body> </html> |
Bài viết đến đây là kết thúc rồi, tuy nó đơn giản vậy thôi, nhưng cực kỳ quan trọng bởi vì khi các bạn làm dự án WEB nào đều phải đụng tới nó cả. Cảm ơn các bạn đã xem bài viết, mình rất mong nhận được sự đóng góp ý kiến từ các bạn.
