Giáo án NLS Tin học 12 THUD kết nối Bài 17: Các mức ưu tiên của bộ chọn

Ngày soạn:…/…/… 

Ngày dạy:…/…/…

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

(2 tiết)

I. MỤC TIÊU

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ể.

Năng lực số:

• 6.1.NC1a: Phân tích được nguyên nhân tại sao một thuộc tính CSS không hiển thị (do bị ghi đè bởi bộ chọn có độ ưu tiên cao hơn) và đưa ra giải pháp khắc phục.
• 6.2.NC1a: Sử dụng Chatbot AI để tính toán “điểm số” ưu tiên của các bộ chọn phức tạp và tạo các hiệu ứng giao diện nâng cao bằng Pseudo-elements.
• 2.4.NC1a: Sử dụng thành thạo thẻ “Styles” và “Computed” trong Developer Tools (F12) để xác định quy tắc CSS nào đang “chiến thắng” (được trình duyệt áp dụng).
• 5.2.NC1a: Viết mã CSS tối ưu, hạn chế lạm dụng !important bằng cách tận dụng cấu trúc ưu tiên hợp lý.

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, video AI tạo bằng công cụ AI được dùng để khởi động bài học.
• 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 yêu cầu xem video AI được thiết kế để phục vụ bài dạy và trả lời câu hỏi xuất hiện trong video đó.

- 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: 

- HS xem video và suy nghĩ câu trả lời.

- 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ận xét, đánh giá và kết luận.

[6.1.NC1a: HS sử dụng công cụ AI hoặc sản phẩm số do GV cung cấp để tiếp nhận thông tin, trả lời câu hỏi đơn giản.

2.1.NC1a: HS thực hiện các tương tác cơ bản với học liệu số (xem video, trả lời câu hỏi trên môi trường số).

1.1.NC1a: HS tiếp cận, khai thác được thông tin từ nguồn học liệu số dưới sự hướng dẫn của GV.]

- 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.

B. HÌNH THÀNH KIẾN THỨC MỚI

Hoạt động 1: Tìm hiểu một số kiểu lớp và bộ chọn pseudo-class, pseudo-element

a) Mục tiêu: HS làm quen và biết về các bộ chọn dạng pseudo-class và pseudo-element.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1.KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENT, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Bộ chọn pseudo-class và pseudo-element.

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

Hoạt động 2: Tìm hiểu ý nghĩa và ứng dụng của mức độ ưu tiên trong CSS

a) Mục tiêu: HS biết và nắm được chính xác cách CSS xử lí thứ tự ưu tiên các mẫu định dạng CSS trên thực tế. 

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSS, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Ý nghĩa và ứng dụng của mức độ ưu tiên trong CSS.

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

…………………………………………..

…………………………………………..

…………………………………………..
 

Hoạt động 3: Thực hành 

a) Mục tiêu: HS thực hành thiết lập định dạng bằng CSS.

b) Nội dung: GV hướng dẫn HS thực hiện hai nhiệm vụ trong SGK.

c) Sản phẩm: Tệp HTML được định dạng theo yêu cầu.

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

