Hỗ trợ tư vấn
Tư vấn - Giải đáp - Hỗ trợ đặt tài liệu
Tài liệu cao cấp không áp dụng tải nhanh miễn phí cho thành viên gói Pro.
Tìm hiểu thêm »Giáo án Tin học 12 Định hướng Tin học ứng dụng Kết nối tri thức Học kì 2 là tài liệu vô cùng hữu ích được biên soạn bám sát chương trình trong SGK từ bài 1 đến hết bài 16.
Kế hoạch bài dạy Tin học 12 Định hướng ICT Kết nối tri thức HK2 được biên soạn kỹ lưỡng, cung cấp cấu trúc, nội dung và phương pháp dạy học đã được thiết kế sẵn, giúp giáo viên có định hướng rõ ràng khi chuẩn bị bài, tránh tình trạng bỏ sót kiến thức trọng tâm hoặc triển khai thiếu logic. Giáo án Tin học 12 Kết nối tri thức kì 2 trình bày dưới dạng File Word rất đẹp rất dễ dàng điều chỉnh, bổ sung, giúp giáo viên soạn bài khoa học, tiết kiệm thời gian và nâng cao chất lượng dạy học. Bên cạnh đó, thầy cô có thể tham khảo thêm giáo án Ngữ văn, Địa lí, Lịch sử, Công nghệ 12 Kết nối tri thức.
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ể.
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 Tin học ứng dụng – 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 Tin học ứng dụng – 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.
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 CỦA GV VÀ HS |
SẢN PHẨM DỰ KIẾN |
|
|
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS, thực hiện Hoạt động 1 – Tìm hiểu một số kiểu lớp và bộ chọn pseudo-class, pseudo-element SGK tr.96: Thảo luận và trả lời các câu hỏi sau: 1. Thế nào là pseudo-class của bộ chọn? Cách áp dụng. 2. Thế nào là pseudo-element của bộ chọn? Nêu ý nghĩa của khái niệm này trong định dạng CSS. - Từ Hoạt động 1, GV giới thiệu cho HS về bộ chọn pseudo-class và bộ chọn pseudo-element. - GV đặt câu hỏi định hướng cho các nhóm thảo luận: + Em hãy tìm hiểu về bộ chọn pseudo-class và bộ chọn pseudo-element theo các nội dung sau: · Khái niệm. · Cú pháp khai báo. · Một số lớp giả, phần tử giả thường dùng và ý nghĩa của chúng. - GV phân tích các ví dụ minh hoạ để HS hiểu rõ cách thiết lập bộ chọn pseudo-class và pseudo-element. - GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.98 SGK: Câu 1. Muốn áp dụng đổi màu chữ một vùng trên màn hình khi nháy chuột tại vùng đó thì cần phải dùng định dạng CSS nào? Câu 2. Muốn tăng kích thước một đoạn văn bản khi di chuyển chuột qua đoạn văn bản đó thì cần dùng định dạng CSS nào? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 1 SGK tr.96 – 98 sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra. - GV quan sát và trợ giúp HS (nếu cần thiết). Bước 3: Báo cáo kết quả hoạt động, thảo luận: - GV mời đại diện các nhóm báo cáo kết quả thảo luận. - Các nhóm khác đưa ra ý kiến nhận xét. Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.96: 1. + Pseudo-class của bộ chọn là khái niệm 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 và mặc định được coi như các lớp có sẵn của CSS. + Cách áp dụng:
2. + Pseudo-element của bộ chọn là khái niệm chỉ một phần (hoặc một thành phần) của các phần tử bình thường. Các phần này có thể coi là một phần tử giả và có thể thiết lập mẫu định dạng CSS. + Ý nghĩa của khái niệm này trong định dạng CSS: Nó cho phép thiết lập định dạng cho các phần tử giả mà không cần thay đổi cấu trúc HTML. Hướng dẫn trả lời câu hỏi Hoạt động củng cố kiến thức tr.98 SGK: Câu 1. Cần dùng định dạng CSS: active {color: màu chữ mới;}. Câu 2. Cần dùng định dạng CSS: hover {font-size: 150%;}. Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: - Từ kết quả thảo luận của nhóm, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ. - GV chính xác hoá lại các nội dung kiến thức. - GV chốt kiến thức theo Hộp kiến thức:
|
1. KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENT a) Bộ chọn pseudo-class - Pseudo-class (lớp giả) là khái niệm 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 và mặc định được coi như các lớp có sẵn của CSS. - Trong CSS, các lớp giả quy định viết sau dấu “:” theo cú pháp:
Bảng 17.1. Một số lớp giả thường dùng
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ụ: Hình 17.1 mô tả CSS thiết lập định dạng cho các trạng thái đặc biệt của phần tử a chứa liên kết. Các trạng thái này gọi gọi là “lớp giả”: + Liên kết “Tự học nhanh CSS” sẽ được thiết lập màu đỏ mặc định. + Nếu đã được kích hoạt, liên kết sẽ tự động chuyển màu xanh lá cây. + Khi di chuyển con trỏ chuột lên liên kết thì dòng chữ liên kết đổi màu hồng.
a) Mã HTML
b) Kết quả hiển thị trên trình duyệt Hình 17.1. Ví dụ minh hoạ cho bộ chọn pseudo-class b) Bộ chọn kiểu pseudo-element - Pseudo-element (phần tử giả) là khái niệm chỉ một phần (hoặc một thành phần) của các phần tử bình thường. Các phần này có thể coi là một phần tử giả và có thể thiết lập mẫu định dạng CSS. - Quy định phần tử giả viết sau dấu “::” theo cú pháp:
Bảng 17.2. Một số phần tử giả
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ụ: Hình 17.2 mô tả CSS thiết lập định dạng cho một phần hoặc một thành phần của phần tử p (được gọi là phần tử giả): + CSS sẽ tự động tạo khuôn cho dòng đầu tiên của tất cả các phần tử p của trang web với màu đỏ, phông chữ có độ rộng đều nhau và có kích thước lớn hơn 1,2 lần so với bình thường. + Chú ý: Dòng đầu tiên này không phụ thuộc vào văn bản mà chỉ phụ thuộc vào độ rộng của cửa sổ trình duyệt.
a) Mã HTML
b) Kết quả hiển thị trên trình duyệt Hình 17.2. Ví dụ minh hoạ cho bộ chọn pseudo-element |
...............
Xem đầy đủ nội dung giáo án trong file tải về
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:
Giáo án Tin học 12 sách Kết nối tri thức với cuộc sống (Học kì 2)
Giáo án Tin học 12 sách Kết nối tri thức với cuộc sống (Học kì 2)
198.000đ