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

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

Xem thử

Chỉ từ 400k mua trọn bộ Kế hoạch bài dạy (KHBD) hay Giáo án Tin học 12 Kết nối tri thức bản word chuẩn kiến thức, trình bày đẹp mắt, dễ dàng chỉnh sửa:

• B1: gửi phí vào tk: 0711000255837 - NGUYEN THANH TUYEN - Ngân hàng Vietcombank (QR)
• B2: Nhắn tin tới Zalo VietJack Official - nhấn vào đây để thông báo và nhận giáo án

I. MỤC TIÊU

1. Kiến thức

- Bộ chọn lớp giả.

- Bộ chọn phần tử giả.

- Mức độ ưu tiên của các mẫu định dạng CSS.

2. Năng lự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ể.

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

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 chuẩn bị:

• SGK, bài giảng PPT, phòng máy tính có kết nối Internet, máy chiếu.

• Chuẩn bị các ví dụ minh hoạ tương ứng trong bài như mô tả SGK, có thể sử dụng mô phỏng cho HS trên lớp, không mất thời gian gõ lại.

- HS: SGK, vở ghi, chuẩn bị bài ở nhà.

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

Bài học được thực hiện trong 2 tiết: 1 tiết lí thuyết, 1 tiết thực hành.

- Tiết lí thuyết: Hoạt động 1,2,3

- Tiết thực hành: Hoạt động 4,5,6

A. MỞ ĐẦU

Hoạt động 1: Khởi động (5 phút)

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) Tổ chức thực hiện

- GV nêu tình huống: Ở các bài học trước HS đã 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 (VD 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 (VD định dạng đặc biệt cho dòng đầu của phần tử p, kí tự đầu của phần tử p). Làm thế nào để thực hiện điều này? ➔ dẫn dắt vào bài

- HS nghe giảng.

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

Hoạt động 2 (15 phút)

a) Mục tiêu

- HS hiểu về ý nghĩa của mẫu định dạng sử dụng bộ chọn lớp giả và bộ chọn phần tử giả

- HS biết cách thiết lập và sử dụng mẫu định dạng sử dụng bộ chọn lớp giả và bộ chọn phần tử giả.

b) Tổ chức thực hiện

# 1. Chuyển giao nhiệm vụ

- GV giao nhiệm vụ cho HS đọc SGK mục 1 và trả lời các câu hỏi.

- GV gợi ý HS so sánh ví dụ bảng 17.1 và Hình 17.1 để thấy ý nghĩa của việc khai báo lớp giả.

- GV giới thiệu nội dung bộ chọn lớp giả và bộ chọn phần tử giả. Với mỗi nội dung bắt đầu từ ý nghĩa, cú pháp, ví dụ, kết quả hiển thị.

- GV yêu cầu HS thảo luận nhóm đôi, tìm thêm các ví dụ minh hoạ cho từng nội dung.

Nội dung: 1. Đọc SGK, trả lời câu hỏi: - Thế nào là pseudo-class (lớp giả) của bộ chọn? cú pháp khai báo lớp giả? Ý nghĩa - Thế nào là pseudo-element (phần tử giả) của bộ chọn? cú pháp khai báo phần tử giả? Ý nghĩa 2. Bộ chọn pseudo-class 3. Bộ chọn pseudo-element 4. Câu hỏi tự luyện trang 98

# 2. Thực hiện nhiệm vụ

- HS đọc SGK và trả lời câu hỏi.

- HS nghe GV chốt lại các nội dung kiến thức quan trọng.

- Thảo luận, tìm kiếm các ví dụ tương tự.

- Trả lời các câu hỏi tự luyện trang 98.

Kết quả: 2. Bộ chọn pseudo-class - pseudo-class (lớp giả): + Chỉ các trạng thái đặc biệt của phần tử HTML. Các trạng thái này không cần định nghĩa, mặc định là lớp có sẵn của CSS. + Ví dụ: một số lớp giả (Bảng 17.1) - Cú pháp khai báo: tên phần tử: tên_lớp _giả {thuộc tính: giá trị;} - Ví dụ khai báo lớp giả của phần tử a với các thuộc tính thay đổi so với mặc định (Hình 17.1): Mã nguồn, kết quả - Ý nghĩa: Khai báo lớp giả để làm thay đổi các giá trị mặc định của đối tượng ➔ gây sự chú ý. - Ví dụ: Search với từ khóa CSS pseudo-class để xem ví dụ bổ sung: :link; :focus; :hover; … 3. Bộ chọn pseudo-element - pseudo-element(phần tử giả): + Chỉ một phần hoặc một thành phần của phần tử HTML bình thường. + Ví dụ: một số phần tử giả (Bảng 17.2) - Cú pháp khai báo: tên phần tử :: tên_phần_tử_giả {thuộc tính: giá trị;} - Ví dụ khai báo phần tử giả với các thuộc tính thay đổi so với mặc định (Hình 17.2): Mã nguồn, kết quả - Ý nghĩa: Khai báo phần tử giả để thiết lập các mẫu định dạng đặc biệt cho phần tử giả đó khác so với mặc định. - Ví dụ một số phần tử giả khác: ::Before; ::After; ::Backdrop; ::first-line; ::first-letter; ::selection 4. Câu hỏi tự luyện trang 98 C1. Cần dùng mẫu CSS dạng :active {color : <màu chữ mới> ;} C2. Cần dùng mẫu CSS dạng : hover {font-size: 150% ;}

