Hướng dẫn link color css - liên kết màu css

---

Với CSS, các liên kết có thể được tạo kiểu theo nhiều cách khác nhau.

---

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

---

Liên kết kiểu dáng

Các liên kết có thể được tạo kiểu với bất kỳ thuộc tính CSS nào (ví dụ: color, font-family, background, v.v.).

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 chúng đang ở.state they are in.

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

• a:link - một liên kết bình thường, không được biết đến
• 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 mouses qua nó
• a:active - một liên kết ngay khi nó được nhấp vào

Thí dụ

/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
a:link {
  color: red;
}

/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
a:visited {
  color: green;
}

/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
a:hover {
  color: hotpink;
}

/ * Liên kết đã chọn */a: Active {& nbsp; Màu sắc: màu xanh;}
a:active {
  color: blue;
}

Hãy tự mình thử »

Khi thiết lập 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: Di chuột phải đến sau A: Liên kết và A: Đã truy cập
• A: Hoạt động phải đến sau A: Di chuột

---

---

Trang trí văn bản

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

Thí dụ

/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
  text-decoration: none;
}

/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
  text-decoration: none;
}

/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
  text-decoration: underline;
}

/ * Liên kết đã chọn */a: Active {& nbsp; Màu sắc: màu xanh;}
  text-decoration: underline;
}

Hãy tự mình thử »

---

Khi thiết lập 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: Di chuột phải đến sau A: Liên kết và A: Đã truy cập

Thí dụ

/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
  background-color: yellow;
}

/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
  background-color: cyan;
}

/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
  background-color: lightgreen;
}

/ * Liên kết đã chọn */a: Active {& nbsp; Màu sắc: màu xanh;}
  background-color: hotpink;
}

Hãy tự mình thử »

---

Khi thiết lập 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: Di chuột phải đến sau A: Liên kết và A: Đã truy cập

Thí dụ

/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
  background-color: red;
}

Hãy tự mình thử »

---

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

Thí dụ

/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}

/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

/ * Liên kết đã chọn */a: Active {& nbsp; Màu sắc: màu xanh;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

Hãy tự mình thử »
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

Khi thiết lập 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.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

Hãy tự mình thử »

Thí dụ

/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}

/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
  background-color: green;
  color: white;
}

Hãy tự mình thử »

Thí dụ

/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}

/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
crosshair

default

e-resize

help

move

n-resize

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

text

w-resize

wait

Hãy tự mình thử »

---

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

Exercise:

A: Di chuột phải đến sau A: Liên kết và A: Đã truy cập

This is a heading

This is a paragraph

This is a link

A: Hoạt động phải đến sau A: Di chuột

Chúng tôi

• Giới thiệu
• Liên hệ
• Tuyển dụng
• Quảng cáo

Điều khoản

• Điều khoản hoạt động
• Điều kiện tham gia
• Quy định cookie

Trợ giúp

• Hướng dẫn
• Loại bỏ câu hỏi
• Liên hệ

Mạng xã hội

• Facebook
• Twitter
• LinkedIn
• Instagram

---

Bản quyền © 2021 Học Tốt Inc.