- Trang chủ
- Tham khảo
- CSS
- :active
Định nghĩa và sử dụng":active" chọn các liên kết được kích hoạt. Cấu trúca:active {
property : value;
}Ví dụHTML viết:<html>
<head></head>
<body>
<p><a href="#">Học web chuẩn</a></p>
<p><a href="#">Google</a></p>
<p><a href="#">vnexpress</a></p>
</body>
</html> Hiển thị trình duyệt khi chưa có CSS:CSS viết:a:active {
background: #ff0000;
}Click vào link sẽ có hiệu ứng. Hiển thị trình duyệt khi đã có CSS:Trình duyệt hỗ trợ":active" được hỗ trợ trong đa số các trình duyệt. 1) Bộ chọn :active trong CSS- Bộ chọn :active dùng để chọn phần tử đang được người dùng nhấp chuột vào.:active dùng để chọn phần tử đang được người dùng nhấp chuột vào. 2) Cách sử dụng bộ chọn :active trong CSS- Để sử dụng bộ chọn :active, ta dùng cú pháp như sau::active, ta dùng cú pháp như sau: :active{
các khai báo định dạng CSS
}
3) Một số ví dụVí dụ : - Thiết lập chữ đỏ nền vàng cho liên kết đang được người dùng nhấp vào
a:active{
color:red;
background-color:yellow;
}
Xem ví dụ Bài viết này sẽ giúp các bạn hiểu hơn về bộ chọn :active trong css về cú pháp, cách sử dụng và các ví dụ thực hành Bộ chon :active trong cssVí dụ - Chọn và định kiểu backgroup cho thẻ div Code HTML: Ví dụ về bộ chọn activediv class="ex_active">Ví
dụ về bộ chọn active</div> Code CSS: div.ex_active:active {{ background-color: yellow; } Định nghĩa và cách sử dụng - Bộ chọn active trong css được sử dụng để chọn và định kiểu style cho phần tử được click, được nhấp vào. Một liên kết sẽ hoạt động khi bạn nhấp vào nó. - Mẹo: Bộ chọn có thể hoạt động được sử dụng trên tất cả các thẻ html, cả thẻ div ở ví dụ trên, không chỉ các thẻ liên kết.Mẹo: Bộ chọn có thể hoạt động được sử dụng trên tất cả các thẻ
html, cả thẻ div ở ví dụ trên, không chỉ các thẻ liên kết. - Mẹo: Sử dụng bộ chọn :link để tạo kiểu liên kết đến các trang không được chú ý, bộ chọn :visited để tạo kiểu liên kết đến các trang đã truy cập và bộ chọn :hover để liên kết kiểu khi bạn di chuột qua chúng.Mẹo: Sử dụng bộ chọn :link để tạo kiểu liên kết đến các trang không được chú ý, bộ chọn :visited để tạo kiểu liên kết đến các trang đã truy cập và bộ chọn :hover để liên kết kiểu khi bạn di chuột qua chúng. - Lưu ý: Bộ chọn :active trong css phải được sử dụng sau :hover trong css thì mới có hiệu lực. Mới thực thi đúng ý muốn của bạn được.active trong css phải được sử dụng sau :hover trong css thì mới có hiệu lực. Mới thực thi đúng ý
muốn của bạn được. Xem thêm bài viết về: active trong css Hướng dẫn các bạn cách active cho thanh menu của blogspot đơn giản. Khi chúng ta chọn và truy cập link đó từ thanh Menu, thì mục truy cập sẽ được thêm Class Active để làm nổi bật, nhấn mạnh cho chúng ta biết là đang truy cập vô mục đó.active cho thanh menu của blogspot đơn giản. Khi chúng ta chọn và truy cập link đó từ thanh Menu, thì mục truy cập sẽ được thêm Class Active để làm nổi bật, nhấn mạnh cho chúng ta biết là đang truy cập vô mục đó. Các bạn có thể xem demo trực tiếp trên website này. Các bước thực hiện như sau:1. Đầu tiên trong blogspot của các bạn phải có một css có class là active
Các bước thực hiện như sau:
1. Đầu tiên trong blogspot của các bạn phải có một css có class là active <style>
.active a {
color: #008bff !important;
font-weight: 700;
}
</style> Như vậy là khi class active thì thẻ được kích hoạt với CSS bên trên. Để hiểu rõ hơn mình lấy ví dụ luôn về HTML như dưới.active thì thẻ được kích hoạt với CSS bên trên. Để hiểu rõ hơn mình lấy ví dụ luôn về HTML như dưới. <ul class="main-menu">
<li class="item active">
<a href="#"> Bán hàng 1</a>
</li>
<li class="item">
<a href="#"> Bán hàng 2</a>
</li>
<li class="item">
<a href="#"> Bán hàng 3</a>
</li>
</ul> Mục đích của chúng ta là thêm class active vào thẻ khi chúng ta chọn như trên.2. Viết JavaScript như sau, các bạn copy dán trước - Nếu thanh Menu có trang chủ (Trang chủ - Giới thiệu - Sản phẩm - Tin tức - Liên hệ)active vào thẻ khi chúng ta chọn như
trên.
2. Viết JavaScript như sau, các bạn copy dán trước | 
