Đườ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
-
Sửa lỗi biểu tượng loa có dấu X màu đỏ, máy tính không có âm thanh
Hôm qua -
Cách sửa lỗi “No Boot Device Found Press Any Key to Reboot the Machine“ trên Windows
Hôm qua -
Liên Quân PC
-
Cách tạo bài kiểm tra trên Google Form, tạo đề trắc nghiệm và chấm điểm tự động
Hôm qua -
Cách đóng băng, ẩn hàng và cột trong Google Sheets
Hôm qua -
999+ Stt thả thính, cap thả thính hay ❣ những câu thả thính dễ thương
Hôm qua 30 -
Cap đòi nợ, stt đòi nợ, câu nói đòi nợ hay và chất để tiền về túi nhanh nhất
Hôm qua -
Các cách fake IP máy tính hiệu quả, tốt nhất
Hôm qua 1 -
Cách bật cookie Liên Quân, cách tắt/bật cookie trên iPhone
Hôm qua 3 -
Hashtag là gì? Cách sử dụng hashtag và công dụng của hashtag?
Hôm qua