Web được thành lập trên các liên kết. Ý tưởng rằng chúng ta có thể nhấp/nhấn vào một liên kết và điều hướng từ trang web này sang trang web khác là cách lướt web trở thành một cụm từ quen thuộc
Các liên kết trong HTML thậm chí trông khác với văn bản thông thường mà không cần bất kỳ kiểu dáng CSS nào
Dự phòng nhúng CodePen
Chúng có màu xanh lam [tím nếu được truy cập]. Chúng được gạch dưới. Đó là một liên kết ở dạng tinh khiết nhất
Nhưng nếu chúng ta muốn thay đổi mọi thứ một chút thì sao? . Có thể bạn có ác cảm với gạch chân. Dù lý do là gì, CSS cho phép chúng tôi tạo kiểu cho các liên kết mà chúng tôi có thể làm với bất kỳ yếu tố nào khác. Tất cả những gì chúng ta cần làm là nhắm mục tiêu phần tử trong biểu định kiểu của chúng ta
Bạn muốn sử dụng một phông chữ khác, thay đổi màu sắc, loại bỏ phần gạch chân và biến tất cả thành chữ hoa?
a {
color: red;
text-decoration: none;
text-transform: uppercase;
}
Dự phòng nhúng CodePen
Bây giờ chúng tôi đang nấu ăn bằng gas. Nhưng tại sao lại dừng lại ở đó?
Tạo kiểu cho mỗi trạng thái liên kết
Các liên kết có các trạng thái khác nhau, nghĩa là chúng thích ứng khi chúng ta tương tác với chúng trên một trang web. Có ba trạng thái bổ sung của liên kết đáng được xem xét bất cứ khi nào chúng tôi thay đổi kiểu liên kết mặc định
- Liên kết [
:link
]. Đây có lẽ là cách ít được sử dụng nhất, nhưng nó dùng để tạo kiểu cho các phần tửcó
href
, thay vì các liên kết giữ chỗ - Đã truy cập [
0]. Sự xuất hiện của một liên kết mà người dùng đã nhấp vào trang trước đó khi con trỏ chuột không ở trên liên kết đó. Các kiểu bạn có thể áp dụng choa { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; }
0 bị hạn chế vì lý do bảo mậta { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; }
- Di chuột [
2]. Khi con trỏ chuột được đặt trên đầu liên kết mà không cần nhấp chuộta { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; }
- Đang hoạt động [
0]. Khi liên kết đang trong quá trình được nhấp vào. Nó có thể siêu nhanh, nhưng đây là khi nút chuột đã được ấn xuống và trước khi nhấp chuột kết thúca { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; }
- Tiêu điểm [
1]. Giống nhưa { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; }
2 nhưng nơi liên kết được chọn bằng phím Tab trên bàn phím. Trạng thái di chuột và tiêu điểm thường được tạo kiểu cùng nhaua { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; }
Lưu ý thứ tự có quan trọng
- liên kết
- Đã truy cập
- Bay lượn
- Tích cực
- Tiêu điểm
Nếu bạn không thực hiện theo thứ tự này [hãy tưởng tượng, chẳng hạn, kiểu
a {
background-color: red;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
0 của bạn xuất hiện sau kiểu a {
background-color: red;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
2 của bạn] thì các liên kết sẽ không hoạt động theo cách bạn muốn. Trong ví dụ tưởng tượng của tôi ở đó, kiểu a {
background-color: red;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
0 sẽ ghi đè kiểu a {
background-color: red;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
2, điều này rất khó xảy ra với những gì bạn muốn. Tiêu điểm là một tính năng trợ năng, do đó kéo dài vì nó quan trọng nhấtMột cách để ghi nhớ thứ tự là YÊU và GHÉT. đó là Liên kết]OF[được liệt kê]E / Di chuột]A[Đang hoạt động]TE
Đây là cùng một liên kết chúng tôi đã xem xét. Trước tiên, hãy thử di chuột lên trên nó mà không cần nhấp và nhận thấy rằng nó sẽ được gạch chân. Sau đó, nhấp vào liên kết, nhưng để nút chuột của bạn nhấp xuống một chút để xem kiểu hoạt động thay đổi màu của liên kết thành màu đen như thế nào. Cuối cùng, hãy nhấn vào nút chuột và liên kết sẽ chuyển sang màu tím trước khi nó được truy cập về mặt kỹ thuật
Dự phòng nhúng CodePen
Liên kết có vẻ như là một khái niệm đơn giản, nhưng thật đúng là chúng có rất nhiều thứ đang diễn ra—và CSS cung cấp cho chúng tôi sức mạnh đáng kinh ngạc để tùy chỉnh trải nghiệm
Liên kết dưới dạng Nút
Trong khi có một số tranh luận về nó, chúng ta có thể sử dụng CSS để làm cho một liên kết văn bản trông giống như một cái nút
Giống như các phần tử HTML khác, CSS có thể thêm màu nền và phần đệm vào các liên kết cho phép chúng ta tạo giao diện của nút. Đây là liên kết của chúng tôi sử dụng các kỹ thuật đó
a {
background-color: red;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
Dự phòng nhúng CodePen
Tuyệt quá. Bây giờ, hãy sử dụng các quyền thay đổi trạng thái mà chúng ta đã học trong phần trước để làm cho nút giả của chúng ta tương tác hơn. Chúng tôi sẽ làm cho nút có màu xám đậm khi di chuột, màu đen khi hoạt động và màu xám nhạt khi truy cập
a {
background-color: red;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
a:hover {
background-color: #555;
}
a:active {
background-color: black;
}
a:visited {
background-color: #ccc;
}
Dự phòng nhúng CodePen
Tạo kiểu cho liên kết dưới dạng nút và tận dụng các trạng thái cho phép chúng tôi tạo một số hiệu ứng khá thú vị. Ví dụ: hãy tạo một nút có độ sâu nhất định có vẻ như được nhấn khi nút đang hoạt động và bật lên sau khi nhấp xong
Dự phòng nhúng CodePen
Oh, và con trỏ
Chúng ta đã đi sâu vào các liên kết kiểu, nhưng có một thành phần nữa mà chúng ta không thể bỏ qua. con trỏ
Con trỏ chỉ vị trí của chuột trên màn hình. Chúng tôi khá quen với mũi tên đen tiêu chuẩn
Chúng ta có thể thay đổi mũi tên thành con trỏ tay ở trạng thái di chuột [
a {
background-color: red;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
2] của nó để dễ dàng nhận thấy rằng liên kết cho biết đó là một yếu tố tương táca {
background-color: red;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
8 cung cấp một gợi ý tương táca:hover {
cursor: pointer;
}
Dự phòng nhúng CodePen
Phù, đẹp hơn nhiều. Bây giờ, chúng ta có một liên kết khá lạ mắt trông giống như một nút với các tín hiệu tương tác phù hợp
Lên hạng
Chúng tôi đã đề cập đến khá nhiều vấn đề ở đây, nhưng nó mới chỉ là phần nổi của cách chúng tôi có thể kiểm soát kiểu liên kết. Nếu bạn đã sẵn sàng để tăng cấp, thì đây là một số tài nguyên bạn có thể tham gia từ đây