Bài 16: Sử Dụng Pseudo Class Trong CSS

Pseudo Class trong CSS

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ó

4.5/5 - (2 votes)

Học Bạn .vn