Giáo án tích hợp AI Tin học 12 KHMT Bài 14: Định dạng văn bản bằng CSS

BÀI 14: ĐỊNH DẠNG VĂN BẢN BẰNG CSS

I. NỘI DUNG CHI TIẾT BÀI HỌC

1. Định dạng phông chữ và màu chữ

• font-family: Thiết lập phông chữ (ví dụ: font-family: Times, sans-serif;). 

• font-size: Thiết lập cỡ chữ (đơn vị: px, em, %,...). 

• font-style: Kiểu chữ (normal hoặc italics). 

• font-weight: Độ dày nét chữ (normal, bold hoặc giá trị 100-900). 

• color: Thiết lập màu chữ. 

1. Định dạng dòng văn bản

• line-height: Thiết lập chiều cao dòng.

• text-align: Căn lề (left, center, right, justify).

• text-decoration: Trang trí dòng văn bản (underline, overline, line-through).

• text-indent: Thụt lề dòng đầu tiên.

1. Tính kế thừa và thứ tự ưu tiên

• Tính kế thừa: Mẫu CSS áp dụng cho phần tử cha sẽ tự động áp dụng cho các phần tử con, cháu.

• Thứ tự ưu tiên: Nếu có nhiều mẫu trùng lặp, trình duyệt chọn mẫu được viết cuối cùng.

• Kí hiệu đặc biệt: Kí hiệu * (phần tử bất kì, ưu tiên thấp nhất) và !important (ưu tiên cao nhất).

II. KIẾN THỨC TRỌNG TÂM

1. Định dạng văn bản bao gồm ba nhóm chính: định dạng phông chữ, định dạng màu chữ và định dạng dòng văn bản. 

2. Thuộc tính font-family nên cung cấp danh sách phông chữ dự phòng để trình duyệt tự chọn nếu không tìm thấy phông ưu tiên. 

3. line-height và text-align là các thuộc tính cốt lõi để kiểm soát bố cục dòng văn bản.

4. Tính kế thừa giúp giảm thiểu lặp lại mã nguồn khi định dạng cho nhiều phần tử con trong cấu trúc cây HTML.

5. Thứ tự viết mẫu CSS trong tệp có ảnh hưởng đến kết quả hiển thị cuối cùng do nguyên tắc "mẫu viết sau cùng được áp dụng".

6. Sử dụng !important là giải pháp ép buộc trình duyệt ưu tiên mẫu định dạng đó lên mức cao nhất.

III. BỐ CỤC SLIDE PPTX

• Slide 1: Tiêu đề

  • Tiêu đề: BÀI 14: ĐỊNH DẠNG VĂN BẢN BẰNG CSS

  • Nội dung: Họ và tên, Năm học 2026 - 2027.

• Slide 2: Định dạng phông chữ

  • Tiêu đề: Thuộc tính định dạng phông

  • Nội dung: Giới thiệu font-family, font-size, font-style, font-weight.

• Slide 3: Màu sắc và Dòng văn bản

  • Tiêu đề: Màu chữ và Bố cục dòng

  • Nội dung: Cách sử dụng color, text-align, line-height, text-decoration.

• Slide 4: Tính kế thừa

  • Tiêu đề: Tính kế thừa của CSS

  • Nội dung: Giải thích cách phần tử con nhận định dạng từ phần tử cha trong mô hình cây HTML.

• Slide 5: Thứ tự ưu tiên

  • Tiêu đề: Quy tắc thứ tự ưu tiên

  • Nội dung: Giải thích nguyên tắc "mẫu viết cuối cùng", cách dùng * và !important.

• Slide 6: Tổng kết

  • Tiêu đề: Tóm tắt bài học

  • Nội dung: Vai trò của việc nắm vững các thuộc tính định dạng và nguyên tắc ưu tiên trong CSS.