Nội dung bài viết

    Xem thêm

    Giáo án điện tử Tin học 12 (Chân trời sáng tạo): Bài F8: Một số thuộc tính cơ bản của CSS

    Với Giáo án PPT Bài F8: Một số thuộc tính cơ bản của CSS Tin học 12 sách Chân trời sáng tạo sẽ giúp thầy cô dễ dàng biên soạn và giảng dạy bằng giáo án điện tử hay POWERPOINT Tin học 12.

    Chỉ từ 250k mua trọn bộ Giáo án Tin học 12 Chân trời sáng tạo bản PPT trình bày khoa học, đẹp mắt:

    Xem thử tài liệu tại đây: Link tài liệu

    Các bước mua tài liệu:

    1 178 19/01/2026
    Mua tài liệu
    Trang trước
    Chia sẻ
    Trang sau  

    Giáo án điện tử Tin học 12 Chân trời sáng tạo Bài F8: Một số thuộc tính cơ bản của CSS

    Nội dung đang được cập nhật ...

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

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

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

    Giáo án Tin học 12 (Chân trời sáng tạo): Bài F8: Một số thuộc tính cơ bản của CSS

    I. MỤC TIÊU

    1. Kiến thức

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

    - Sử dụng được một số thuộc tính cơ bản của CSS như màu sắc, phông chữ, nền, đường viền, kích cỡ,…

    2. Năng lực

    Năng lực chung:

    - Tự chủ và tự học: Tự lực (Chủ động, tích cực thực hiện công việc của bản thân).

    - Giao tiếp và hợp tác: Xác định trách nhiệm và hoạt động của bản thân (Phân tích được các công việc cần thực hiện để hoàn thành nhiệm vụ của nhóm trong các hoạt động nhóm).

    - Giải quyết vấn đề và sáng tạo:Hình thành và triển khai ý tưởng mới (Nêu được nhiều ý tưởng mới trong học tập, suy nghĩ không theo lối mòn, tạo ra yếu tố mới dựa trên những ý tưởng khác nhau).

    Năng lực Tin học:

    - NLc (Giải quyết vấn đề với sự hỗ trợ của công nghệ thông tin và truyền thông): Biết sử dụng một số thuộc tính cơ bản của CSS để định kiểu cho trang web portfolio.html.

    3. Phẩm chất

    - Chăm chỉ: Tích cực tìm tòi và sáng tạo trong việc tìm hiểu các thuộc tính cơ bản của CSS.

    - Trung thực, trách nhiệm: Trung thực khi giới thiệu bản thân, tôn trọng bản quyền khi sử dụng thông tin, hình ảnh để xây dựng trang web.

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

    1. Đối với giáo viên

    - SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Chân trời sáng tạo, bài trình chiếu(Slide), máy chiếu, phiếu học tập.

    - Máy tính có cài sẵn phần mềm Visual Studio Code và có kết nối Internet, các tệp HTML và CSS dùng trong hoạt động Thực hành.

    2. Đối với học sinh

    - SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Chân trời sáng tạo, vở ghi.

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

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

    a) Mục tiêu: Ôn lại kiến thức đã học về cách định dạng bằng thẻ <font>, từ đó HS biết rằng thẻ <font> và một số thẻ khác bị hạn chế sử dụng trong việc trang trí trang web.

    b) Nội dung: HS nghiên cứu nội dung hoạt động Khởi động SGK trang 141, suy nghĩ trả lời câu hỏi theo kiến thức của mình.

    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 Khởi động SGK trang 141.

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

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

    - GV trình chiếu hình ảnh trên slide để gợi ý cho HS trả lời câu hỏi Khởi động SGK trang 141: Đối với nội dung là văn bản trong trang web, em có thể thực hiện những định kiểu như thế nào? Hãy nêu những đặc điểm có thể định kiểu của văn bản.

    Giáo án điện tử Tin học 12 (Chân trời sáng tạo): Bài F8: Một số thuộc tính cơ bản của CSS (ảnh 1)

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

    - HS vận dụng những hiểu biết thực tế để trả lời câu hỏi.

    - GV quan sát và hỗ trợ HS khi cần thiết.

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

    - GV mời một số HS xung phong trả lời câu hỏi.

    Gợi ý trả lời:Đối với nội dung là văn bản trong trang web, có thể thực hiện những định kiểu như cỡ chữ, kiểu chữ (chữ nghiêng, chữ đậm), màu chữ, nền, đường viền,…

    - HS khác lắng nghe, nhận xét và bổ sung.

    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: Bên cạnh nội dung trang web, hình thức trình bày cũng đóng vai trò quan trọng, có ảnh hưởng đến cảm nhận của người xem. Màu sắc của chữ và phông chữ là những yếu tố góp phần tạo nên hình thức của trang web. Vậy để giúp các em tìm hiểu về một số thuộc tính cơ bản của CSS giúp định kiểu văn bản như màu sắc, phông chữ, nền, đường viền, kích cỡ,…, chúng ta sẽ cùng nhau đến với Bài F8: Một số thuộc tính cơ bản của CSS.

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

    Hoạt động 1: Những thuộc tính định kiểu cho màu sắc và phông chữ

    a) Mục tiêu:

    - Cung cấp cho HS các thuộc tính định dạng phông chữ.

    - Giới thiệu cách dùng thẻ <span></span> để hỗ trợ cho việc định kiểu một phần văn bản nào đó trong cả đoạn.

    b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Những thuộc tính định kiểu cho màu sắc và phông chữ và thực hiện nhiệm vụ.

    c) Sản phẩm: Những thuộc tính định kiểu cho màu sắc và phông chữ:

    - Phông chữ: ">.

    - Kích thước chữ: font-size.

    - In nghiêng: font-style.

    - In đậm: font-weight.

    - Màu chữ: color.

    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 hoạt động cá nhân, tìm hiểu về những thuộc tính định kiểu cho màu sắc và phông chữ bằng cách trả lời các câu hỏi:

    + Theo em, màu chữ và phông chữ có ảnh hưởng đến trải nghiệm của người dùng web không?

    + CSS hỗ trợ định kiểu cho phông chữ bằng những thuộc tính nào?

    + Trong Ví dụ 1, cụm từ “Vô địch” được định kiểu khác với phần nội dung còn lại trong cặp thẻ <li></li>. Em hãy nêu cách thực hiện.

    + CSS hỗ trợ định kiểu cho màu sắc của chữ bằng thuộc tính nào?

    + Màu sắc của chữ và các thành phần của trang web có thể được chỉ định bởi những giá trị như thế nào?

    - 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 Làm tr.142 SGK:

    1. Những thuộc tính định kiểu cho màu sắc và phông chữ

    Bên cạnh nội dung của trang web, hình thức trình bày cũng đóng vai trò quan trọng, có ảnh hưởng đến cảm nhận của người xem.

    - Màu sắc của chữ và phông chữ là những yếu tố góp phần tạo nên hình thức của trang web.

    → Chọn phông chữ phù hợp sẽ làm nổi bật nội dung cầntruyền tải, giúp người đọc nhanh chóng nhận biết nội dung chính và có được trải nghiệm tích cực.

    - Một số thuộc tính định kiểu cho phông chữ:

    + ">: tên phông chữ.

    + font-size: cỡ chữ.

    + font-style: kiểu in nghiêng.

    + font-weight:độ đậm nhạt.

    Bảng 1. Một số thuộc tính và giá trị dùng để định kiểu phông chữ

    Giáo án điện tử Tin học 12 (Chân trời sáng tạo): Bài F8: Một số thuộc tính cơ bản của CSS (ảnh 1)

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

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

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

    Tham khảo các loạt bài Giáo án các môn lớp 12 - Chân trời sáng tạo khác:

    Bài viết cùng lớp mới nhất

    Xem thêm
    1 178 19/01/2026
    Mua tài liệu
    Trang trước
    Chia sẻ
    Trang sau  

    Xem thêm các chương trình khác: