Liên kết CSS

Bằng CSS, bạn có thể thiết lập phong cách liên kết theo nhiều cách khác nhau.

Liên kết văn bản Liên kết văn bản Nút liên kết Nút liên kết

Thiết lập phong cách liên kết

Liên kết có thể sử dụng bất kỳ thuộc tính CSS nào (ví dụ color,font-family,background và vân vân) để thiết lập phong cách.

thực例

a {
  color: hotpink;
}

Thử nghiệm cá nhân

Ngoài ra, bạn có thể thiết lập phong cách khác nhau cho liên kết dựa trên trạng thái của liên kết.

Bốn trạng thái liên kết là:

  • a:link - Liên kết bình thường, chưa được truy cập
  • a:visited - Liên kết đã được truy cập
  • a:hover - Khi người dùng đặt con trỏ chuột trên liên kết
  • a:active - Khi liên kết được nhấp

thực例

/* Liên kết chưa được truy cập */
a:link {
  color: red;
}
/* Liên kết đã được truy cập */
a:visited {
  color: green;
}
/* Đặt con trỏ chuột trên liên kết */
a:hover {
  color: hotpink;
}
/* Liên kết đã được chọn */
a:active {
  color: blue;
}

Thử nghiệm cá nhân

Nếu thiết lập phong cách cho nhiều trạng thái liên kết, hãy tuân theo quy tắc thứ tự sau:

  • a:hover phải sau a:link và a:visited
  • a:active phải sau a:hover

Text decoration

text-decoration Thuộc tính này chủ yếu được sử dụng để loại bỏ dòng dưới của liên kết:

thực例

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Thử nghiệm cá nhân

Màu nền

background-color Thuộc tính này có thể được sử dụng để chỉ định màu nền của liên kết:

thực例

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Thử nghiệm cá nhân

Nút liên kết

Ví dụ này演示 một ví dụ cao cấp hơn, trong đó chúng ta kết hợp nhiều thuộc tính CSS để hiển thị liên kết dưới dạng hộp/nút:

thực例

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

Thử nghiệm cá nhân

Các ví dụ khác

Thêm các樣 thức khác vào liên kết
Ví dụ này minh họa cách thêm các樣 thức khác vào liên kết.
Cao cấp - Tạo liên kết/buttom có viền
Đây là một ví dụ khác về cách tạo khung liên kết/buttom.
Thay đổi con trỏ
Thuộc tính cursor xác định loại con trỏ cần hiển thị. Ví dụ này minh họa các loại con trỏ khác nhau (hữu ích cho liên kết).