Với CSS, các liên kết có thể
được quy đặt kiểu trong những cách khác nhau.![](file:///C:/Users/THAIHO~1/AppData/Local/Temp/msohtmlclip1/01/clip_image004.jpg)
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
Đăng nhận xét