Trong chuỗi bài giảng chia sẻ kiến thức về CSS cơ bản của CSS, chúng ta đã cùng tìm hiểu những thuộc tính quan trọng của CSS trong việc xây dựng lên giao diện của một Website. Vẫn tiếp tục đề tài đó, ở bài viết này CNET sẽ cùng đồng hành với các bạn tìm hiểu về một khái niệm quan trọng tiếp theo, đó là Pseudo Class - lớp giả trong CSS, cùng khám phá sâu hơn về Pseudo Class, một công cụ mạnh mẽ cho phép tạo ra các hiệu ứng tương tác và phong cách động trên trang web của mình. Thông qua việc sử dụng Pseudo Class, có thể tăng cường tương tác người dùng và cải thiện trải nghiệm trực tuyến một cách đáng kể. Bây giờ hãy để CNET dẫn bạn tìm hiểu chi tiết hơn về cách áp dụng và sử dụng Pseudo Class để tạo ra các hiệu ứng tuyệt vời cho trang web.
- Khái niệm về lớp giả trong CSS
- Cú pháp của Pseudo Class
- Một số Pseudo Class thông dụng
1.Khái niệm về lớp giả trong CSS
Pseudo Class trong CSS là một cơ chế cho phép chọn lọc các phần tử trong một trạng thái cụ thể hoặc một ngữ cảnh cụ thể. Điều này cho phép bạn áp dụng các kiểu CSS hoặc hiệu ứng đặc biệt khi người dùng tương tác với phần tử trên trang web. Một lớp giả được sử dụng để xác định trạng thái đặc biệt của một phần tử.
Ví dụ: Pseudo Class có thể được sử dụng để:
- Tạo kiểu cho một phần tử khi người dùng di chuột qua nó
- Tạo kiểu khác nhau cho các liên kết đã truy cập và chưa truy cập
- Tạo kiểu cho một phần tử khi nó được lấy nét
Ưu điểm của Pseudo Class - Tăng tương tác người dùng: Pseudo class cho phép bạn tạo ra các hiệu ứng tương tác động, như thay đổi màu sắc hoặc hiển thị thông tin bổ sung khi người dùng tương tác với phần tử.
- Tạo phong cách động: Bạn có thể sử dụng pseudo class để tạo ra các phong cách động, giúp trang web của bạn trở nên linh hoạt và thú vị hơn.
- Cải thiện trải nghiệm người dùng: Bằng cách sử dụng pseudo class, bạn có thể cải thiện trải nghiệm người dùng bằng cách thêm các hiệu ứng hấp dẫn và dễ hiểu.
2.Cú pháp của Pseudo Class
Cú pháp của Pseudo Class trong CSS được thể hiện bằng việc sử dụng dấu hai chấm (:) sau tên của phần tử hoặc selector cụ thể. Cú pháp được thể hiện như sau:
selector:pseudo-class {
property: value;
}
Trong đó:
selector là phần tử hoặc selector mà bạn muốn áp dụng Pseudo Class.
pseudo-class là tên của Pseudo Class mà bạn muốn sử dụng.
property: Tên thuộc tính CSS
value: Giá trị của thuộc tính CSS mà bạn sử dụng
Ví dụ, để áp dụng một pseudo class hover cho các phần tử a khi con trỏ chuột di qua, cú pháp sẽ như sau:
a:hover {
/* CSS styles */
}
Để làm rõ chi tiết và hiểu thêm về cú pháp của Pseudo Class hãy đi tới phần tiếp theo về một số Pseudo Class thông dụng và các ví dụ cơ bản để minh họa cho việc sử dụng Pseudo Class
3. Một số Pseudo Class thông dụng
- :link: Được sử dụng cho liên kết, chọn liên kết khi chưa nhấp vào.
- :hover: Áp dụng kiểu CSS khi con trỏ chuột hover (di chuột qua) trên phần tử. Thường được sử dụng để tạo hiệu ứng tương tác khi người dùng di chuột qua các phần tử như liên kết hoặc nút.
- :active: Áp dụng kiểu CSS khi phần tử đang được nhấp chuột hoặc được kích hoạt. Thường được sử dụng để thay đổi kiểu dáng của một phần tử khi người dùng click vào nó.
- :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).
Ở ví dụ trên, liên kết trong thẻ <a> được theo trình tự, khi chưa nhấp vào liên kết , liên kết chưa được truy cập a:link nội dung trong thẻ được hiển thị có giá trị màu color: red;, khi liên kết đã truy cập a:visited nội dung trong thẻ được hiển thị có giá trị màu color: green;, a:hover khi di chuột qua liên kết nội dung trong thẻ được hiển thị có giá trị màu color: hotpink;, và cuối cùng liên kết đã được chọn a:active nội dung trong thẻ được hiển thị có giá trị màu color: blue;
Ngoài ra, khi thiết kế hiệu ứng trên Website, các lập trình viên cũng thường sử dụng và vận dụng thêm linh hoạt một số Pseudo Class dưới đây:
- :focus: Áp dụng kiểu CSS khi phần tử đang được tập trung hoặc lấy được focus. Thường được sử dụng để tạo kiểu cho các phần tử như ô nhập liệu khi người dùng tập trung vào chúng.
- :first-child: Chọn phần tử đầu tiên của một phần tử cha. Thường được sử dụng để tạo kiểu cho phần tử đầu tiên trong một danh sách hoặc nhóm các phần tử.
- :last-child: Chọn phần tử cuối cùng của một phần tử cha. Thường được sử dụng để tạo kiểu cho phần tử cuối cùng trong một danh sách hoặc nhóm các phần tử.
- :nth-child(): Chọn phần tử con thứ n của một phần tử cha, dựa trên chỉ số hoặc biểu thức. Có thể sử dụng để chọn các phần tử cụ thể trong một danh sách.
- :nth-of-type(): Chọn phần tử con thứ n của một loại phần tử cụ thể trong một phần tử cha. Tương tự như :nth-child() nhưng chỉ áp dụng cho các loại phần tử cụ thể.
- :not(): Loại bỏ các phần tử không phù hợp với một selector. Điều này cho phép bạn chọn tất cả các phần tử trừ những phần tử cụ thể.
Các Pseudo Class này cung cấp khả năng tùy chỉnh linh hoạt và tạo ra các hiệu ứng động trên trang web của , giúp cải thiện trải nghiệm người dùng và tăng tính tương tác. Chúng ta đã thấy rằng Pseudo Class là một phần không thể thiếu của công cụ CSS, giúp tạo ra các hiệu ứng tương tác và phong cách động trên trang web của chúng ta. Từ việc tạo ra các hiệu ứng hover đơn giản cho đến việc tùy chỉnh phần tử đầu tiên hoặc cuối cùng của một danh sách. Hiểu và sử dụng Pseudo Class là một phần quan trọng trong việc trở thành một nhà phát triển web chuyên nghiệp và thành công, cùng CNET thực hành để vận dụng một cách thành thạo Pseudo Class trong khóa học lập trình Web Fullstack nhé.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
