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

Q: Câu 2

💡 Mẹo: Đây là cách nhanh nhất để đặt màu chữ mặc định cho cả trang — chỉ cần định dạng body một lần thay vì gán cho từng thẻ.

Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 80–81

Nguon: Tin Hoc 12 KHMT (trang 80 – 81)

Lưu ý: Hình ảnh em gửi là nội dung trang 78 và 79 (không phải 80 – 81). Thầy sẽ giải đầy đủ toàn bộ kiến thức và bài tập trong hai trang này.

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

CSS định dạng dòng văn bản

Hai khái niệm nền tảng:

Đường cơ sở (baseline): đường ngang tưởng tượng mà các chữ cái "đứng" thẳng trên đó.
Chiều cao dòng (line-height): khoảng cách giữa các đường cơ sở của các dòng liền nhau trong cùng một đoạn. CSS mặc định chiều cao dòng = 2em.

Các thuộc tính định dạng dòng:

Thuộc tính	Công dụng	Giá trị thường gặp
`line-height`	Thiết lập chiều cao dòng	số (3), đơn vị (2em), phần trăm (200%)
`text-align`	Căn lề các phần tử	`left`, `center`, `right`, `justify`
`text-decoration`	Trang trí đường kẻ cho chữ	`none`, `underline`, `overline`, `line-through`
`text-indent`	Thụt lề dòng đầu tiên	px, em, % (giá trị âm → thụt lề treo)

⚠️ Lưu ý: Trong sách có lỗi in ở ví dụ text-align: dòng p {line-align: right;} viết sai, đúng phải là p {text-align: right;}. CSS không có thuộc tính line-align.

💡 Mẹo nhớ: text-decoration không có tính kế thừa (con/cháu không tự nhận đường kẻ này), khác với màu chữ và phông chữ vốn được kế thừa.

💡 Mẹo nhớ ý nghĩa số đo line-height: - 3 → gấp 3 lần cỡ chữ hiện thời - 2em → gấp 2 lần chiều cao dòng hiện thời - 200% → bằng 200% chiều cao dòng được kế thừa từ phần tử cha

⚙️ Bài tập

Câu 1

Đề bài: Giải thích các mẫu định dạng CSS sau:

Cách 1 — Phân tích từng bộ chọn (selector)

Mỗi mẫu định dạng gồm bộ chọn (tên thẻ) và khối khai báo đặt trong cặp { }, mỗi khai báo có dạng thuộc-tính: giá-trị;.

Mẫu thứ nhất: h1 {color: red; text-align: center;}

Bộ chọn: thẻ h1 (tiêu đề mức 1) → áp dụng cho mọi phần tử h1 trong trang.
color: red; → chữ của tiêu đề có màu đỏ.
text-align: center; → nội dung tiêu đề được căn giữa theo chiều ngang.

Mẫu thứ hai: p {text-align: justify;}

Bộ chọn: thẻ p (đoạn văn) → áp dụng cho mọi đoạn văn.
text-align: justify; → văn bản được căn đều hai bên (dàn chữ sát cả lề trái lẫn lề phải, trừ dòng cuối).

Kết luận: Mọi tiêu đề h1 sẽ có chữ màu đỏ và căn giữa; mọi đoạn p sẽ được căn đều hai bên.

Cách 2 — Diễn đạt nhanh theo hiệu ứng hiển thị

Đọc gọn: "Tiêu đề lớn → đỏ + giữa; đoạn văn → căn đều." Khi nhìn trên trình duyệt, ta thấy ngay tiêu đề nổi bật đỏ nằm chính giữa, còn các đoạn văn xuôi thẳng đều ở hai mép.

Câu 2

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

Hãy kiểm tra tác dụng của CSS này trên một tệp HTML bất kì và đưa ra nhận xét.

Cách 1 — Tạo tệp HTML thử nghiệm

Tạo tệp test.html với nội dung:




  
  Kiểm tra CSS
  


  Đây là tiêu đề
  Đây là một đoạn văn bản mẫu.
  
    Mục thứ nhất
    Mục thứ hai

Mở tệp bằng trình duyệt và quan sát.

Nhận xét:

