Làm thế nào để bạn tham khảo một liên kết trong css?

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

Mộ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;
}

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a: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

Bạn có thể đặt một liên kết trong CSS?

Thẻ liên kết trong CSS là gì?

Cách chính xác để tham chiếu CSS bên ngoài là gì?