Giáo án tích hợp AI Tin học 12 KHMT 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 Khoa học máy tính) 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 Khoa học máy tính 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
Pseudo-class và Pseudo-element
Pseudo-class (Lớp giả): Chỉ các trạng thái đặc biệt của phần tử HTML, viết sau dấu ":".
Ví dụ: :link, :visited, :hover.
Pseudo-element (Phần tử giả): Chỉ một phần hoặc thành phần của phần tử, viết sau dấu "::".
Ví dụ: ::first-line, ::first-letter, ::selection.
Thứ tự ưu tiên của CSS (Specificity)
Khi có nhiều mẫu định dạng cho cùng một phần tử, trình duyệt áp dụng theo mức độ ưu tiên từ cao xuống thấp.
Thứ tự ưu tiên (từ cao đến thấp): !important > CSS trực tiếp (inline) > Media type > Trọng số CSS > Nguyên tắc thứ tự cuối > Kế thừa > Mặc định.
Tính trọng số (Specificity):
ID: 100 điểm.
Class, pseudo-class, attribute selector: 10 điểm.
Element, pseudo-element: 1 điểm.
II. KIẾN THỨC TRỌNG TÂM
Pseudo-class giúp định dạng các trạng thái tương tác của người dùng như di chuyển chuột hoặc trạng thái liên kết.
Pseudo-element cho phép định dạng cụ thể một phần nội dung, ví dụ như dòng đầu hoặc chữ cái đầu của đoạn.
Trọng số của bộ chọn được tính bằng tổng điểm của các thành phần tạo nên bộ chọn đó.
Quy tắc "thứ tự cuối" (Rule order) được áp dụng khi các mẫu có cùng trọng số, mẫu nào viết sau sẽ được ưu tiên.
Kí hiệu !important là mức ưu tiên cao nhất, ép buộc trình duyệt phải áp dụng mẫu định dạng đó.
III. BỐ CỤC SLIDE PPTX
Slide 1: Tiêu đề
Tiêu đề: BÀI 17: CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN
Nội dung: Họ và tên, Năm học 2026 - 2027.
Slide 2: Lớp giả (Pseudo-class)
Tiêu đề: Khái niệm Pseudo-class
Nội dung: Các trạng thái tương tác (:link, :visited, :hover) và cú pháp.
Slide 3: Phần tử giả (Pseudo-element)
Tiêu đề: Khái niệm Pseudo-element
Nội dung: Các thành phần giả (::first-line, ::first-letter) và cú pháp.
Slide 4: Độ ưu tiên (Specificity)
Tiêu đề: Tính trọng số của CSS
Nội dung: Bảng điểm (ID=100, Class=10, Element=1) và ví dụ tính toán.
Slide 5: Quy tắc áp dụng
Tiêu đề: Thứ tự ưu tiên tổng quát
Nội dung: Tóm tắt 7 mức ưu tiên từ !important đến các thiết lập mặc định.
Slide 6: Tổng kết
Tiêu đề: Ý nghĩa và Ứng dụng
Nội dung: Cách quản lý các mẫu CSS phức tạp bằng việc hiểu rõ trọng số và thứ tự ưu tiên.