Hướng dẫn what is an active link css? - một css liên kết hoạt động là gì?

Thí dụ

Chọn và tạo kiểu liên kết hoạt động:

A: Hoạt động {& nbsp; Màu nền: Vàng; }
  background-color: yellow;
}

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Bộ chọn :active được sử dụng để chọn và tạo kiểu liên kết hoạt động.

Một liên kết sẽ hoạt động khi bạn nhấp vào nó.

Mẹo: Bộ chọn hoạt động có thể được sử dụng trên tất cả các yếu tố, không chỉ các liên kết. The :active selector can be used on all elements, not only links.

Mẹo: Sử dụng bộ chọn liên kết: Liên kết kiểu đến các trang không được biết đến,: Bộ chọn đã truy cập đến các liên kết kiểu đến các trang đã truy cập và: Bộ chọn Hover để liên kết kiểu khi bạn chuột qua chúng. Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.

Lưu ý :: Hoạt động phải đến sau: Di chuột (nếu có) trong định nghĩa CSS để có hiệu quả! :active MUST come after :hover (if present) in the CSS definition in order to be effective!

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn bộ chọn.

CSS Cú pháp

: Active {& nbsp; & nbsp; css khai báo;}
  css declarations;
}

Nhiều ví dụ hơn

Thí dụ

Chọn và tạo kiểu A và phần tử khi bạn nhấp vào nó:

P: Active, H2: Active, A: Active {& nbsp; Màu nền: Vàng; }
  background-color: yellow;
}

Hãy tự mình thử »

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng
a:link {
  color: green;
}

Bộ chọn :active được sử dụng để chọn và tạo kiểu liên kết hoạt động.
a:visited {
  color: green;
}

Một liên kết sẽ hoạt động khi bạn nhấp vào nó.
a:hover {
  color: red;
}

Mẹo: Bộ chọn hoạt động có thể được sử dụng trên tất cả các yếu tố, không chỉ các liên kết.
a:active {
  color: yellow;
}

Hãy tự mình thử »

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng
  color: red;
}

Bộ chọn :active được sử dụng để chọn và tạo kiểu liên kết hoạt động.
  font-size: 150%;
}

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Bộ chọn :active được sử dụng để chọn và tạo kiểu liên kết hoạt động.

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 thay đổi 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

Một liên kết hoạt động là gì?

Sự khác biệt giữa các liên kết hoạt động và liên kết thông thường là gì?

Liên kết hoạt động trông như thế nào?

Sự khác biệt giữa trọng tâm và hoạt động là gì?