Giáo án Khoa học máy tính 12 Kết nối bài 17: Các mức ưu tiên của bộ chọn

BÀI 17: CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN

(2 tiết)

I. YÊU CẦU CẦN ĐẠT

1. Kiến thức 

Sau bài học này, HS sẽ:

• Biết cách dùng CSS cho các kiểu bộ chọn khác nhau (id, class, pseudo-class, pseudo-element).

• Biết cách sử dụng CSS thực hiện các mẫu định dạng theo thứ tự ưu tiên của mình.

2. Năng lực

Năng lực chung: 

• Năng lực học tập, tự học: HS biết tự tìm kiếm, chuẩn bị và lựa chọn tài liệu, phương tiện học tập trước giờ học, quá trình tự giác tham gia các và thực hiện các hoạt động học tập cá nhân trong giờ học ở trên lớp,…

• Năng lực giao tiếp và hợp tác: Khả năng phân công và phối hợp thực hiện nhiệm vụ học tập.

• Năng lực giải quyết vấn đề sáng tạo: HS đưa ra các phương án trả lời cho câu hỏi, bài tập xử lý tình huống, vận dụng kiến thức, kĩ năng của bài học để giải quyết vấn đề thường gặp.

Năng lực Tin học: 

• Thấy được ý nghĩa của việc sử dụng bộ chọn lớp giả và bộ chọn phần tử giả làm cho trang web sinh động hơn.

• Hiểu cấu trúc, biết cách thiết lập mẫu định dạng sử dụng bộ chọn lớp giả và bộ chọn phần tử giả.

• Xác định được thứ tự ưu tiên của các bộ chọn trong các ví dụ cụ thể.

3. Phẩm chất

• Có ý thức chủ động tìm hiểu và cập nhật các kiến thức mới.

• Cẩn thận, tỉ mỉ khi viết các câu lệnh.

• Phát huy tinh thần và trách nhiệm khi làm việc nhóm.

II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU 

• GV: SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Kết nối tri thức, bài trình chiếu (Slide), máy chiếu, phòng máy tính có kết nối Internet,  các ví dụ minh hoạ tương ứng trong bài như mô tả SGK.

• HS: SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Kết nối tri thức, vở ghi.

III. TIẾN TRÌNH DẠY HỌC

A. HOẠT ĐỘNG KHỞI ĐỘNG 

a) Mục tiêu: Tạo động cơ học tập cho HS vì kiến thức đã học chưa giải quyết được nhiệm vụ đặt ra.

b) Nội dung: HS dựa vào hiểu biết để trả lời các câu hỏi.

c) Sản phẩm: Từ yêu cầu, HS vận dụng sự hiểu biết để trả lời câu hỏi GV đưa ra.

d) Tổ chức thực hiện: 

Bước 1: GV chuyển giao nhiệm vụ: 

- GV chia lớp thành các nhóm 3 – 4 HS, cho HS xem video https://www.youtube
.com/shorts/FYIX7Kc5JRo, sau đó nêu câu hỏi cho các nhóm thảo luận: 

a) Phần tử Glowing Button có phải là phần tử tĩnh không?

b) Điều gì xảy ra khi di chuyển chuột lên phần tử Glowing Button? Em có thể tạo hiệu ứng này bằng các mẫu định dạng CSS đã học không?

c) Theo em, bộ chọn nào của CSS giúp tạo hiệu ứng như trên?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- Các nhóm HS thảo luận về đoạn video mà GV cho xem và trả lời các câu hỏi.

- GV quan sát quá trình các nhóm thảo luận, giải đáp thắc mắc nếu HS chưa rõ.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- GV mời một số nhóm báo cáo kết quả thảo luận.

Gợi ý trả lời: 

a) Phần tử Glowing Button không phải là phần tử tĩnh.

b) Khi di chuyển chuột lên phần tử Glowing Button thì xuất hiện hiệu ứng bóng đổ xung quan phần tử này. Em chưa thể tạo hiệu ứng này bằng các mẫu định dạng CSS đã học.

c) Bộ chọn :hover của CSS giúp tạo hiệu ứng như trên.

- Các nhóm khác lắng nghe và góp ý.

Bước 4: Đánh giá kết quả thực hiện: 

GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: Ở những bài học trước, các em đã biết cách thiết lập các mẫu định dạng cho các phần tử và hiểu một phần về mức độ ưu tiên khi sử dụng các mẫu. Tuy nhiên, các lệnh định dạng CSS đã học chỉ áp dụng cho phần tử tĩnh, không phụ thuộc vào tương tác với người dùng. Trên thực tế, có nhiều trang web cho phép thay đổi trạng thái của đối tượng khi có sự tác động của người dùng (Ví dụ link chưa truy cập màu xanh, đã truy cập màu tím) hoặc có định dạng khác biệt cho 1 phần, 1 bộ phận của phần tử HTML (Ví dụ: định dạng đặc biệt cho dòng đầu hay kí tự đầu tiên của phần tử p. Vậy những điều đó cần thực hiện như thế nào? Để giúp các em trả lời được câu hỏi này, chúng ta sẽ cùng nhau đến với Bài 17: Các mức ưu tiên của bộ chọn

----------------

………Còn tiếp………….