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!
CSS1 |
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.
:tích cực | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
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 đếna:visited
- một liên kết mà người dùng đã truy cậpa: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
{ color: red; }This is a heading
This is a paragraph
This is a link
A: Hoạt động phải đến sau A: Di chuột