Các trạng thái liên kết khác nhau có thể có các thuộc tính riêng của màu liên kết trong CSS. Các nhà phát triển chọn thay đổi kiểu và màu mặc định của URL để làm cho các liên kết phù hợp với thiết kế web của họ
Dưới đây là các trạng thái bạn có thể thay đổi màu liên kết bằng CSS
a:link
– không được thăm viếnga:hover
– khi con trỏ chuột di chuyển qua nóa:active
– khi người dùng nhấp vào liên kếta:visited
– liên kết đã truy cập
Trong ví dụ sau, chúng ta có tất cả 4 trạng thái liên kết với các màu khác nhau
Màu liên kết CSS
Các liên kết có cùng màu với phần còn lại của văn bản sẽ khó nhận thấy hơn. Bạn nên thay đổi luôn màu liên kết CSS để làm cho nó nổi bật
Để thay đổi màu liên kết, giá trị CSS phải được gán cho thuộc tính kiểu màu. Có một số cách để mô tả màu sắc. Bạn có thể sử dụng tên màu, đèn báo RGB [_______0_______7] hoặc đèn báo HEX [
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
8]Trong ví dụ sau, một liên kết CSS được gán một
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
9tôi là một liên kết
Sao chép ví dụ
a {
color: green;
}
Dùng thử trực tiếp Tìm hiểu trên Udacity
Đừng bỏ lỡ cơ hội dùng thử thang màu Pickeristic mới của chúng tôi để đặt màu cho liên kết CSS
Mẹo. Pickeristic cung cấp cho bạn các chỉ báo RGB, HSLA và các mã màu khác. Bạn có thể tạo các bộ màu cho dự án của mình, tạo màu ngẫu nhiên và thậm chí trộn chúng
ưu
- Thiết kế đơn giản [không có thông tin không cần thiết]
- Các khóa học chất lượng cao [ngay cả những khóa học miễn phí]
- Tính năng đa dạng
- chương trình cấp bằng nano
- Thích hợp cho doanh nghiệp
- Giấy chứng nhận hoàn thành trả tiền
LOẠI TRỪ. GIẢM GIÁ 75%
ưu
- Dễ điều hướng
- Không có vấn đề kỹ thuật
- Có vẻ quan tâm đến người dùng của nó
- Rất nhiều khóa học đa dạng
- chính sách hoàn tiền trong 30 ngày
- Giấy chứng nhận hoàn thành miễn phí
THẤP NHƯ 12. 99$
ưu
- Trải nghiệm người dùng tuyệt vời
- Cung cấp nội dung chất lượng
- Rất minh bạch với giá cả của họ
- Giấy chứng nhận hoàn thành miễn phí
- Tập trung vào các kỹ năng khoa học dữ liệu
- Lịch học linh hoạt
GIẢM GIÁ 75%
trang trí văn bản
Theo mặc định, các liên kết có gạch dưới. Để xóa gạch chân khỏi liên kết bằng CSS, hãy sử dụng thuộc tính trang trí văn bản CSS
Nó có bốn giá trị có thể. gạch dưới , gạch trên , dòng . , and none.
Ví dụ bên dưới làm cho CSS xóa gạch chân khỏi liên kết bằng cách thêm
a:link {
background-color: green;
}
a:visited {
background-color: blue;
}
a:hover {
background-color: red;
}
a:active {
background-color: pink;
}
0. Chúng tôi đặt giá trị a:link {
background-color: green;
}
a:visited {
background-color: blue;
}
a:hover {
background-color: red;
}
a:active {
background-color: pink;
}
1 cho mỗi trạng thái liên kết bằng CSS. chỉ các tiểu bang a:link {
background-color: green;
}
a:visited {
background-color: blue;
}
a:hover {
background-color: red;
}
a:active {
background-color: pink;
}
2 và a:link {
background-color: green;
}
a:visited {
background-color: blue;
}
a:hover {
background-color: red;
}
a:active {
background-color: pink;
}
3 có gạch chânSao chép ví dụ
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Dùng thử trực tiếp Tìm hiểu trên Udacity
Màu nền
Bên cạnh việc đặt màu liên kết trong CSS, có thể thêm thuộc tính màu nền
tôi là một liên kết
Sao chép ví dụ
a:link {
background-color: green;
}
a:visited {
background-color: blue;
}
a:hover {
background-color: red;
}
a:active {
background-color: pink;
}
Dùng thử trực tiếp Tìm hiểu trên Udacity
Thuộc tính tương tự như màu liên kết CSS. Bạn cũng có thể sử dụng các chỉ số giá trị tương tự
Mẹo. thường đặt màu nền ở trạng thái di chuột
Các nút liên kết cho menu điều hướng
Việc kiểm soát màu liên kết bằng CSS không phải là tất cả. Các nhà phát triển thường tạo kiểu cho các liên kết dưới dạng các nút [ví dụ: đối với menu điều hướng của các trang web]