Giáo án NLS Tin học 12 KHMT kết nối Bài 13: Khái niệm, vai trò của CSS
Giáo án NLS Tin học 12 (Khoa học máy tính) kết nối tri thức Bài 13: Khái niệm, vai trò của CSS. Với năng lực số được tích hợp, tiết học sẽ giúp học sinh làm quen và ứng dụng công nghệ, tin học. KHBD này là file word, tải về dễ dàng. Là mẫu giáo án mới nhất năm 2026 để giáo viên dạy tốt môn Tin học 12.
=> Giáo án tích hợp NLS Tin học 12 Khoa học máy tính Kết nối tri thức
Các tài liệu bổ trợ
Ngày soạn:…/…/…
Ngày dạy:…/…/…
BÀI 13: KHÁI NIỆM, VAI TRÒ CỦA CSS
(2 tiết)
I. MỤC TIÊU
1. Kiến thức
Sau bài học này, HS sẽ:
- Hiểu được vai trò và ý nghĩa của mẫu định dạng CSS (Cascading Style Sheets) trong việc trình bày trang web.
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ực hiện thiết lập CSS bằng 3 cách trong một số ví dụ cụ thể, từ đó thấy được ưu và nhược điểm của từng cách, lựa chọn được cách thực hiện phù hợp với nhiệm vụ.
Năng lực số:
- 1.1.NC1a: Đáp ứng được nhu cầu thông tin.
- 1.1.NC1b: Áp dụng được kỹ thuật tìm kiếm để lấy được dữ liệu, thông tin và nội dung trong môi trường số.
- 3.1.NC1a: Áp dụng được các cách tạo và chỉnh sửa nội dung ở các định dạng khác nhau.
- 3.4.NC1a: Lập trình.
- 5.1.NC1b: Hiểu nguyên lý hoạt động của các hệ thống kỹ thuật số và tối ưu hóa hệ thống.
- 5.2.NC1a: Đánh giá và lựa chọn các công cụ số, môi trường hoặc giải pháp kỹ thuật số phù hợp để giải quyết các nhu cầu.
- 5.2.NC1b: Áp dụng được các công cụ số khác nhau và các giải pháp công nghệ có thể có để giải quyết vấn đề.
- 6.1.NC1a: Phân tích được cách AI hoạt động trong các ứng dụng cụ thể.
3. Phẩm chất
- Hình thành ý thức trách nhiệm khi làm việc nhóm. Rèn tính cẩn thận, kiên trì, chăm chỉ học hỏi để hoàn thành nhiệm vụ được giao.
II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU
- GV: KHBD, 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), phòng thực hành máy tính cài sẵn phần mềm soạn thảo HTML và kết nối Internet, máy chiếu, video AI tạo bằng công cụ AI được dùng để khởi động bài học, bộ câu hỏi trắc nghiệm trên phần mềm Quizizz.
- 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
1. HOẠT ĐỘNG KHỞI ĐỘNG
…………………………………………..
…………………………………………..
…………………………………………..
2. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Tìm hiểu khái niệm và ý nghĩa của CSS
a) Mục tiêu: HS được làm quen với khái niệm CSS và ý nghĩa của mẫu định dạng CSS.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Khái niệm và ý nghĩa của CSS.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | NLS |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS hoạt động cá nhân, đọc Hoạt động 1 – Tìm hiểu khái niệm và ý nghĩa của CSS tr.71 SGK và trả lời các câu hỏi: 1. Hình 13.2 là mã nguồn của trang web trong Hình 13.1. Em có nhận xét gì về cách thiết lập định dạng của trang này?
Hình 13.2. Mã nguồn của trang web 2. Em thấy gì từ đoạn mã nguồn trên? - Từ hoạt động Khởi động, GV giới thiệu cho HS về ngôn ngữ CSS. - GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi: + CSS là gì? + Ba mẫu định dạng tương ứng với ba dòng được ghi trong cặp thẻ <style></style> ở Hình 13. 3 được dùng để làm gì?
+ Em hãy quan sát ví dụ sau và nhận xét về phạm vi áp dụng của các mẫu định dạng CSS?
Đoạn mã nguồn
Kết quả hiển thị trên trình duyệt - 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 củng cố kiến thức SGK tr.72: Câu 1. Ngôn ngữ CSS có phải là HTML không? Câu 2. Các mẫu định dạng CSS thường được mô tả như thế nào? Chọn phương án đúng. A. Trong một bảng. B. Phải viết trên một hàng. C. Có thể viết trên nhiều hàng. 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.72 và thảo luận theo nhóm thực hiện nhiệm vụ. - GV quan sát và trợ giúp HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - Đại diện các nhóm HS trả lời. - Các nhóm khác đưa ra ý kiến nhận xét. Bước 4: Đánh giá kết quả thực hiện: - GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS. - GV kết luận: Mẫu định dạng CSS là một công cụ hỗ trợ giúp định dạng nội dung trang web nhanh hơn, thuận tiện hơn bằng cách định nghĩa một lần và sử dụng nhiều lần. CSS sử dụng ngôn ngữ mô tả riêng, độc lập với HTML. | 1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS - Trong đoạn mã nguồn ở Hình 13.2, các dòng từ 6 đến 10 là một loại ngôn ngữ đặc biệt dùng để thiết lập các mẫu định dạng cho trang web. Các mẫu định dạng này được gọi là Cascading Style Sheets và viết tắt là CSS.
Hình 13.3. Mẫu định dạng CSS - Khái niệm: CSS là định dạng độc lập với chuẩn HTML, được dùng để thiết lập các mẫu định dạng dùng trong trang web. - Trong Hình 13.3, ba mẫu định dạng tương ứng với ba dòng được ghi trong thẻ <style>...</style>: + Mẫu thứ nhất + Mẫu thứ hai + Mẫu thứ ba
- Phạm vi áp dụng: Chỉ cần viết mẫu định dạng một lần và được áp dụng đồng thời cho tất cả các phần tử. | 3.4.NC1a: HS phân tích và nhận biết được CSS là một ngôn ngữ độc lập, sử dụng cú pháp riêng biệt để định nghĩa các quy tắc hiển thị, từ đó hiểu được nguyên lý tách biệt mối quan tâm (Separation of Concerns) trong phát triển phần mềm. |
Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.71: Câu 1. Cách thiết lập định dạng của trang web này cho thấy một sự cân nhắc cẩn thận về cách trình bày nội dung, với mục tiêu làm cho thông tin dễ tiếp cận và dễ đọc cho người dùng. Đồng thời, nó cũng mở ra cơ hội cho việc tùy chỉnh và mở rộng định dạng trong tương lai. Câu 2. Đoạn mã nguồn này cung cấp một ví dụ về cách thiết lập một trang web HTML cơ bản với nội dung và định dạng cụ thể. Nó thể hiện sự kết hợp giữa cấu trúc, định dạng, và nội dung, tất cả đều được thiết kế để tạo ra một trang web thông tin, dễ đọc và tương thích trên nhiều nền tảng. Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.72: Câu 1. Ngôn ngữ CSS khác biệt hoàn toàn với HTML. Câu 2. Chọn C. | ||
Hoạt động 2: Tìm hiểu cấu trúc tổng quát của CSS
a) Mục tiêu: HS biết được cấu trúc tổng quát của các mẫu định dạng CSS và ý nghĩa của các mẫu định dạng này trong văn bản HTML.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. CẤU TRÚC CSS, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Cấu trúc tổng quát của CSS.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
Hoạt động 3: Tìm hiểu ý nghĩa, vai trò của CSS
a) Mục tiêu: HS nắm được ý nghĩa, vai trò của CSS.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 3. VAI TRÒ, Ý NGHĨA CỦA CSS, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Ý nghĩa, vai trò của CSS.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | NLS |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS hoạt động theo nhóm 2 – 3 HS, đọc Hoạt động 3 – Tìm hiểu ý nghĩa, vai trò của CSS tr.74 SGK và thảo luận trả lời các câu hỏi: Tìm hiểu, thảo luận và trả lời các câu hỏi sau: 1. Nếu không dùng CSS thì các định dạng của trang web phải thực hiện theo cách nào? 2. Sử dụng CSS có những ưu điểm gì trong việc định dạng trang web? - GV chia lớp thành các nhóm 2 – 3 HS và yêu cầu: Sử dụng công cụ số tìm kiếm thông tin kết hợp đọc SGK để trả lời các câu hỏi sau: + Sử dụng CSS có ý nghĩa như thế nào trong việc định dạng trang web? + CSS có vai trò như thế nào trong việc định dạng trang web? - 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 củng cố kiến thức SGK tr.75: Câu 1. Nếu muốn tất cả các đoạn văn bản của trang web có màu xanh (blue) thì cần thiết lập định dạng CSS như thế nào? Câu 2. Giả sử có một mẫu định dạng CSS như sau:
Hãy giải thích ý nghĩa của mẫu định dạng CSS trên. Bước 2: HS thực hiện nhiệm vụ học tập: - HS sử dụng công cụ số tìm hiểu kiến thức. - HS tìm hiểu nội dung mục 3 SGK tr.74 – 75 và thảo luận theo nhóm thực hiện nhiệm vụ. - GV quan sát và trợ giúp HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS đọc kết quả tìm kiếm, đối chiếu với SGK và rút ra kết luận. - Đại diện các nhóm HS trả lời. - 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 3 SGK tr.74: Câu 1. Nếu không sử dụng CSS, các định dạng của trang web phải thực hiện thông qua các thuộc tính HTML và các thuộc tính inline. Điều này có nghĩa là các định dạng như màu chữ, phông chữ, cỡ chữ, khoảng cách và bố cục của các phần tử sẽ được xác định trực tiếp trong các thẻ HTML mỗi khi chúng xuất hiện. Câu 2. Sử dụng CSS mang lại nhiều ưu điểm trong việc định dạng trang web: + Tách biệt nội dung và định dạng. + Tính tương thích và tính năng. + Kiểm soát linh hoạt. + Hiệu suất tối ưu. Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.75: Câu 1. Thiết lập mẫu định dạng CSS như sau:
Câu 2. Mẫu định dạng CSS này sẽ thiết lập định dạng cho tất cả các phần tử h1, h2, h3 có cùng định dạng: có khung viền với nét vẽ 2 pixels, đường liền và màu đỏ. Bước 4: Đánh giá kết quả thực hiện: - GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS. - GV kết luận: CSS được thiết lập với mục đích làm cho công việc định dạng nội dung trang web trở nên khoa học hơn, nhanh hơn, thuận tiện hơn. Với CSS, các mẫu định dạng được thiết kế độc lập, có thể viết ra một lần nhưng được áp dụng nhiều lần. | 3. VAI TRÒ, Ý NGHĨA CỦA CSS - Ý nghĩa: Nếu không dùng CSS thì khi định dạng nội dung trang web ta phải thực hiện thông qua việc thiết lập các thuộc tính cho từng phần tử HTML. - Vai trò: CSS ra đời để phục vụ việc định dạng nội dung trang web một cách thống nhất, nhanh chóng và thuận tiện: + CSS tách việc nhập nội dung trang web bằng thẻ HTML và việc định dạng thành hai công việc độc lập với nhau.
+ Các mẫu định dạng của CSS có thể được viết ngay trong phần head của trang HTML, chỉ cần viết một lần và áp dụng cho tất cả các phần tử trong bộ chọn.
+ Các mẫu định dạng có thể viết trong tệp CSS ngoài và kết nối vào bất kì trang web nào.
| - 1.1.NC1b: Áp dụng được kỹ thuật tìm kiếm để lấy được dữ liệu, thông tin và nội dung trong môi trường số. - 5.2.NC1b: HS sử dụng công cụ số để tìm kiếm thông tin. - 5.1.NC1b: HS phân tích và giải thích được việc sử dụng CSS giúp giảm dung lượng tệp HTML, tiết kiệm băng thông mạng và tăng tốc độ tải trang - một yếu tố then chốt trong trải nghiệm người dùng và tối ưu hóa công cụ tìm kiếm. |
3. HOẠT ĐỘNG LUYỆN TẬP
…………………………………………..
…………………………………………..
…………………………………………..
4. 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: GV hướng dẫn HS hoàn thành bài tập phần Vận dụng SGK tr.75.
c) Sản phẩm: HS hoàn thành bài tập phần Vận dụng SGK tr.75.
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 hoạt động cá nhân, hoàn thành bài tập phần Vận dụng SGK trang 75.
Câu 1. Trong các phần mềm soạn thảo văn bản thường có chức năng tạo các mẫu định dạng Style Sheet, dùng để tạo khuôn cho các đoạn (paragraph) của văn bản. Em hãy trình bày sự giống nhau và tương thích của Style Sheet trong các phần mềm soạn thảo văn bản với CSS của trang web.
Câu 2. Thiết lập trang web với nội dung sau và định dạng trang bằng các mẫu CSS.
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
- HS quan sát bài làm của các bạn khác, nhận xét nhau.
Gợi ý trả lời:
Câu 1. Mô hình Style Sheet trong các phần mềm soạn thảo văn bản nổi tiếng hiện nay chính là mô hình định dạng mà CSS kế thừa. Các tính năng sau của CSS hoàn toàn tương thích với mô hình Style Sheet có trong các phần mềm soạn thảo văn bản hiện đại:
+ Thiết lập mẫu định dạng tại một nơi và có thể áp dụng cho nhiều vị trí của văn bản.
+ Rất thuận tiện cho việc định nghĩa và áp dụng vào văn bản.
Câu 2. Thêm vào đoạn mã ở Câu 1 đoạn mã HTML sau:
[3.4.NC1a: Viết mã lệnh HTML, CSS.
3.1.NC1a: Sử dụng các công cụ kỹ thuật số để tạo, thiết kế và phát triển các nội dung số phức tạp.]
Bước 4: Đánh giá kết quả thực hiện
- GV chuẩn kiến thức và kết thúc tiết học.
* HƯỚNG DẪN VỀ NHÀ
- Ghi nhớ kiến thức trong bài.
- Hoàn thành các bài tập trong SBT.
- Chuẩn bị bài mới Bài 14– Định dạng văn bản bằng CSS.