Đường dẫn trong CSS
Với CSS, đường dẫn có thể được tạo kiểu cách rất đa dạng.
Tạo kiểu cách cho đường dẫn
Đường dẫn được tạo kiểu cách bằng các đặc tính như color, font-family, background…
a {
color: hotpink;
}
Ngoài ra, đường dẫn cũng được tạo kiểu cách khác nhau tùy theo trạng thái của chúng. Có 4 trạng thái của đường dẫn, gồm:
- a:link - đường dẫn bình thường chưa được người dùng truy cập
- a:visited - đường dẫn đã được người dùng truy cập
- a:hover - đường dẫn mà người dùng rê chuột qua
- a:active - đường dẫn khi được click vào
Khi tạo kiểu cách cho đường dẫn theo trạng thái đường dẫn cần tuân theo một số quy định:
- a:hover phải đi sau a:link và a:visited
- a:active phải đi sau a:hover
Text Decoration
Đặc tính text-decoration
thường được dùng để loại bỏ dấu gạch chân khỏi đường dẫn.
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 tính background-color
được dùng để chọn màu nền cho đường dẫn.
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Nâng cao - nút bấm vào đường dẫn
Dưới đây là ví dụ nâng cao khi kết hợp một số đặc tính CSS để hiển thị đường dẫn dưới dạng hộp/nút bấm.
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;
}
Bài trước: Icon trong CSS
Bài sau: Danh sách trong CSS
3.147
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua -
15 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua