Trang chủ Web DevelopmentHTML/CSS [Học CSS] Một vài Pseudo Class đơn giản

[Học CSS] Một vài Pseudo Class đơn giản

bởi Thạch Phạm
5 bình luận 5622 views
Khuyến mãi hosting

Đâ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.

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?

5 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
5 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments

[…] [HỌC CSS] MỘT VÀI PSEUDO CLASS ĐƠN GIẢN […]

Mai Lan

chào bạn. Mình đang tự học làm web từ trang của bạn. Cám ơn đã chi sẻ. Cho mình hỏi khi mình dùng pseudo trong wordpress như này nhưng link nó không chuyển sang màu như mong muốn tức là nó không hoạt động. Bạn có thể cho mình biết lý do không? Mình đưa code này vào trong một page được tạo ra trong wordpress. /* unvisited link */ #link-page:link { color: red; } /* visited link */ #link-page:visited { color: green; } /* mouse over link */ #link-page:hover { color: hotpink; } /* selected link */ #link-page:active {… Xem thêm »

Phạm Anh Sơn

bạn giải thích giùm mình chỗ visitted với trong bài này bạn nói ít quá mà vẫn chưa xong thì bạn chuyển qua giá trị khác rồi

cuong

giống bạn tra google xnxx thì nó dẫn ra đường link bạn bấm vào nó rồi ngày hôm sau bạn lại bấm tiếp xnxx thì lúc này bạn thấy đường dẫn bạn bấm chuyển sang màu hồng

5
0
Would love your thoughts, please comment.x
()
x