HOẠT ĐỘNG CỦA GV - HS	DỰ KIẾN SẢN PHẨM	NLS
Nhiệm vụ 1: Nhập tệp HTML Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ và thực hành cá nhân theo yêu cầu của Nhiệm vụ 1 SGK tr.100. Yêu cầu: Nhập tệp HTML với nội dung như sau:  - GV chuẩn bị trước tài nguyên cần cho phần thực hành Nhiệm vụ 1: + Hình ảnh:  HTML_logo.png CSS_logo.png + Link tài liệu: https://en.wikipedia.org/wiki/HTML https://www.w3schools.com/html/default.asp https://en.wikipedia.org/wiki/CSS https://www.w3schools.com/css/default.asp Bước 2: HS thực hiện nhiệm vụ học tập: - HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành Nhiệm vụ 1. - Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS lưu, mở tệp bằng trình duyệt web và báo cáo kết quả cho GV.  Bước 4: Đánh giá kết quả thực hiện: - GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 1 của HS. - Nhiệm vụ 1 được gọi là hoàn thành khi HS tạo được tệp như yêu cầu.	3. THỰC HÀNH  Nhiệm vụ 1: Nhập tệp HTML (Tệp HTML được đính kèm bên dưới)	5.2.NC1a: Sáng tạo và xuất bản nội dung số.
Nhiệm vụ 2: Thiết lập định dạng bằng CSS Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ và thực hành cá nhân theo yêu cầu của Nhiệm vụ 2 SGK tr.100. Yêu cầu: Thiết lập định dạng cho tệp HTML ở Nhiệm vụ 1 bằng CSS theo các yêu cầu sau: Tiêu đề chính của bài màu đỏ, căn giữa. Các tiêu đề nhỏ màu xanh, đậm. Phần kết nối liên kết phía trên định dạng trên một hàng ngang, căn phải, các liên kết có màu nền xanh lá cây. Khi di chuột lên thì chuyển chữ màu đỏ. Các đoạn đầu tiên bên dưới các tiêu đề có màu đỏ, các đoạn khác vẫn màu mặc định. Các hình ảnh logo ban đầu ẩn đi. Khi nháy chuột lên dòng “Xem logo của HTML.” và “Xem logo của CSS.” thì các hình ảnh tương ứng được hiện ra. Hình ảnh trang web sau khi định dạng cần được thể hiện như Hình 17.3. Hình 17.3. Trang web kết quả Hướng dẫn: + Phần liên kết đầu trang có thể thiết lập bằng các thẻ <nav> và <ul>/<li> như sau: + CSS được thiết lập như sau: Bước 2: HS thực hiện nhiệm vụ học tập: - HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành Nhiệm vụ 2. - Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS lưu, mở tệp bằng trình duyệt web và báo cáo kết quả cho GV.  Bước 4: Đánh giá kết quả thực hiện: - GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 2 của HS. - Nhiệm vụ 2 được gọi là hoàn thành khi HS định dạng được tệp như Hình 17.3.	Nhiệm vụ 2: Thiết lập định dạng bằng CSS (Tệp HTML được đính kèm bên dưới)

C. HOẠT ĐỘNG LUYỆN TẬP

a) Mục tiêu: Giúp HS củng cố lại kiến thức được học trong bài.

b) Nội dung: GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập và hoạt động Luyện tập SGK tr.101.

c) Sản phẩm học tập: 

- Phiếu bài tập.

- Hoạt động Luyện tập.

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

…………………………………………..

…………………………………………..

…………………………………………..
 

[2.1.NC1a: HS thực hiện các tương tác được xác định rõ ràng với công nghệ số (làm bài tập online) trong lớp học.

5.2.NC1a: Sáng tạo và xuất bản nội dung số (Lập trình).

1.2.NC1a: Xử lý và phân tích dữ liệu, thông tin.

6.1.NC1a: Xác định nhu cầu và giải quyết vấn đề kỹ thuật.]

D. HOẠT ĐỘNG VẬN DỤNG

a) Mục tiêu: HS vận dụng kiến thức được học giải quyết bài toán thực tế.

b) Nội dung: HS thực hiện hoạt động Vận dụng SGK tr.101.

c) Sản phẩm: HS hoàn thành bài tập phần Vận dụng SGK tr.101.

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

Bước 1: GV chuyển giao nhiệm vụ học tập

- GV yêu cầu HS làm việc cá nhân, hoàn thành bài tập phần Vận dụng SGK tr.101.

Câu 1. Tìm hiểu thêm các dạng pseudo-class khác, nêu ý nghĩa và tìm ví dụ ứng dụng

thực tế cho các kiểu bộ chọn này.

Câu 2. Tìm hiểu thêm các dạng pseudo-element khác, nêu ý nghĩa và tìm ví dụ ứng dụng

thực tế cho các kiểu bộ chọn này. 

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

- HS tiếp nhận và thực hiện nhiệm vụ.

- GV quan sát, hỗ trợ khi HS cần.

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

- GV mời một số HS trình bày câu trả lời.

- HS khác chú ý lắng nghe, đưa ra ý kiến nhận xét. 

Gợi ý đáp án: 

Câu 1. GV gợi ý và hướng dẫn HS tìm hiểu thêm về các dạng pseudo-class khác, nêu ý nghĩa và ứng dụng của chúng.

Câu 2. GV gợi ý và hướng dẫn HS tìm hiểu thêm về các dạng pseudo-element khác, nêu ý nghĩa và ứng dụng của chúng.

(Tham khảo phần THÔNG TIN BỔ SUNG)

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

- GV chính xác hoá lại các nội dung trả lời của HS.

- GV chuẩn kiến thức và kết thúc tiết học.

[6.2.NC1a: Giải quyết vấn đề với sự hỗ trợ của công cụ số.]

E. THÔNG TIN BỔ SUNG

Danh sách đầy đủ phân loại các phần tử dạng khối hay nội tuyến.

1. Danh sách một số pseudo-class:

2. Danh sách một số pseudo-element:…………………………………………..

…………………………………………..

…………………………………………..