Bài đăng nổi bật


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

Post a Comment

Mới hơn Cũ hơn