Với CSS, các liên kết có thể
được quy đặt kiểu trong những cách khác nhau.
Kiểu của các liên kết
Các liên kết có thể được đặt
kiểu với bất kỳ thuộc tính CSS nào (ví dụ như color, font-family, background, v.v.).
a {
color: hotpink;
}
Ngoài ra, các liên kết có thể
được đặt kiểu khác nhau tùy thuộc vào trạng
thái của nó.
Bốn trạng thái của các liên kết
là:
·
a: link-một liên kết
bình thường, chưa được truy cập
·
a: visited-một liên kết đã
được người dùng truy cập
·
a: hover-một liên kết khi
người dùng đưa con trỏ qua nó
·
a: active- thời điểm người
dùng nhấp vào liên kết
/* liên kết chưa được truy cập
*/
a:link {
color: red;
}
/* Liên kết đã được truy cập */
a:visited {
color: green;
}
/* Liên kết khi đưa con trỏ qua
*/
a:hover {
color: hotpink;
}
/* Liên kết đã được chọn */
a:active {
color: blue;
}
Khi cài đặt kiểu (style) cho
một số trạng thái của liên kết, có một số quy tắc cần tuân thủ:
·
a:hover PHẢI đứng sau a:link và a:visited
·
a:active PHẢI đứng sau a:hover
Trang trí văn bản
Thuộc tính text-decoration chủ yếu được sử dụng để loại bỏ các dấu gạch chân của các
liên kết:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Màu nền
Thuộc tính background-color có thể được sử dụng để xác định một màu nền cho các liên kết:
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Ví dụ khác
Ví dụ này cho thấy cách để
thêm kiểu khác cho liên kết.
Ví dụ này cho thấy cách làm
nâng cao hơn, ở đó chúng ta kết hợp một số thuộc tính CSS để hiển thị liên kết
như các hộp.
Tự làm bài tập!
CodeLean.vn
Facebook: CodeLean Community
Đăng nhận xét