CSS – Liên Kết (Links )

0
7

Liên kết tạo kiểu (Styling Links )

Liên kết có thể được phong cách với bất cứ thành phần CSS (ví dụ như colorfont-familybackground, vv).

Ví dụ:

a {
  color: hotpink;
}

Ngoài ra, các liên kết có thể được tạo kiểu khác nhau tùy thuộc vào trạng thái của chúng.

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

  • a:link – một liên kết bình thường
  • a:visited – một liên kết mà người dùng đã truy cập
  • a:hover – một liên kết khi người dùng di chuột qua nó
  • a:active – một liên kết ngay khi nó được nhấp vào
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

Ví dụ:

Khi đặt kiểu cho một số trạng thái liên kết, có một số quy tắc đặt hàng:

  • a:hover PHẢI đến sau một a:link và a:visited
  • a:action PHẢI đến sau a: hover


Trang trí văn bản (Text Decoration )

text-decoration chủ yếu được sử dụng để loại bỏ gạch dưới từ các liên kết:

Ví dụ:

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Màu nền (Background Color )

background-color có thể được dùng để xác định một màu nền cho các liên kết:

Ví dụ:

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

Các nút liên kết (Link Buttons )

Ví dụ này minh họa một ví dụ nâng cao hơn trong đó chúng tôi kết hợp một số thuộc tính CSS để hiển thị các liên kết dưới dạng boxes/buttons:

Ví dụ:

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

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây