Giáo án Bài 17. Các mức ưu tiên của bộ chọn

HS nhận ra tình huống nhiều quy tắc cùng áp dụng cho một phần tử và có nhu cầu tìm quy tắc quyết định màu chữ.

GV chiếu đoạn mã gồm ba quy tắc cho màu chữ: p { color: navy; }, .ghi { color: green; }, #ket-qua { color: maroon; } và phần tử <p id="ket-qua" class="ghi">Chiều cao 4cm.</p>. HS dự đoán màu chữ của đoạn văn và viết lí do ngắn gọn vào vở.

Mỗi HS ghi một dự đoán kèm lí do, ví dụ: “Màu maroon vì id là bộ chọn mạnh nhất”, hoặc “Màu green vì class viết sau p”. GV ghi nhận các dự đoán khác nhau trên bảng để làm vấn đề cho cả lớp giải quyết trong tiết học.

HS nêu được thứ tự đặc hiệu của id, class, tên phần tử và giải thích cách so sánh bộ ba từ trái sang phải.

HS làm việc nhóm 4 theo Phiếu học tập số 1: xếp bốn bộ chọn p, p.ghi, .ghi, #ket-qua theo thứ tự tăng dần độ đặc hiệu; ghi bộ ba (id, class, phần tử) của từng bộ chọn; giải thích vì sao có thể không cộng điểm để so sánh. Nhiệm vụ trọng tâm là so sánh p.ghi với .ghi và #ket-qua với p.ghi.

Bảng xếp hạng HS hoàn thành trong Phiếu số 1: p (0,0,1) < .ghi (0,1,0) < p.ghi (0,1,1) < #ket-qua (1,0,0). Kết luận đúng: so từ trái sang phải, một id luôn hơn mọi số class và phần tử; p.ghi hơn .ghi vì ở vị trí class bằng nhau, vị trí phần tử của p.ghi lớn hơn; không cộng dồn các số để so sánh.

HS giải thích được vì sao khai báo sau thắng khi bằng đặc hiệu và phân biệt giá trị khai báo trực tiếp với giá trị chỉ thừa kế từ cha.

GV dùng bài giảng và ví dụ trên trang NeoEdu để trình bày hai ý: (1) hai .ghi cùng đặt nền khác nhau thì quy tắc viết sau thắng; (2) đặt color: green trực tiếp cho p sẽ thắng màu chỉ thừa kế từ div cha. HS trả lời câu hỏi: “Nếu viết p { color: navy } ở đầu và p { color: green } ở cuối thì màu nào hiển thị?” và “Vì sao !important không nên dùng để che thiết kế rối?”

HS ghi kết luận: khi đặc hiệu bằng nhau và cùng nguồn, khai báo sau thắng nên p { color: green } ở cuối sẽ thắng; giá trị khai báo trực tiếp lên p thắng giá trị thừa kế từ cha; !important đổi mức ưu tiên nên làm mã khó bảo trì, chỉ nên dùng khi thật cần thiết.

HS vận dụng quy tắc đặc hiệu và thứ tự để xác định màu, kiểu chữ, nền của phần tử và đề xuất cách sửa mã mà không dùng !important.

HS làm bài theo cặp với Phiếu học tập số 2: bài 1 (chọn bộ chọn có đặc hiệu cao nhất), bài 5 (màu của phần tử có id và class), bài 7 (phân tích đoạn mã mẫu gồm p, .ghi, #ket-qua, p.ghi, hai .ghi nền), bài 8 (sửa xung đột p có hai màu mà không dùng !important).

Đáp án: Bài 1 chọn D (#ket-qua). Bài 5 chọn B (maroon, vì id thắng class). Bài 7: p có màu maroon vì #ket-qua (1,0,0) thắng .ghi (0,1,0) và p (0,0,1); chữ đậm vì p.ghi đặt font-weight bold không xung đột màu; nền yellow vì hai .ghi cùng đặc hiệu, khai báo yellow ở sau. Bài 8: xóa hoặc sửa khai báo p { color: green } ở cuối để giữ một nguồn p { color: navy }; kiểm tra lại các trang khác dùng chung tệp trước khi kết luận.

HS củng cố khái niệm đặc hiệu, thứ tự khai báo, ghép bộ chọn với đối tượng và trạng thái, đồng thời tự kiểm tra qua học liệu số.

HS làm bài theo nhóm 4 với các câu: bài 2 (hai quy tắc .ghi cùng đặt nền khác nhau, quy tắc nào thắng), bài 3 (mười một class luôn vượt một id, đúng hay sai), bài 4 (ghép p.ghi, div p, a:hover với đối tượng/trạng thái), bài 6 (color trực tiếp trên p có thể thắng giá trị thừa kế từ cha, đúng hay sai). Sau đó nhóm truy cập bài tập tương tác trên NeoEdu để đối chiếu.

Đáp án: Bài 2 chọn B (quy tắc viết sau). Bài 3 Sai, vì độ đặc hiệu so theo bộ từ trái, không cộng điểm. Bài 4: p.ghi – phần tử p thuộc lớp ghi; div p – p là hậu duệ của div; a:hover – liên kết đang được con trỏ trỏ lên theo thiết bị hỗ trợ. Bài 6 Đúng, vì giá trị khai báo trực tiếp khác giá trị thừa kế. Nhóm ghi số câu đúng trên NeoEdu.

HS vận dụng các mức ưu tiên để thiết kế mẫu thông báo có màu và nền đúng ý, rồi kiểm tra bằng trình duyệt.

Mỗi nhóm viết tệp HTML có một đoạn p với hai class là canh-bao và loi, cùng một id là thong-bao. Nhóm đặt quy tắc sao cho thông báo có màu đỏ đậm, nền vàng và chữ đậm; sau đó chạy thử trên trình duyệt, ghi dự đoán trước, kết quả thực tế và lí do nếu khác. Không dùng !important.

Tệp bai17_nhom.html lưu UTF-8 có mã đúng và bảng gồm ba cột: bộ chọn, dự đoán, kết quả quan sát. Kết quả đúng: id #thong-bao quyết định màu đỏ đậm nếu được khai báo trên id; class canh-bao hoặc loi quyết định nền theo thứ tự khai báo khi đặc hiệu bằng nhau.