BÀI 13 - KHÁI NIỆM, VAI TRÒ CỦA CSS (KNTT

Bài 13 - Khái niệm, vai trò của CSS (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.72)	Hoạt động 2
Câu hỏi(t.74)	Hoạt động 3	Câu hỏi(t.75)	Luyện tập	Vận dụng

Khởi động (trang 71): Quan sát trang web trong hình 13.1 trả lời các câu hỏi sau:
• Mã nguồn trang web có những phần tử HTML nào?
• Định dạng các phần tử HTML này có đặ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?

Gợi ý trả lời:

- Mã nguồn trang web có những phần tử: Thẻ tiêu đề <h1>, thẻ <b>, thẻ <p>.
- Định dạng các phần tử có đặc điểm chung: Cả tiêu đề và đoạn văn có thể được định dạng bằng CSS.
- Có thể định dạng mẫu một lần và áp dụng cho nhiều phần tử.

1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS

Hoạt động 1 (trang 71):
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?

Gợi ý trả lời:

1. Em có nhận xét về cách thiết lập định dạng của trang web này như sau:
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, cũng dễ tùy chỉnh và mở rộng định dạng trong tương lai.
2. Từ đoạn mã nguồn trên, em thấy:
Đ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.

CÂU HỎI

Câu hỏi 1 (trang 72): Ngôn ngữ CSS có phải là HTML không?

Gợi ý trả lời:

Ngôn ngữ CSS (Cascading Style Sheets) không phải là HTML (HyperText Markup Language).
Câu hỏi 2 (trang 72): 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.

Gợi ý trả lời:

Đáp án C. Có thể viết trên nhiều hàng.

2. CẤU TRÚC CSS

Hoạt động 2 (trang 72): 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.

Gợi ý trả lời:

Cấu trúc tổng quát của mẫu định dạng CSS:

CÂU HỎI

Câu hỏi 1 (trang 74): 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?

Gợi ý trả lời:

Nếu muốn thiết lập CSS để áp dụng cho toàn bộ tệp HTML thì ta có thể thiết lập CSS trong hoặc CSS ngoài.
Câu hỏi 2 (trang 74): 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?

Gợi ý trả lời:

Nếu muốn thiết lập CSS để có thể áp dụng đồng thời cho nhiều trang web thì có thể sử dụng CSS ngoài (external CSS).

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

Hoạt động 3 (trang 74): 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?

Gợi ý trả lời:

1. Nếu không sử dụng CSS thì định dạng nội dung trang web ta phải thực hiện thông qua việc thiết lập các thuộc tính cho từng phần tử HTML.
2. Những ưu điểm trong việc định dạng trang web khi sử dụng CSS:
- Tách biệt nhập nội dung trang web và định dạng trang web.
- Chỉ thiết lập một lần, có thể dễ dàng áp dụng định dạng cho nhiều phần tử.
- Dễ dàng sửa chữa, đồng bộ.

CÂU HỎI

Câu hỏi 1 (trang 75): 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?

Gợi ý trả lời:

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

Câu hỏi 2 (trang 75): Giả sử có một định dạng CSS như sau:

Hãy giải thích ý nghĩa của mẫu định dạng CSS trên.

Gợi ý trả lời:

Mẫu định dạng CSS này sẽ thiết lập định dạng cho tất cả các phần tử h1, h2, h3 có cùng định dạng: có khung viền với nét vẽ 2 pixel, đường liền và màu đỏ.

LUYỆN TẬP

Luyện tập 1 (trang 75): Khẳng định “Ngôn ngữ định dạng CSS chính là ngôn ngữ HTML” là đúng hay sai?

Gợi ý trả lời:

Sai. Ngôn ngữ định dạng CSS (Cascading Style Sheets) không phải là ngôn ngữ HTML (HyperText Markup Language).
Luyện tập 2 (trang 75): Khẳng định “Có thể chỉ cần thay đổi thông tin của tệp CSS sẽ làm thay đổi định dạng của nhiều trang web thậm chí của cả một trang website” là đúng hay sai?.

Gợi ý trả lời:

Đúng. Việc chỉ cần thay đổi thông tin trong tệp CSS có thể làm thay đổi định dạng của nhiều trang web hoặc thậm chí của cả một trang web.

VẬN DỤNG

Vận dụng 1 (trang 75): 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.

Gợi ý trả lời:

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:
- Cấu trúc và cú pháp:
+ Cả Style Sheet trong các phần mềm soạn thảo văn bản và CSS đều tuân theo một cấu trúc và cú pháp nhất định.
+ Các quy tắc định dạng được viết dưới dạng cặp thuộc tính-giá trị.
- Tính tái sử dụng: Cả hai đều hỗ trợ tính tái sử dụng.
- Khuôn mẫu định dạng: Cả Style Sheet và CSS đều cho phép bạn tạo ra các khuôn mẫu định dạng để áp dụng cho các phần tử văn bản.
- Kiểm soát phong cách và định dạng: Cả Style Sheet và CSS đều cho phép bạn kiểm soát phong cách và định dạng của các phần tử văn bản hoặc HTML.
Vận dụng 2 (trang 75): Thiết lập trang web với nội dung sau và định dạng trang bằng các mẫu CSS.