Lớp giả

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 7 trên 43.

Các lớp giả tương tác cho phép bạn thay đổi giao diện của phần tử khi người dùng thực hiện những thao tác như di chuột qua, nhấp vào hoặc chọn phần tử. Chúng giúp trang web của bạn phản hồi nhanh hơn và thú vị hơn khi sử dụng.

Cú pháp của lớp giả:

selector:pseudo-class {
  property: value;
}

Tự làm thử

Bài học này không có thử thách code.

Tự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Thành thạo CSS

1Làm chủ bộ chọn: Kết hợp

Giới thiệu Bộ chọn hậu duệ Bộ chọn con Bộ chọn anh em liền kề Bộ chọn anh em tổng quát Thử thách ôn tập

4Dự án menu thả xuống

Thêm menu con Hiển thị menu con Thêm kiểu dáng Đầu vào và nút

7Xây dựng giao diện với CSS Grid

Cơ bản về Grid Định vị phần tử theo hàng của Grid Các vùng được đặt tên Thử thách ôn tập

2Lớp giả tương tác

Lớp giảHiệu ứng rê chuột Hiệu ứng tiêu điểm Kiểu khi nhấn Thử thách ôn tập

5Hiệu ứng trực quan

Dải màu Bộ lọc CSS Biến đổi Chuyển tiếp và hiệu ứng hover Thử thách ôn tập

8Trang web Flavor Fiesta

Thiết lập lưới Phần đầu trang Phần nội dung chính Chân trang

3Các lớp giả cấu trúc

Các lớp giả cấu trúc Chọn phần tử con đầu tiên Chọn phần tử con cuối cùng Sức mạnh của mẫu: dùng nth-child Thử thách ôn tập

6Trang đích

Tạo kiểu cho phần đầu trang Tạo kiểu cho nút Bố cục phần Bố cục thẻ Thêm các chi tiết hoàn thiện

9Thử thách cuối cùng

Làm nổi bật menu đang hoạt động Tô màu xen kẽ các hàng trong bảng Hiệu ứng khi di chuột lên nút Bố cục thẻ dạng lưới Ảnh chính làm mờ

Tự luyện tập: Playground Web