Trong bài này chúng ta sẽ tìm hiểu về Pseudo Class (hiệu ứng rê chuột trong CSS) và cách sử dụng nó qua một số ví dụ cụ thể. Cái này tính ứng dụng rất cao, bạn gặp nó mỗi ngày luôn đấy nhưng có thể bạn chưa biết tên gọi của nó luôn ấy :v
Pseudo Class là gì ?
Trong CSS, Pseudo Class có thể hiểu là lớp trạng thái của phần tử. Phần tử (vùng chọn) thì các bạn biết rồi. Còn trạng thái ở đây là gì ? Ví dụ bạn rê chuột vào một cái link trên bài viết thì link đó đổi sang màu xanh, nhấn vào nó hiện màu đỏ,.. Và sự thay đổi màu sắc của cái link kể từ lúc ta rê chuột, click vào làm nó thay đổi màu sắc được gọi là các trạng thái.
Một số Pseudo Class thường gặp
Trong bài viết này chúng ta sẽ đi tìm hiểu và thực hiện ví dụ với một số pseudo class thường gặp như sau:
:hover
trạng thái khi rê chuột vào một phần tử.:visited
liên kết khi đã được truy cập.:link
liên kết khi chưa nhấp vào.:active
phần tử khi được click vào.
Sử dụng pseudo class
Trong ví dụ đầu tiên mình sẽ thực hiện với một cái liên kết với 03 trạng thái là: link “chưa động vào” (:link)
, khi rê chuột vào (:hover
) và sau khi click (:visited)
.
<html lang="vi"> <head> <meta charset="utf-8" /> <title>Tiêu đề webiste</title> <style type="text/css"> a { color: blue; text-decoration: none; } a:hover { color: red !important; } a:visited { color: green; } </style> </head> <body> <h2> Ví dụ về liên kết sử dụng pseudo class </h2> <a href="https://tinhnguyenblog.blogspot.com/" target="blank">Tịnh Nguyễn Blog</a> </div> </body> </htm
Khi xem demo các bạn sẽ thấy rằng khi chưa đụng vào link thì nó có màu xanh dương, rê chuột vào thì nó có màu đỏ, sau click thì xem lại nó có màu xanh lá cây. Và đây là ví dụ dành cho text link.
Còn đối với vùng chọn là một cái box (khung) thì chúng ta sẽ làm như sau, copy vào codepen để xem nhé !
<html lang="vi"> <head> <meta charset="utf-8" /> <style type="text/css"> .menu { color: white; text-decoration: none; background: black; padding: 5px; width: 80px; text-align: center; } .menu:hover { background: yellow; color: red; } .menu:active { background: green; } </style> </head> <body> <div class="menu"> <p> Menu </p> </div> </body> </html>
Các bạn sẽ thấy rằng trong ví dụ này chúng ta không có trạng thái cho link đã truy cập, vì nó là cái khung mà, không cần sử dụng trạng thái đó. Mà ở đây mình thêm vào trạng thái khi nhấn vào khung:active
nó sẽ đổi màu thành xanh. Oke, ví dụ thì các bạn cứ tiếp tục xem và thực hành trên codepen nhé !
Bài này nội dung bao nhiêu đây, trong các bài tiếp theo chúng ta sẽ đi tìm hiểu thêm một số thuộc tính CSS nữa để tạo ra một phần nào đó trên website. Có thể là thanh menu hoặc widget.
Bài học trước đó và tiếp theo
- Bài 15: Chia cột trong CSS với float và overflow
- Bài 17: Chưa có