Soạn giáo án điện tử Tin 12 ứng dụng KNTT bài 13: Khái niệm, vai trò của CSS

Nội dung giáo án

BÀI 13

KHỞI ĐỘNG

Quan sát trang web trong Hình 13.1 và trả lời các câu hỏi sau:

- Mã nguồn chan web có những phần tử HTML nào?

- Định dạng các phần tử HTML này có những đặc điểm chung nào?

- Có thể định dạng mẫu một lần để áp dụng mẫu đó cho nhiều phần tử HTML được không?

1. Khái niệm mẫu định dạng css

Hoạt động 1: Tìm hiểu khái niệm và ý nghĩa của CSS

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. 

2. Em thấy gì từ đoạn mã nguồn trên?

Ngôn ngữ CSS có phải là HTML không?

Các mẫu định dạng CSS thường được mô tả như thế nào?

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.

2. CẤU TRÚC CSS

Hoạt động 2: Tìm hiểu cấu trúc tổng quát của CSS

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

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?

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?

3. VAI TRÒ, Ý NGHĨA CỦA CSS

Hoạt động 3: Tìm hiểu ý nghĩa, vai trò của CSS

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.

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?

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.

LUYỆN TẬP

Khẳng định "Ngôn ngữ định dạng CSS chính là ngôn ngữ HTML" là đúng hay sai?

Khẳng định "Có thể chỉ cần thay đổi thông tin của một tệp CSS sẽ làm thay đổi định dạng của nhiều trang web, thậm chí cả một website" là đúng hay sai?

VẬN DỤNG

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.

Thiết lập trang web với nội dung sau và định dạng trang bằng các mẫu CSS.