Toàn bộ chữ trong trang (tiêu đề h1, đoạn p, các mục li...) đều chuyển sang màu xanh dương.
Nguyên nhân: thuộc tính color được đặt cho thẻ body — phần tử gốc chứa toàn bộ nội dung hiển thị. Nhờ tính kế thừa của CSS, mọi phần tử con, cháu bên trong body đều nhận màu xanh, dù ta không định dạng riêng cho chúng.

Cách 2 — Suy luận bằng tính kế thừa (không cần chạy)

body là "cha chung" của mọi phần tử hiển thị. Vì color là thuộc tính có tính kế thừa, nên khi gán cho body, màu xanh "lan" xuống tất cả phần tử con. Kết quả: cả trang chữ màu xanh (trừ phần tử nào được gán màu riêng đè lên).

💡 Mẹo: Đây là cách nhanh nhất để đặt màu chữ mặc định cho cả trang — chỉ cần định dạng body một lần thay vì gán cho từng thẻ.

Hoạt động 2 — Tìm hiểu tính kế thừa và thứ tự ưu tiên của CSS

Đề bài:

Các mẫu định dạng có tính kế thừa trong mô hình cây HTML không? Nếu một mẫu định dạng thiết lập định dạng ở một phần tử HTML thì định dạng đó có áp dụng cho tất cả các phần tử là con, cháu của phần tử này không?
Nếu có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML thì trình duyệt sẽ áp dụng các mẫu định dạng này theo thứ tự ưu tiên như thế nào?

Cách 1 — Trả lời dựa trên lý thuyết kế thừa và thứ tự ưu tiên

Câu 1 — Về tính kế thừa:

Có, CSS có tính kế thừa trong mô hình cây HTML.
Khi một mẫu CSS áp dụng cho một phần tử, định dạng đó tự động áp dụng cho tất cả các phần tử con, cháu của phần tử đó trong cây HTML.
Tuy nhiên có ngoại lệ:
Một số thuộc tính không kế thừa (ví dụ text-decoration, các thuộc tính về viền, lề, kích thước khối...).
Nếu phần tử con có mẫu định dạng riêng cho cùng thuộc tính thì giá trị riêng đó sẽ đè lên giá trị kế thừa.

Ví dụ ở mẫu trong sách:

Mọi phần tử kế thừa màu xanh từ body, riêng h1 được gán màu đỏ nên hiển thị đỏ (định dạng riêng thắng định dạng kế thừa).

Câu 2 — Về thứ tự ưu tiên:

Khi nhiều mẫu CSS cùng tác động lên một phần tử, trình duyệt chọn theo thứ tự ưu tiên giảm dần:

Tính cụ thể (độ riêng) của bộ chọn: bộ chọn càng "riêng", càng cụ thể thì càng ưu tiên (định dạng đặt trực tiếp cho phần tử > định dạng theo thẻ cha mẹ kế thừa).
Định dạng nội tuyến (inline) đặt thẳng trong thuộc tính style của thẻ → ưu tiên cao.
Thứ tự khai báo: khi hai mẫu có cùng độ ưu tiên, mẫu viết sau sẽ thắng (ghi đè mẫu viết trước).

Cách 2 — Sơ đồ ghi nhớ nhanh

Thứ tự ưu tiên (từ cao xuống thấp):

Inline (style="...") → Bộ chọn cụ thể hơn → Mẫu khai báo sau → Mẫu khai báo trước → Giá trị kế thừa từ cha

Nghĩa là: định dạng đặt càng gần phần tử và càng cụ thể thì càng "có tiếng nói"; khi ngang nhau thì "ai đến sau thắng".

⚠️ Lưu ý thi: Câu hỏi rất hay gặp là cho một đoạn CSS có cả body {color: blue;} và h1 {color: red;} rồi hỏi màu của tiêu đề. Đáp án là đỏ, vì định dạng riêng cho h1 thắng màu kế thừa từ body.

🎯 Ghi nhớ: - CSS định dạng dòng văn bản gồm 4 thuộc tính chính: line-height, text-align, text-decoration, text-indent. - text-decoration là thuộc tính không kế thừa; phần lớn thuộc tính về phông và màu chữ thì có kế thừa. - Đặt color cho body → cả trang đổi màu chữ nhờ tính kế thừa. - Khi xung đột định dạng: ưu tiên inline > bộ chọn cụ thể hơn > khai báo sau > kế thừa từ cha.

Chế độ đọc sách →