Giáo án tích hợp AI Tin học 12 THUD Bài 17: Các mức ưu tiên của bộ chọn
Giáo án điện tử Tin học 12 (Định hướng TH ứng dụng) Bài 17: Các mức ưu tiên của bộ chọn. Sách kết nối tri thức mới nhất cho năm học 2026 - 2027. Có tích hợp video AI, điều chỉnh cấu trúc, kiến thức phù hợp với năm học mới để tạo ra một bản powerpoint hoàn thiện và chất lượng. Thầy/cô chỉ cần tải về và giảng dạy. Có thể chỉnh sửa dễ dàng.
=> Giáo án điện tử Tin học 12 TH ứng dụng Kết nối tri thức (Tích hợp video AI)
Các tài liệu bổ trợ
BÀI 17: CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN
I. NỘI DUNG CHI TIẾT BÀI HỌC
Kiểu bộ chọn Pseudo-class và Pseudo-element Pseudo-class (lớp giả) dùng để thiết lập trạng thái đặc biệt cho phần tử. Cú pháp: :pseudo-class {thuộc tính : giá trị ;}. Ví dụ: a:link {color: blue;} để định dạng liên kết chưa kích hoạt. Pseudo-element (phần tử giả) dùng để thiết lập định dạng cho một thành phần của phần tử. Cú pháp: ::pseudo-element {thuộc tính : giá trị ;}. Ví dụ: p::first-letter {font-size: 200%;} để định dạng chữ cái đầu tiên của đoạn.
Mức độ ưu tiên khi áp dụng CSS Nguyên tắc ưu tiên từ cao xuống thấp: !important, CSS trực tiếp (inline), CSS theo media type, Trọng số bộ chọn (specificity), Thứ tự xuất hiện, Tính kế thừa. Cách tính trọng số (specificity): Mã định danh (id) có trọng số 100, Lớp (class/pseudo-class/attribute) có trọng số 10, Phần tử (element/pseudo-element) có trọng số 1. Ví dụ: Bộ chọn p.test có trọng số 1+10 = 11, bộ chọn #p123 có trọng số 100. Nếu các mẫu có cùng trọng số, trình duyệt áp dụng mẫu được khai báo sau cùng.
II. KIẾN THỨC TRỌNG TÂM
Pseudo-class và pseudo-element giúp mở rộng khả năng định dạng các trạng thái và thành phần cụ thể của phần tử.
CSS áp dụng các mẫu định dạng theo thứ tự ưu tiên xác định để giải quyết xung đột khi có nhiều quy tắc cùng tác động.
Trọng số của bộ chọn được tính toán dựa trên loại bộ chọn thành phần (id, class, element).
Quy tắc !important có mức ưu tiên cao nhất, vượt qua mọi tính toán trọng số khác.
Nắm vững thứ tự ưu tiên giúp lập trình viên kiểm soát chính xác kết quả hiển thị trên trang web.
III. BỐ CỤC SLIDE PPTX
Slide 1: CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN Chủ đề 4, Bài 17
Slide 2: BỘ CHỌN LỚP GIẢ (PSEUDO-CLASS) Định dạng trạng thái đặc biệt của phần tử bằng cú pháp :pseudo-class
Slide 3: BỘ CHỌN PHẦN TỬ GIẢ (PSEUDO-ELEMENT) Định dạng thành phần cụ thể của phần tử bằng cú pháp ::pseudo-element
Slide 4: THỨ TỰ ƯU TIÊN CSS Tổng quan thứ tự áp dụng từ !important đến tính kế thừa
Slide 5: CÁCH TÍNH TRỌNG SỐ BỘ CHỌN Tính điểm dựa trên id (100), class (10) và element (1)
Slide 6: QUY TẮC CHỌN MẪU TỐI ƯU Ưu tiên mẫu có trọng số cao nhất hoặc khai báo sau cùng khi trọng số bằng nhau