Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho các trạng thái khác nhau của một liên kết bằng cách sử dụng CSS.
Liên kết (link) hoặc siêu liên kết (hyperlink) là một phần thiết yếu của một trang web. Nó cho phép khách truy cập điều hướng qua trang web khác. Do đó, tạo kiểu cho các liên kết đúng cách là một khía cạnh quan trọng của việc xây dựng một trang web thân thiện với người dùng.
Xem hướng dẫn về liên kết trong HTML để tìm hiểu thêm về liên kết và cách tạo chúng.
Một liên kết có bốn trạng thái khác nhau - link
, visited
, active
và hover
. Bốn trạng thái này của một liên kết có thể được tạo kiểu CSS khác nhau thông qua việc sử dụng các bộ chọn pseudo-class (pseudo-class selector) sau:
Bạn có thể chỉ định bất kỳ thuộc tính CSS nào bạn muốn ví dụ như color
, font
, background
, border
, v.v. cho các bộ chọn để tùy chỉnh kiểu của các liên kết, giống như bạn làm với các văn bản bình thường.
a:link { /* unvisited link */
color: #ff0000;
text-decoration: none;
border-bottom: 1px solid;
}
a:visited { /* visited link */
color: #ff00ff;
}
a:hover { /* mouse over link */
color: #00ff00;
border-bottom: none;
}
a:active { /* active link */
color: #00ffff;
}
Thứ tự bạn đặt cho các trạng thái khác nhau của liên kết trong CSS rất quan trọng, vì những quy tắc CSS ở cuối cùng được ưu tiên hơn các quy tắc CSS được xác định trước đó.
Lưu ý: Nói chung, thứ tự của các pseudo-class nên như sau -:link
,:visited
,:hover
,:active
,:focus
để hoạt động tốt.
Trong tất cả các trình duyệt web phổ biến như Chrome, Firefox, Safari, v.v., liên kết trên các trang web có gạch chân và sử dụng màu liên kết mặc định của trình duyệt, nếu bạn không tạo kiểu dành riêng cho chúng.
Theo mặc định, các liên kết văn bản sẽ xuất hiện như sau trong hầu hết các trình duyệt:
Tuy nhiên, không có sự thay đổi nào của liên kết trong trường hợp ở trạng thái di chuột. Nó vẫn có màu xanh dương, tím hoặc đỏ tùy thuộc vào trạng thái của liên kết (tức là không được truy cập, đã truy cập hoặc đang hoạt động).
Bây giờ chúng ta hãy xem cách tùy chỉnh các liên kết bằng cách ghi đè kiểu mặc định của nó.
Chỉ cần sử dụng thuộc tính color
của CSS để xác định màu bạn chọn cho các trạng thái khác nhau của liên kết. Nhưng khi lựa chọn màu sắc, hãy đảm bảo rằng người dùng có thể phân biệt rõ ràng giữa văn bản bình thường và các liên kết.
Hãy thử ví dụ sau để hiểu cơ bản về cách nó hoạt động như thế nào:
a:link {
color: #1ebba3;
}
a:visited {
color: #ff00f4;
}
a:hover {
color: #a766ff;
}
a:active {
color: #ff9800;
}
Nếu bạn không thích gạch chân mặc định trên các liên kết, bạn có thể chỉ cần sử dụng thuộc tính text-decoration
của CSS để loại bỏ nó. Ngoài ra, bạn có thể áp dụng các kiểu khác trên các liên kết như màu nền, đường viền dưới cùng, phông chữ đậm, v.v. để làm cho nó nổi bật hơn văn bản bình thường một chút.
Ví dụ sau đây cho thấy cách xóa hoặc tạo gạch chân cho các trạng thái khác nhau của một liên kết.
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
Bạn cũng có thể làm cho các liên kết thông thường của mình trông giống như nút bấm bằng cách sử dụng CSS. Để làm điều này chúng ta cần phải sử dụng vài thuộc tính CSS chẳng hạn như background-color
, border
, display
, padding
, v.v. Bạn sẽ tìm hiểu về các thuộc tính này một cách chi tiết trong các chương tiếp theo.
Hãy xem ví dụ sau và xem nó thực sự hoạt động như thế nào:
a:link, a:visited {
color: white;
background-color: #1ebba3;
display: inline-block;
padding: 10px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
}
a:hover, a:active {
background-color: #9c6ae1;
border-color: #7443b6;
}
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách định dạng danh sách HTML bằng CSS.
Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho bảng trong HTML bằng CSS.
Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho văn bản trên các trang web của mình bằng CSS.
Trong hướng dẫn này, bạn sẽ học cách tạo kiểu font chữ trên trang web bằng CSS.