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

Nguon: Tin Hoc 12 KHMT (trang 86 – 87)

---

⚠️ Lưu ý: Hai trang ảnh em gửi được đánh số 84 và 85 ở góc dưới sách, nên thầy giải đúng theo nội dung hai trang này. Bài học thuộc Bài 15 – Tạo màu cho chữ và nền.

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

Hệ màu HSL gồm 3 tham số:

• H (Hue – màu sắc): giá trị từ 0° đến 360° trên vòng tròn màu (0° và 360° đều là đỏ).
• S (Saturation – độ bão hòa): từ 0% (xám) đến 100% (màu đầy đủ).
• L (Lightness – độ sáng): từ 0% (đen) đến 100% (trắng); đặt 50% để có màu đúng.

Cú pháp hàm: hsl(h, s%, l%)

Các cách thiết lập màu trong CSS:

• Hàm rgb(r, g, b) với r, g, b ∈ [0, 255].
• Hàm hsl(h, s%, l%).
• Dùng tên màu có sẵn (CSS2: 16 màu; CSS3: 140 màu), không phân biệt hoa thường.

Ba thuộc tính định dạng màu:

• color: màu chữ (màu nổi).
• background-color: màu nền.
• border: màu (và kiểu, độ dày) khung viền.

💡 Mẹo nhớ: color – chữ; background-color – nền; border – viền. Hai cái đầu có tính kế thừa cho phần tử con, riêng border không kế thừa.

---

⚙️ Bài tập

Câu 1 (Trang 84 – Câu hỏi 1)

Đề bài: Các màu cơ bản red, yellow, green, blue, magenta, cyan được thể hiện bằng hàm hsl như thế nào?

Cách 1 — Đọc giá trị Hue trên vòng tròn màu (Hình 15.2)

Các màu cơ bản đều có độ bão hòa 100% và độ sáng 50% (màu đầy đủ, đúng chuẩn). Ta chỉ cần lấy góc Hue tương ứng:

Cách 2 — Quy luật cách đều 60°

Sáu màu này nằm cách đều nhau 60° trên vòng tròn màu, theo thứ tự:

0° → 60° → 120° → 180° → 240° → 300°
(red → yellow → green → cyan → blue → magenta)

Chỉ cần nhớ red ở 0° rồi cộng dần 60°, giữ nguyên 100% và 50% cho hai tham số còn lại.

💡 Mẹo nhớ: "Đỏ – Vàng – Lục – Lơ – Lam – Tím", mỗi bước nhảy 60°.

---

Câu 2 (Trang 84 – Câu hỏi 2)

Đề bài: Trong hệ màu rgb có bao nhiêu màu thuộc màu xám?

Cách 1 — Dựa vào điều kiện màu xám

Theo lưu ý trong sách, màu xám (kể cả đen, trắng) có dạng rgb(x, x, x), tức ba tham số r, g, b bằng nhau.

Mỗi tham số nhận giá trị nguyên từ 0 đến 255, tức có 256 giá trị. Vì cả ba tham số phải bằng nhau nên chỉ cần chọn 1 giá trị chung x:

Số màu xám = 256

(gồm cả rgb(0,0,0) là đen và rgb(255,255,255) là trắng).

Cách 2 — Đếm trực tiếp

Các bộ thỏa mãn: (0,0,0), (1,1,1), (2,2,2), …, (255,255,255).

Số phần tử = 255 − 0 + 1 = 256 màu.

⚠️ Lưu ý thi: Câu này dễ nhầm trả lời 255. Phải nhớ đếm cả giá trị 0 nên có 256 màu xám.

---

Câu 3 (Trang 84 – Hoạt động 2, Câu 1)

Đề bài: Cách thiết lập định dạng màu chữ trong CSS như thế nào?

Trả lời:

Dùng thuộc tính color để định dạng màu chữ (màu nổi của văn bản). Cú pháp:

bộ_chọn {
    color: giá_trị_màu;
}

Giá trị màu có thể là tên màu, hàm rgb() hoặc hàm hsl(). Ví dụ:

p {
    color: blue;
}

Đoạn trên đặt màu chữ của mọi phần tử p thành màu xanh dương. Thuộc tính color có tính kế thừa, nghĩa là các phần tử con bên trong cũng nhận màu chữ này nếu không được định nghĩa lại.

---

Câu 4 (Trang 84 – Hoạt động 2, Câu 2)

Đề bài: Cách thiết lập màu nền cho các phần tử của CSS như thế nào?

Trả lời:

Dùng thuộc tính background-color để định dạng màu nền cho phần tử. Cú pháp:

