a) Tính kế thừa của CSS

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, đọc Hoạt động 2 – Tìm hiểu tính kế thừa và cách chọn thứ tự ưu tiên của CSS tr.79 SGK và trả lời các câu hỏi:

Quan sát, tìm hiểu, trao đổi và trả lời các câu hỏi sau:

1. Các mẫu định dạng có tính kế thừa trong mô hình cây HTML không? Nếu một mẫu định dạng thiết lập định dạng ở một phần tử HTML thì định dạng đó có áp dụng cho tất cả các phần tử là con, cháu của phần tử này không?

2. Nếu có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML thì trình duyệt sẽ áp dụng các mẫu định dạng CSS này theo thứ tự ưu tiên như thế nào? 

- GV đặt câu hỏi cho các nhóm thảo luận:

+ Tính kế thừa của CSS được thể hiện như thế 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 2a SGK tr.79 – 80 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.

2. TÍNH KẾ THỪA VÀ CÁCH LỰA CHỌN THEO THỨ TỰ CỦA CSS

a) Tính kế thừa của CSS

- Nếu một mẫu CSS áp dụng cho một phần tử HTML bất kì thì nó sẽ được tự động áp dụng cho tất cả các phần tử là con, cháu của phần tử đó trong mô hình cây HTML (trừ các trường hợp ngoại lệ, ví dụ các phần tử với mẫu định dạng riêng).

Ví dụ: Định dạng chữ màu xanh dương cho thẻ body:

Trong Hình 14.5, chỉ riêng thẻ h1 có chữ màu đỏ do được định dạng theo mẫu CSS, còn các phần tử h2 và p đều kế thừa từ phần tử cha body có chữ màu xanh dương.

a) Mã HTML

b) Hiển thị trong trình duyệt

Hình 14.5. Minh hoạ tính kế thừa của CSS

Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.79:

Câu 1. Các mẫu định dạng trong CSS có tính kế thừa trong mô hình cây HTML. Khi một mẫu định dạng được áp dụng cho một phần tử HTML, định dạng đó sẽ áp dụng cho tất cả các phần tử con, cháu của phần tử đó, trừ những trường hợp ngoại lệ.

Tuy nhiên, đôi khi các phần tử con, cháu có thể có các mẫu định dạng riêng mà không kế thừa từ phần tử cha. Điều này có thể được thực hiện bằng cách định rõ mẫu định dạng cho các phần tử con, cháu đó.

Câu 2. Khi có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML, trình duyệt sẽ áp dụng các mẫu định dạng này theo thứ tự ưu tiên nhất định. Thứ tự ưu tiên của các mẫu CSS được xác định như sau:

+ Mẫu CSS được viết cuối cùng trong tệp CSS sẽ có ưu tiên cao hơn các mẫu trước đó. Điều này có nghĩa là nếu có các định dạng trùng nhau cho cùng một phần tử, thì định dạng cuối cùng sẽ được áp dụng.

+ Ngoài ra, sử dụng kí hiệu !important trong một mẫu định dạng có nghĩa là định dạng đó sẽ có ưu tiên cao nhất, không phụ thuộc vào vị trí của nó trong tệp CSS. Điều này có nghĩa là mẫu định dạng với !important sẽ ghi đè lên các định dạng khác cho cùng một phần tử.

b) Thứ tự ưu tiên khi áp dụng mẫu CSS

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

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ Do được phép có nhiều mẫu định dạng CSS nên có thể xảy ra trường hợp nhiều mẫu cùng áp dụng cho một phần tử HTML, khi đó trình duyệt sẽ chọn các mẫu định dạng theo thứ tự ưu tiên nào để áp dụ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 2b SGK tr.80 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.

b) Thứ tự ưu tiên khi áp dụng mẫu CSS

- Khi có nhiều mẫu CSS cùng áp dụng cho một phần tử HTML, trình duyệt sẽ thực hiện mẫu định dạng được viết cuối cùng.

Ví dụ: Mẫu CSS sau có hai định dạng cùng được viết áp dụng cho h1, mẫu đầu quy định căn giữa, mẫu sau quy định căn trái:

Khi áp dụng, phần tử h1 được căn trái theo mẫu cuối cùng của CSS:

a) Mã HTML

b) Hiển thị trong trình duyệt

Hình 14.6. Minh hoạ thứ tự ưu tiên của các mẫu CSS

c) Sử dụng kí hiệu * và !important

…………………………………………..

