CSS - Liên kết

Chương này hướng dẫn bạn cách thiết lập các thuộc tính khác nhau của siêu liên kết bằng cách sử dụng CSS. Bạn có thể đặt các thuộc tính sau của một siêu liên kết:

Chúng ta sẽ xem lại các thuộc tính tương tự khi chúng ta thảo luận về Pseudo-Classes của CSS.

Các :link biểu thị các siêu liên kết không được truy cập.
Các :visited biểu thị các siêu liên kết đã truy cập.
Các :hover biểu thị một phần tử hiện có con trỏ chuột của người dùng đang di chuột qua nó.
Các :active biểu thị một phần tử mà người dùng hiện đang nhấp vào.

Thông thường, tất cả các thuộc tính này được giữ trong phần tiêu đề của tài liệu HTML.

Hãy nhớ a: hover PHẢI đến sau một: liên kết và a: đã truy cập trong định nghĩa CSS để có hiệu quả. Ngoài ra, a: active PHẢI đứng sau a: di chuột trong định nghĩa CSS như sau:

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

Bây giờ, chúng ta sẽ xem cách sử dụng các thuộc tính này để tạo các hiệu ứng khác nhau cho các siêu liên kết.

Đặt màu của các liên kết

Ví dụ sau minh họa cách thiết lập màu liên kết. Giá trị có thể là bất kỳ tên màu nào ở bất kỳ định dạng hợp lệ nào.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Nó sẽ tạo ra liên kết đen sau:

Đặt màu của các liên kết đã truy cập

Ví dụ sau minh họa cách đặt màu của các liên kết đã truy cập. Giá trị có thể là bất kỳ tên màu nào ở bất kỳ định dạng hợp lệ nào.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html>

Nó sẽ tạo ra liên kết sau. Sau khi bạn nhấp vào liên kết này, nó sẽ đổi màu thành màu xanh lá cây.

Thay đổi màu của các liên kết khi di chuột qua

Ví dụ sau minh họa cách thay đổi màu của các liên kết khi chúng ta đưa con trỏ chuột qua liên kết đó. Giá trị có thể là bất kỳ tên màu nào ở bất kỳ định dạng hợp lệ nào.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Nó sẽ tạo ra liên kết sau. Bây giờ, bạn đưa chuột lên liên kết này và bạn sẽ thấy nó chuyển màu thành màu vàng.

Thay đổi màu của các liên kết đang hoạt động

Ví dụ sau minh họa cách thay đổi màu của các liên kết đang hoạt động. Giá trị có thể là bất kỳ tên màu nào ở bất kỳ định dạng hợp lệ nào.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Nó sẽ tạo ra liên kết sau. Nó sẽ đổi màu thành màu hồng khi người dùng nhấp vào.