# 3. Báo cáo, thảo luận

- GV mời một số HS trả lời câu hỏi. Các HS khác nhận xét, bổ sung. GV ghi nhận các câu trả lời của HS. Sau đó, GV chốt kiến thức. HS tự đánh giá lại câu trả lời của mình ở bước trước.

- GV mời một số HS nêu ví dụ. Khi HS nêu ví dụ, GV chỉ rõ đây là các trạng thái của đối tượng mặc định/ đã sửa chữa. Gợi ý HS một số thay đổi có thể thực hiện.

- GV khuyến khích HS tự tìm hiểu thêm kiến thức mở rộng trên Internet.

# 4. Kết luận: GV chốt các kiến thức trọng tâm trong hộp ghi nhớ trang 98.

Hoạt động 3. Tìm hiểu ý nghĩa và ứng dụng các mức độ ưu tiên trong CSS (20 phút)

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) Tổ chức thực hiện:

#1. Chuyển giao nhiệm vụ:

Chú ý: Một phần kiến thức này đã được học trong các bài 14, 15, 16, ở bài này HS hệ thống lại và bổ sung.

- GV yêu cầu HS theo dõi nội dung hoạt động 2 trang 98 và trả lời câu hỏi.

- GV nhắc lại: nội dung từ bài 14-16 đã xây dựng các mẫu định dạng với nhiều kiểu bộ chọn khác nhau, cũng đã đề cập tới mức độ ưu tiên của một số bộ chọn.

- GV đưa ra phiếu học tập, yêu cầu HS rà soát lại kiến thức đã học từ bài 14-17, liệt kê các nguyên tắc ưu tiên khi áp dụng CSS, điền vào phiếu học tập.

- GV tổng kết, giới thiệu bảng thứ tự ưu tiên.

- Với mỗi nội dung GV lấy ví dụ minh hoạ trực quan. Trong quá trình lấy ví dụ, GV luôn đặt câu hỏi để HS vận dụng kiến thức vừa học xác định thứ tự ưu tiên trong từng ví dụ, dự kiến kết quả hiển thị. GV chiếu kết quả cho HS kiểm chứng.

Nội dung: 1. Hoạt động 2 trang 98. Câu hỏi: Cụm từ “Tin học 12” sẽ có màu gì? Vì sao? 2. Thứ tự ưu tiên của CSS - Bảng thứ tự ưu tiên - Ví dụ 1,2,3,4 - Lưu ý cách tính trọng số của CSS. 3. Câu hỏi tự luyện/100

# 2. Thực hiện nhiệm vụ:

- HS phân tích tình huống trong hoạt động 2, trả lời câu hỏi.

- HS rà soát lại kiến thức cũ, điền phiếu học tập.

- HS nghe giảng, quan sát ví dụ, phân tích kết quả ví dụ.

- HS trả lời các câu hỏi tự luyện trong SGK/100

Kết quả: 1. HS có thể phân tích chỉ ra, cụm từ “Tin học 12” vừa nằm trong thẻ p, vừa được gán cho lớp test. Theo định nghĩa mẫu định dạng trong thẻ style, nội dung này có thể áp dụng 2 mẫu định dạng của lớp test (chữ xanh) và phần tử p (chữ đỏ). Theo quy tắc ưu tiên đã học $\to$ áp dụng ưu tiên cho mẫu định dạng cuối cùng trong danh sách ➔ chữ đỏ. 2. Thứ tự ưu tiên của CSS

................................

................................

................................

(Nguồn: NXB Giáo dục)

Trên đây tóm tắt một số nội dung miễn phí trong bộ Giáo án Tin học 12 Kết nối tri thức mới nhất, để mua tài liệu đầy đủ, Thầy/Cô vui lòng xem thử:

Xem thử

Xem thêm các bài soạn Giáo án Tin học lớp 12 Kết nối tri thức hay, chuẩn khác:

• Giáo án Tin 12 Bài 16: Định dạng khung

• Giáo án Tin 12 Bài 18: Thực hành tổng hợp thiết kế trang web

• Giáo án Tin 12 Bài 19: Dịch vụ sửa chữa và bảo trì máy tính

• Giáo án Tin 12 Bài 20: Nhóm nghề quản trị thuộc ngành Công nghệ thông tin

• Giáo án Tin 12 Bài 21: Hội thảo hướng nghiệp

---