…………………………………………..

…………………………………………..

c) Sử dụng kí hiệu * và !important

…………………………………………..

…………………………………………..

…………………………………………..

Nhiệm vụ 1: Thiết lập mẫu định dạng CSS

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

- GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 1 SGK tr.81 và thực hành cá nhân theo hướng dẫn.

Yêu cầu: Thiết lập mẫu định dạng CSS để trình bày nội dung văn bản trong Hình 14.8

trên trang web. 

Hình 14.8. Nội dung cần trình bày

Văn bản trong Hình 14.8 cần được trình bày theo yêu cầu sau:

• Các tiêu đề căn trái, cỡ chữ 16 px, màu đỏ, phông chữ không chân.
• Các dòng văn bản thụt lề dòng đầu 2 kí tự, căn trái.
• Toàn bộ văn bản, trừ tiêu đề, là phông chữ có chân.

+ Bước 1: Soạn thảo văn bản.

+ Bước 2: Định dạng tiêu đề.

+ Bước 3: Định dạng các dòng văn bản.

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ụ theo đúng hướng dẫn để hoàn thành yêu cầu Nhiệm vụ 1.

- Trong quá trình viết mã lệnh CSS, nếu gặp lỗi hiển thị trên trình duyệt, HS sử dụng Chatbot AI để mô tả hiện tượng lỗi. HS phân tích phản hồi từ AI để xác định nguyên nhân và tự lựa chọn phương án sửa lỗi tối ưu nhất để trang web hoạt động ổn định.

- Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS.

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. 

Bước 4: Đánh giá kết quả thực hiện:

- GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 1 của HS.

- Nhiệm vụ 1 được gọi là hoàn thành khi HS định dạng được văn bản trong Hình 14.8  theo yêu cầu.

3. THỰC HÀNH 

Nhiệm vụ 1: Thiết lập mẫu định dạng CSS

- Bước 1: HS sử dụng các thẻ <h1>, <h2> và <p> để soạn thảo văn bản như Hình 14.8.

- Bước 2: HS định dạng được tiêu đề.

- Bước 3: HS định dạng được các dòng văn bản.

* Đoạn mã HTML hoàn chỉnh:

Kết quả:

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

- 6.2.NC1a: Lựa chọn và sử dụng được các công cụ AI phù hợp để nâng cao hiệu suất học tập và giải quyết vấn đề.

- 12.D2.2: HS sử dụng công cụ AI để phân tích nguyên nhân lỗi mã lệnh CSS/HTML và lựa chọn phương án sửa lỗi phù hợp để sản phẩm thực hành hoạt động ổn định.

Nhiệm vụ 2: Thiết lập mẫu định dạng CSS

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

- GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 2 SGK tr.82 và thực hành cá nhân theo hướng dẫn.

Yêu cầu: Thiết lập định dạng cho trang web ở Nhiệm vụ 1 với các yêu cầu sau:

• Các tiêu đề căn giữa, cỡ chữ 16 px, màu xanh.
• Các dòng văn bản thụt lề dòng đầu 2 kí tự, căn đều hai bên.
• Các từ in đậm và in nghiêng trong văn bản sẽ thể hiện theo mặc định của trình duyệt.

+ Bước 1: Định dạng tiêu đề.

+ Bước 2: Định dạng các dòng văn bản.

+ Bước 3: Định dạng các từ in đậm và in nghiêng trong văn bản.

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ụ theo đúng hướng dẫn để hoàn thành yêu cầu Nhiệm vụ 2.

- Trong quá trình viết mã lệnh CSS, nếu gặp lỗi hiển thị trên trình duyệt, HS sử dụng Chatbot AI để mô tả hiện tượng lỗi. HS phân tích phản hồi từ AI để xác định nguyên nhân và tự lựa chọn phương án sửa lỗi tối ưu nhất để trang web hoạt động ổn định.

- Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS.

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. 

Bước 4: Đánh giá kết quả thực hiện:

- GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 2 của HS.

- Nhiệm vụ 2 được gọi là hoàn thành khi HS định dạng được văn bản trong Hình 14.8  theo yêu cầu.

Nhiệm vụ 2: Thiết lập mẫu định dạng CSS

- Bước 1: HS định dạng được tiêu đề.

- Bước 2: HS định dạng được các dòng văn bản.

- Bước 3: HS định dạng được các từ in đậm và in nghiêng trong văn bản.

* Đoạn mã HTML hoàn chỉnh:

Kết quả: