Đườ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
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách xem số thẻ MBBank trên ứng dụng
Hôm qua -
Bluestacks
-
Những ứng dụng hoán đổi khuôn mặt tốt nhất
Hôm qua -
9 công cụ tạo video AI tốt nhất
Hôm qua -
Cách kiểm tra số dư tài khoản Sacombank rất đơn giản
Hôm qua -
5 cách mở cài đặt âm thanh trên PC Windows
Hôm qua 2 -
Cách hiện file ẩn, thư mục ẩn trên Windows 10/8/7
Hôm qua -
Cách sửa lỗi gõ tiếng Việt trên Word, Excel
Hôm qua -
Cách khóa và mở khóa file Powerpoint để chỉnh sửa
Hôm qua -
‘Từ điển’ tiếng Huế thông dụng
Hôm qua