trên một trang web, sau đó một tập hợp các kiểu sẽ được áp dụng.
Thông thường, khi bạn tạo kiểu cho một trang web, bạn sẽ chỉ muốn áp dụng một kiểu khi một phần tử đã chuyển sang trạng thái đặc biệt, chẳng hạn như được người dùng nhấp vào hoặc được di chuyển qua. Đó là nơi xuất hiện của các lớp giả.
Lớp giả là các từ khóa được thêm vào một bộ chọn cho phép bạn chọn một phần tử cụ thể khi phần tử đó tồn tại ở một trạng thái nhất định.
Đối với hướng dẫn này, chúng tôi sẽ tập trung vào:lớp giả hoạt động.
CSS:Pseudo-class đang hoạt động
Lớp giả:hoạt động cho phép bạn chọn một phần tử đang được kích hoạt bởi người dùng. Theo thuật ngữ CSS, “kích hoạt” có nghĩa là khi người dùng nhấn nút chuột và nhấp vào phần tử.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Lớp giả:active thường được sử dụng với các phần tử và . Ví dụ:bạn có thể sử dụng:active pseudo-class để thay đổi màu của một liên kết thành màu đỏ khi nó được nhấp vào hoặc để thay đổi màu nền của nút thành màu xanh lam nhạt khi nó được nhấp vào.
Khi người dùng đã ngừng nhấp vào một phần tử, phần tử đó sẽ không được “kích hoạt” nữa. Vì vậy, phần tử sẽ không được chọn bởi:bộ chọn hoạt động khi người dùng ngừng nhấp vào một phần tử.
CSS:các ví dụ hoạt động
Hãy xem qua hai ví dụ để minh họa cách bạn có thể sử dụng:lớp giả hoạt động.
Liên kết đang hoạt động
Giả sử chúng ta đang thiết kế một trang web cho một câu lạc bộ chơi bài địa phương, Wizards of the Boards. Chúng tôi đã được giao nhiệm vụ tạo một trang “Giới thiệu” bao gồm một liên kết đến một trang web liệt kê các trò chơi bài do các thành viên của câu lạc bộ chơi.
Theo mặc định, liên kết này sẽ xuất hiện với màu xanh lam nhạt. Khi liên kết này được nhấp vào, màu văn bản của nó sẽ chuyển thành màu cam. Để thực hiện tác vụ này, chúng ta có thể sử dụng:lớp giả hoạt động. Đây là mã chúng tôi sẽ sử dụng để thay đổi màu văn bản của chúng tôi khi một liên kết được nhấp vào:
<html>
<p>Wizards of the Boards is a Philadelphia, PA-based card game club. The club, founded by Michael Johnson and Gabriella Patel in 2004, welcomes players of all card games to come along. The club meets twice each week, on Mondays and Fridays, to discuss the latest in the card games our members play, and to sit down for a few matches of our favorite games.
To learn more about the games we play at Wizards of the Boards, <a href="/games.html">click here</a>.</p>
</html>
<style>
a {
color: lightblue;
}
a:active {
color: orange;
}
</style>
Mã của chúng tôi trả về: nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong tệp HTML của chúng tôi, chúng tôi đã xác định một đoạn văn bản bằng cách sử dụng các thẻ
phác thảo lịch sử của câu lạc bộ trò chơi bài Wizards of the Boards. Trong thẻ
của chúng tôi, chúng tôi đã chỉ định một thẻ liên kết đến trang “games.html” và được kích hoạt khi người dùng nhấp vào văn bản “nhấp vào đây”.
Trong mã CSS của chúng tôi, chúng tôi đã chỉ định hai quy tắc kiểu. Đầu tiên, chúng tôi đã chỉ định một quy tắc đặt màu văn bản của tất cả các thẻ thành màu xanh lam nhạt. Sau đó, chúng tôi chỉ định một quy tắc bằng cách sử dụng:công cụ chọn hoạt động đặt màu văn bản của tất cả các thẻ đang hoạt động thành màu cam. Nói cách khác, quy tắc này thay đổi màu của một liên kết khi người dùng nhấp vào nó.
Các nút hoạt động
Chúng tôi đang làm việc trên một biểu mẫu cho câu lạc bộ trò chơi bài Wizards of the Boards cho phép mọi người gửi sự quan tâm của họ đến câu lạc bộ.
Ở cuối biểu mẫu, chúng tôi muốn tạo một nút có nội dung “Gửi sự quan tâm của bạn”. Khi nút này được nhấp, một đường viền màu cam rộng 3px sẽ được áp dụng xung quanh nút.
Chúng tôi có thể tạo nút này bằng mã sau:
<html>
<button>Submit Your Interest</button>
</html>
<style>
button:active {
border: 3px solid orange;
}
</style>
Mã của chúng tôi trả về: nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Hãy chia nhỏ mã của chúng ta. Trong tệp HTML của chúng tôi, chúng tôi đã xác định một nút bằng thẻ . Nút này có dòng chữ “Gửi sự quan tâm của bạn”.
Trong biểu định kiểu CSS của chúng tôi, chúng tôi đã xác định một quy tắc áp dụng cho thẻ khi nó được kích hoạt bởi người dùng. Quy tắc này tạo một đường viền liền khối rộng 3px xung quanh nút của chúng ta. Chúng tôi sử dụng bộ chọn:hoạt động để chỉ áp dụng quy tắc này khi nút đang hoạt động.
Vì vậy, nếu chúng ta nhấp vào nút của mình, một đường viền màu cam sẽ xuất hiện và ngay sau khi chúng ta ngừng nhấp vào nút, đường viền sẽ biến mất.
Kết luận
CSS:active pseudo-class cho phép bạn chọn một phần tử khi nó ở trạng thái “hoạt động”. Khi bạn đã chọn một phần tử đang hoạt động, bạn có thể áp dụng một kiểu hoặc tập hợp các kiểu cho phần tử.
Lớp giả:hoạt động thường được sử dụng với các thẻ và thẻ để tạo các hiệu ứng được kích hoạt khi một liên kết hoặc một nút được nhấp tương ứng.
Hướng dẫn này đã thảo luận những điều cơ bản về lớp giả CSS và cách sử dụng:lớp giả hoạt động. Giờ đây, bạn đã được trang bị kiến thức cần thiết để bắt đầu sử dụng:lớp giả tích cực như một chuyên gia.