bộ_chọn {
    background-color: giá_trị_màu;
}

Ví dụ:

em {
    background-color: lightgreen;
}

Đoạn trên tô nền màu xanh lá nhạt cho mọi phần tử em. Thuộc tính background-color cũng có tính kế thừa cho các phần tử con.

---

Câu 5 (Trang 85 – Câu hỏi 1)

Đề bài: Sửa lại CSS trong ví dụ trên, định dạng màu nền và khung viền cho cụm từ Tim Berners-Lee với màu khác biệt.

Hướng dẫn:

Trước hết cần bao cụm từ Tim Berners-Lee trong một phần tử có thể định dạng riêng, chẳng hạn dùng thẻ span với một lớp (class) đặt tên gợi nhớ:

Ý tưởng của CSS do kĩ sư Håkon Wium Lie, người Na Uy,
thiết lập năm 1994 trong khi làm việc với
Tim Berners-Lee tại viện hạt nhân CERN.

Sau đó thêm mẫu định dạng cho lớp tbl với màu nền và khung viền khác biệt so với phần còn lại:

.tbl {
    background-color: yellow;
    border: 2px solid blue;
}

Kết quả: cụm từ Tim Berners-Lee sẽ có nền vàng và khung viền xanh dương, nổi bật so với các phần tử em (nền xanh lá, viền đỏ) và p (chữ xanh).

💡 Mẹo nhớ: Muốn định dạng riêng một cụm từ nằm trong câu, dùng thẻ span (thẻ nội tuyến) gắn class rồi viết CSS cho class đó.

---

Câu 6 (Trang 85 – Câu hỏi 2)

Đề bài: Sửa lại CSS trên, định dạng khung viền cho phần tử p. Em hãy kiểm tra xem tính chất này có kế thừa cho các phần tử con không.

Hướng dẫn và kết luận:

Thêm thuộc tính border cho phần tử p:

p {
    color: blue;
    border: 3px solid green;
}
em {
    background-color: lightgreen;
    border: 1px solid red;
}

Quan sát kết quả hiển thị:

• Phần tử p (cả đoạn văn) có khung viền xanh lá bao quanh.
• Phần tử em nằm bên trong p không tự động có thêm khung viền xanh lá của p; em chỉ giữ khung viền đỏ của riêng nó.

Kết luận: Thuộc tính border KHÔNG có tính kế thừa. Khung viền chỉ áp dụng cho đúng phần tử được định dạng, không truyền xuống các phần tử con. Điều này phù hợp với lưu ý trong sách: "Các thuộc tính định dạng màu chữ và màu nền đều có tính kế thừa, riêng thuộc tính border không có tính kế thừa."

⚠️ Lưu ý thi: Phân biệt rõ — color và background-color kế thừa; border không kế thừa. Đây là điểm hay được hỏi.

---

Câu 7 (Trang 85 – Hoạt động 3)

Đề bài: Quan sát, trao đổi và thảo luận về 4 trường hợp bộ chọn là tổ hợp các phần tử, nêu ý nghĩa và sự khác biệt giữa các trường hợp này: E F, E > F, E + F và E ~ F.

Trả lời (theo Bảng 15.1):

Sự khác biệt then chốt:

• E F và E > F nói về quan hệ cha – con (lồng nhau): E F lấy mọi cấp con cháu, còn E > F chỉ lấy con ngay sát.
• E + F và E ~ F nói về quan hệ anh em (cùng cấp): E + F chỉ lấy phần tử liền ngay sau, còn E ~ F lấy tất cả phần tử sau đó cùng cấp.

Ví dụ minh họa:

div p   { color: red; }    /* mọi p bên trong div */
div > p { color: red; }    /* chỉ p là con trực tiếp của div */
h1 + p  { color: red; }    /* p ngay sau h1, cùng cấp */
h1 ~ p  { color: red; }    /* mọi p đứng sau h1, cùng cấp */

💡 Mẹo nhớ: Dấu cách = "ở đâu đó bên trong"; dấu > = "con ruột ngay dưới"; dấu + = "đứa em kế ngay sau"; dấu ~ = "tất cả các em sau lưng".

---

🎯 Ghi nhớ: - Sáu màu cơ bản trong HSL cách đều 60°: hsl(0/60/120/180/240/300, 100%, 50%). - Hệ RGB có 256 màu xám (r = g = b). - color (màu chữ) và background-color (màu nền) kế thừa; border (viền) không kế thừa. - Bốn bộ chọn tổ hợp: E F (con cháu), E > F (con trực tiếp), E + F (anh em liền kề), E ~ F (anh em chung cấp).