Hướng dẫn Tìm hiểu một vài Pseudo Class cơ bản

[PVS]

Tìm hiểu một vài Pseudo Class cơ bản

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

HTML:

<h4>Ví dụ về liên kết</h4>
<a href="http://vnxf.vn" target="blank">Cộng Đồng Xenforo Việt Nam</a>

<h4>Ví dụ đổi màu block</h4>
<div id="box">
 
</div>

<h4>Một ví dụ thú vị hơn</h4>
Sử dụng thuộc tính transition trong CSS3.
<div id="thu-vi">
 
</div>

CSS:

/*==Ví dụ về liên kết ==*/
a {
  color: red;
  text-decoration: none;
}
a:hover {
  color: blue !important; /* Ưu tiên với !important */
}
a:visited {
  color: purple;
}
a:active {
  color: green;
}

/*==Ví dụ về các phần tử khác ==*/
#box {
  width: 150px;
  height: 150px;
  background: red;
}
#box:hover {
  background: blue;
}
#box:active {
  background: green;
}

/*==Ví dụ thú vị==*/
#thu-vi {
  width: 150px;
  height: 150px;
  background: red;
  transition: margin-left 2s, background 1s;
  -moz-transition: margin-left 2s, background 1s;
  -webkit-transition: margin-left 2s, background 1s;
}
#thu-vi:hover {
  margin-left: 500px;
  background: green;
}

Kết quả:

​

Rất hay và thiết thực phải không nào?

Chúc các bạn thành công.

Nguồn: thachpham.com​