Các Pseudo Class trong CSS3 giúp bạn chọn các trạng thái đặc biệt của một phần tử để viết CSS cho nó. Ví dụ viết CSS cho liên kết khi rê chuột vào.
Đây có thể nói là bài hướng dẫn chi tiết từng tính năng trong CSS cuối cùng của serie Học CSS đơn giản này và các bài sau chúng ta sẽ làm qua một số ví dụ thực tế. Trước khi bắt đầu với một số ví dụ đó, mình muốn nói qua một xíu về Pseudo Class – một tính năng trong CSS3 mà mình sẽ nói kỹ hơn ở serie CSS nâng cao sau này. Bởi vì trong các tutorial sau, chúng ta sẽ cần sử dụng một vài Pseudo class thông dụng.
https://www.youtube.com/watch?v=VrNthQ2Qzd8
Pseudo Class trong CSS là gì?
Pseudo Class trong CSS được sử dụng để viết CSS cho một trạng thái nào đó của một phần tử. Ví dụ viết CSS đổi màu các liên kết khi rê chuột vào, đổi thuộc tính một phần tử khi nhấp vào,….Các pseudo class được khai báo tại vùng chọn, đặt đằng sau vùng chọn và có dấu hai chấm (:) ngăn cách. Ví dụ: #link:hover (vùng chọn của #link khi rê chuột vào).
Trong bài viết này, vì nó thuộc CSS căn bản nên mình chỉ nói qua một số pseudo class đơn giản nhất mà cũng thường gặp nhất khi viết CSS cho website
Một số Pseudo Class thông dụng
:hover– Chọn trạng thái khi rê chuột vào một phần tử.:visited– Được sử dụng cho liên kết, chọn liên kết khi đã được truy cập (dựa vào History trên trình duyệt).:link– Được sử dụng cho liên kết, chọn liên kết khi chưa nhấp vào.:active– Chọn phần tử khi họ chọn/nhấp vào.
Một số ví dụ về pseudo class đơn giản
Dưới đây là một số ví dụ cách sử dụng pseudo class trong CSS3, trong đó mình có ngứa tay làm thêm phần chuyển động với transition, nếu bạn chưa hiểu thì ở gần cuối serie mình có giải thích.
Rất hay và thiết thực phải không nào? Chúc các bạn học CSS vui vẻ!
Website FAQ » Hỏi đáp thiết kế web » Hỏi đáp lập trình web » Học CSS » Hỏi đáp lập trình CSS
Hoi dap thiet ke web / Hoi dap lap trinh web / Hoi dap lap trinh PHP / Hoi dap lap trinh HTML / Hoi dap lap trinh CSS / Hoi dap lap trinh Javascript / Hoi dap lap trinh MySQL / Hoi dap SEO / Tai lieu thiet ke web / Tai lieu lap trinh web / Huong dan hoc CSS
