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