Giáo án Khoa học máy tính 12 Kết nối bài 13: Khái niệm, vai trò của CSS

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, đọ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ì?

→ CSS có cách viết và chức năng như thế nào?

+ 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?

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

→ CSS có cách viết riêng (ngôn ngữ CSS), độc lập với ngôn ngữ HTML và dùng để định dạng cho các phần tử HTML tương ứng.

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

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 CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

a) Cách thiết lập CSS trong

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

- GV yêu cầu HS đọc Hoạt động 2 – Tìm hiểu cấu trúc tổng quát của CSS tr.72 SGK:

Quan sát, tìm hiểu và thảo luận về cấu trúc tổng quát của các mẫu định dạ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:

+ Một mẫu định dạng CSS có cấu trúc tổng quát như thế nào? 

- GV đưa ra một số ví dụ minh hoạ các mã định dạng CSS, từ đó khơi gợi hứng thú tìm hiểu về các cách thiết lập CSS cho HS.

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

+ CSS trong (internal CSS) được thiết lập như thế nào?

+ Cách thiết lập CSS trong có áp dụng được cho nhiều tệp HTML không?

+ Em có nhận xét gì về cách thiết lập CSS trong ví dụ ở Hoạt động 1?

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.72 – 73 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. CẤU TRÚC CSS

- Cấu trúc tổng quát của một mẫu định dạng CSS có hai phần: 

+ Bộ chọn (selector): quy định những thẻ HTML nào được chọn để áp dụng định dạng này.

- Có ba cách thiết lập CSS là: 

+ CSS trong (internal CSS).

+ CSS ngoài (external CSS).

+ CSS nội tuyến (inline CSS).

a) Cách thiết lập CSS trong

- Cách thiết lập: Các mẫu định dạng được viết bên trong thẻ <style> và đặt trong phần tử head của tệp HTML. 

- Phạm vi áp dụng: Các mẫu định dạng CSS chỉ được áp dụng cho tệp HTML hiện thời. 

Ví dụ: Cách thiết lập CSS trong ví dụ ở Hoạt động 1 là thiết lập CSS trong.

Hình 13.2. Mã nguồn của trang web

b) Cách thiết lập CSS ngoài

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:

+ CSS ngoài (external CSS) được thiết lập như thế nào?

+ Làm thế nào để kết nối tệp HTML với CSS?

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.73 – 74 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) Cách thiết lập CSS ngoài

- Cách thiết lập: Các mẫu định dạng CSS được viết trong một tệp CSS, bên ngoài tệp HTML. 

Ví dụ:

* Một tệp CSS có thể được thiết lập để đồng thời áp dụng cho nhiều trang web, giúp cho việc định dạng nhiều trang web thống nhất và khi cần chỉnh sửa định dạng thì chỉ cần sửa một lần trong tệp định dạng CSS.

c) Cách thiết lập CSS nội tuyến

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:

+ CSS nội tuyến (inline CSS) được thiết lập như thế nào?

+ Cách thiết lập CSS nội tuyến có đặc điểm gì?

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

Câu 1. Nếu muốn thiết lập CSS để áp dụng cho toàn bộ tệp HTML thì làm cách nào?

Câu 2. Nếu muốn thiết lập CSS để có thể áp dụng đồng thời cho nhiều trang web thì làm cách nào?

c) Cách thiết lập CSS nội tuyến 

- Cách thiết lập: Có thể định dạng CSS trực tiếp bên trong thẻ của các phần tử HTML bằng cách chỉ ra các thuộc tính và giá trị cho thuộc tính style. 

- Đặc điểm: Cách làm này mất thời gian nhưng thời gian thực hiện sẽ nhanh.