Giải Tin học 12 - Định hướng khoa học máy tính trang 82

Nguon: Tin Hoc 12 KHMT (trang 82 – 83)

---

Lưu ý: Hình ảnh em gửi tương ứng với nội dung trang 80 – 81 của sách (Bài 14 – Định dạng văn bản bằng CSS). Thầy sẽ giải đầy đủ phần lý thuyết và hai câu hỏi củng cố có trong các trang này.

🔍 Kiến thức cần nhớ

Nội dung trọng tâm về thứ tự ưu tiên khi áp dụng nhiều mẫu CSS:

1. Tính kế thừa: Mẫu định dạng viết cho một phần tử sẽ được áp dụng mặc định cho tất cả các phần tử con, cháu của nó trong cây HTML.

1. Tính "cascading" (xếp tầng): Nếu có nhiều mẫu cùng bộ chọn áp dụng cho một phần tử, trình duyệt sẽ chọn mẫu được viết cuối cùng.

1. Kí hiệu * (universal selector): Áp dụng cho mọi phần tử, nhưng có mức ưu tiên thấp nhất. Tuy nhiên, nó vẫn là định dạng áp dụng trực tiếp lên phần tử.

1. Từ khóa !important: Thuộc tính có gắn !important sẽ được ưu tiên cao nhất, không phụ thuộc vị trí của mẫu trong CSS. Viết ngay sau giá trị thuộc tính cần đánh dấu.

💡 Mẹo nhớ — Thứ tự ưu tiên (từ cao xuống thấp): !important > mẫu viết sau (cùng bộ chọn) > định dạng trực tiếp (kể cả bằng *) > định dạng kế thừa từ cha.

⚠️ Lưu ý thi: Một quy tắc rất hay bị nhầm: định dạng áp dụng trực tiếp lên phần tử (dù bằng bộ chọn * ưu tiên thấp) vẫn mạnh hơn giá trị kế thừa từ phần tử cha.

---

⚙️ Bài tập

Câu 1

Đề bài: Giả sử có mẫu định dạng sau:

Khi đó toàn bộ văn bản của trang web sẽ mặc định thể hiện với phông có chân, đúng hay sai?

Cách 1 — Phân tích ý nghĩa thuộc tính

Thuộc tính font-family xác định họ phông chữ. Có hai họ cơ bản:

• serif: phông có chân (có nét chân nhỏ ở đầu/cuối nét chữ, ví dụ Times New Roman).
• sans-serif: phông không chân ("sans" trong tiếng Pháp nghĩa là "không"), ví dụ Arial.

Trong mẫu, ta khai báo font-family: sans-serif; cho body, tức là chọn phông không chân. Theo tính kế thừa, toàn bộ phần tử con của body cũng dùng phông không chân.

➡️ Khẳng định "phông có chân" là SAI. Đúng phải là phông không chân (sans-serif).

Cách 2 — Ghi nhớ nhanh qua từ khóa

Chỉ cần nhớ: sans = không. Vậy sans-serif = không chân.
Đề nói "có chân" → mâu thuẫn → SAI.

💡 Mẹo nhớ: serif = "có chân"; thêm "sans" phía trước thì phủ định → "không chân".

---

Câu 2

Đề bài: Giả sử có mẫu định dạng như sau:

Mẫu nào sẽ được áp dụng cho h1, mẫu nào sẽ được áp dụng cho thẻ p?

Cách 1 — Xét từng thuộc tính theo thứ tự ưu tiên

Đối với phần tử h1:

Có hai thuộc tính cần xét là text-align và font-family.

• text-align: có hai mẫu cùng bộ chọn h1:
• text-align: center !important;
• text-align: left;

Mẫu đầu có !important nên được ưu tiên cao nhất, bất chấp mẫu left viết sau.
→ h1 được căn giữa (center).

• font-family:
• body có sans-serif nhưng đây chỉ là giá trị kế thừa xuống h1.
• * {font-family: serif;} áp dụng trực tiếp lên mọi phần tử, trong đó có h1.

Định dạng trực tiếp (dù từ *) thắng giá trị kế thừa.
→ h1 dùng phông serif (có chân).

➡️ Với h1: áp dụng text-align: center (từ mẫu !important) và font-family: serif (từ mẫu *).

Đối với thẻ p:

• Không có mẫu nào viết riêng cho p.
• font-family: body cho sans-serif (kế thừa), nhưng * {font-family: serif;} áp dụng trực tiếp lên p.

→ p dùng phông serif (có chân).

• Các thuộc tính khác (text-align...) không được khai báo cho p nên giữ giá trị mặc định của trình duyệt.

➡️ Với p: chỉ áp dụng mẫu * {font-family: serif;}.

Cách 2 — Lập bảng nhanh

Quy tắc rút gọn:

• Có !important → chốt luôn giá trị đó (center cho h1).
• * áp trực tiếp lên phần tử nên mạnh hơn font kế thừa từ body → cả h1 và p đều thành serif.

⚠️ Lưu ý thi: Bẫy phổ biến là nghĩ rằng body {sans-serif} thắng {serif} vì body cụ thể hơn . Sai! Với h1 và p, font của body chỉ là kế thừa, còn là áp dụng trực tiếp → thắng. (Nếu xét chính phần tử body thì lúc đó body{} mới thắng *{}.)

---

📌 Phần thực hành (giới thiệu)

Trang 81 mở đầu mục 3. Thực hành với:

• Nhiệm vụ 1: 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.
• Giới thiệu Kĩ thuật chia để trị (Divide and Conquer): từ bài toán gốc P, chia thành các bài toán nhỏ hơn (giữ nguyên yêu cầu), giải từng phần (đệ quy hoặc trực tiếp) rồi kết hợp lại để giải bài toán gốc.

Đây là phần thực hành thao tác trên máy, chưa có câu hỏi tính toán cần lời giải.

🎯 Ghi nhớ: - sans-serif = phông không chân; serif = phông có chân. - Thứ tự ưu tiên CSS: !important > mẫu viết sau > định dạng trực tiếp (kể cả ) > định dạng kế thừa. - Bộ chọn tuy ưu tiên thấp nhưng vẫn áp dụng trực tiếp, nên thắng giá trị kế thừa từ phần tử cha.