Giải Tin học 12 - Định hướng khoa học máy tính trang 74
Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 74–75
Nguon: Tin Hoc 12 KHMT (trang 74 – 75)
Lưu ý: Ảnh gửi kèm hiển thị nội dung của trang 72 và 73 (Bài 13 – Khái niệm, vai trò của CSS). Thầy giải toàn bộ câu hỏi và tóm tắt kiến thức xuất hiện trong hai trang này.
🔍 Kiến thức cần nhớ
CSS (Cascading Style Sheet) là tập hợp các mẫu định dạng dùng để định dạng cho các phần tử HTML trong trang web.
- CSS độc lập với HTML: có ngôn ngữ mô tả riêng, không phải là HTML.
- Lợi ích: định nghĩa một lần, dùng nhiều lần ⇒ định dạng nhanh, gọn, thống nhất.
Cấu trúc tổng quát của một mẫu định dạng CSS gồm 2 phần:
bộ chọn {thuộc tính: giá trị;}
- Bộ chọn (selector): quy định những thẻ HTML nào được áp dụng định dạng.
- Vùng mô tả (declaration block): đặt trong cặp { }, gồm một hay nhiều quy định dạng
thuộc tính : giá trị ;, các quy định cách nhau bởi dấu “;”.
Dạng nhiều quy định:
bộ chọn {
thuộc tính 1: giá trị 1;
thuộc tính 2: giá trị 2;
......
thuộc tính n: giá trị n;
}
Một số ví dụ:
h1 {color: red;} → chữ đỏ cho mọi thẻ h1
p {text-indent: 15px; color: blue;} → thụt lề + chữ xanh cho mọi thẻ p
h1, h2, h3 {color: red;} → chữ đỏ cho cả h1, h2, h3 (nhiều thẻ cách nhau bởi dấu phẩy)
Ba cách thiết lập CSS:
| Cách | Nơi đặt | Phạm vi áp dụng |
|---|---|---|
| CSS trong (internal) | Trong thẻ ở phần head | Chỉ tệp HTML hiện thời |
| CSS ngoài (external) | Trong một tệp .css riêng, liên kết qua thẻ | Nhiều tệp HTML dùng chung |
| CSS nội tuyến (inline) | Ngay trong thẻ HTML | Riêng phần tử đó |
Cách liên kết tệp CSS ngoài (đặt trong head):
💡 Mẹo nhớ: "Bộ chọn chỉ chỗ – Vùng mô tả tả màu." Bộ chọn nằm trước { }, vùng mô tả nằm trong { } theo công thức thuộc tính : giá trị ;.
⚙️ Bài tập
Câu 1
Đề bài: Ngôn ngữ CSS có phải là HTML không?
Cách 1 — Dựa vào định nghĩa SGK
Theo nội dung bài học: "CSS là định dạng độc lập với chuẩn HTML" và "CSS có cách viết riêng (ngôn ngữ CSS), độc lập với ngôn ngữ HTML".
⇒ Ngôn ngữ CSS KHÔNG phải là HTML.
Đây là hai ngôn ngữ khác nhau:
- HTML dùng để xây dựng nội dung và cấu trúc trang web (các thẻ, phần tử).
- CSS dùng để định dạng, trang trí cho các phần tử HTML đó (màu sắc, viền, khoảng cách…).
Cách 2 — So sánh qua cú pháp
Quan sát cú pháp khác hẳn nhau là thấy ngay:
HTML: Tiêu đề
← dùng cặp thẻ mở/đóng
CSS: h1 {color: red;} ← dùng bộ chọn + { thuộc tính: giá trị; }
HTML viết bằng các thẻ trong cặp < >, còn CSS viết theo dạng bộ chọn { }. Hai cách viết hoàn toàn khác nhau ⇒ CSS không phải HTML.
⚠️ Lưu ý thi: Dù CSS có thể được đặt bên trong tệp HTML (qua thẻ ), bản thân ngôn ngữ CSS vẫn độc lập với HTML. Đừng nhầm "đặt chung tệp" với "cùng một ngôn ngữ".
Câu 2
Đề bài: 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.
Cách 1 — Loại trừ phương án
- A. Sai – CSS không mô tả bằng bảng; nó dùng cú pháp
bộ chọn {thuộc tính: giá trị;}. - B. Sai – Không bắt buộc viết trên một hàng. Khi vùng mô tả có nhiều quy định, mỗi quy định thường được viết xuống một dòng cho dễ đọc.
- C. Đúng – Một mẫu CSS có thể trải trên nhiều hàng, ví dụ:
bộ chọn {
thuộc tính 1: giá trị 1;
thuộc tính 2: giá trị 2;
}
⇒ Đáp án: C.
Cách 2 — Đối chiếu trực tiếp ví dụ SGK
SGK trình bày mẫu CSS gồm nhiều quy định, mỗi quy định nằm trên một dòng riêng (xem ví dụ bộ chọn { thuộc tính 1…; thuộc tính 2…; }). Việc viết xuống nhiều dòng giúp mã rõ ràng, dễ bảo trì. ⇒ Chọn C.
💡 Mẹo nhớ: Trình duyệt chỉ quan tâm dấu;và cặp{ }, không quan tâm xuống dòng hay khoảng trắng. Vì vậy CSS được viết tự do trên nhiều hàng để dễ đọc.
Hoạt động 2 — Tìm hiểu cấu trúc tổng quát của CSS
Đề bài: 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.
Trả lời:
Mỗi mẫu định dạng CSS gồm hai phần:
- Bộ chọn (selector): xác định thẻ HTML nào sẽ được áp dụng định dạng.
- Có thể là một thẻ:
h1 {…} - Hoặc nhiều thẻ cùng lúc, cách nhau dấu phẩy:
h1, h2, h3 {…}
- Vùng mô tả (declaration block): đặt trong cặp
{ }, chứa một hoặc nhiều quy định dạngthuộc tính: giá trị;, các quy định cách nhau bởi dấu;.
Dạng đơn giản (một quy định):
h1 {color: red;}
Dạng đầy đủ (nhiều quy định):
p {text-indent: 15px; color: blue;}
Trong đó: p là bộ chọn; text-indent: 15px và color: blue là hai quy định trong vùng mô tả.
⚠️ Lưu ý thi: Lỗi sai phổ biến là quên dấu;giữa các quy định hoặc thiếu một dấu ngoặc{/}. Khi đó định dạng sẽ không hoạt động đúng. Hãy kiểm tra đủ cặp ngoặc và dấu chấm phẩy sau mỗi cặp thuộc tính – giá trị.
🎯 Ghi nhớ: - CSS là ngôn ngữ riêng, độc lập với HTML, dùng để định dạng trang web (định nghĩa một lần, dùng nhiều lần). - Cấu trúc: bộ chọn { thuộc tính: giá trị; } — bộ chọn chọn thẻ, vùng mô tả quy định cách hiển thị. - Mẫu CSS có thể viết trên nhiều hàng (đáp án Câu 2: C). - Có ba cách dùng CSS: trong (), ngoài (tệp .css + thẻ) và nội tuyến (inline).
Nếu em gửi đúng ảnh trang 74 – 75, thầy sẽ giải tiếp phần bài tập của hai trang đó nhé.
