Câu hỏi mở đầu trang 83

Đề bài: Các định dạng sau có thiết lập cùng một màu hay không? Em có nhận xét gì về cách thiết lập màu này?

• a) p {color: rgb(128,0,128);}
• b) p {color: #800080 ;}
• c) p {color: hsl(300,100%,25.1%);}

Lời giải:

Cả ba định dạng đều thiết lập cùng một màu tím (purple). Vì:

• a) dùng hệ RGB: R = 128, G = 0, B = 128 → màu tím.
• b) dùng hệ hexa (16): #800080 với 80 = 128 → tương đương rgb(128, 0, 128) → cũng là màu tím.
• c) dùng hệ HSL: Hue = 300 (magenta – tím), Saturation = 100%, Lightness = 25.1% → màu tím đậm tương ứng.

→ Nhận xét: CSS hỗ trợ nhiều cách viết khác nhau để cùng thiết lập một màu (dùng rgb(), mã hexa #rrggbb, hoặc hsl()).

1. Hệ thống màu của CSS

Hoạt động 1 trang 83

Đề bài: Cùng thảo luận và tìm hiểu hệ màu RGB hỗ trợ bởi HTML và CSS.

Lời giải:

Hệ màu RGB dùng ba thành phần cơ bản: R (red), G (green), B (blue).

• Mỗi giá trị R, G, B là số nguyên từ 0 đến 255 (tương ứng 8 bit).
• Tổng số màu có thể tạo ra: $2^8 \times 2^8 \times 2^8 = 2^{24} = 16,777,216$ màu.

Ba cách viết giá trị màu trong CSS:

• rgb(x-red, x-green, x-blue) với các tham số từ 0 đến 255.
• rgb(x-red%, x-green%, x-blue%) với các tham số theo phần trăm của 255.
• #rrggbb – dùng mã hệ đếm hexa (cơ số 16), mỗi cặp chữ số biểu diễn một thành phần.

Ví dụ: trắng = rgb(255,255,255) = #ffffff; đen = rgb(0,0,0) = #000000.

Câu hỏi củng cố trang 84

Đề bài:

1. 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?

Lời giải:

Với S = 100% (bão hoà đầy đủ) và L = 50% (độ sáng chuẩn), giá trị Hue của các màu cơ bản:

2. Trong hệ màu rgb có bao nhiêu màu thuộc màu xám?

Lời giải:

• Màu xám (kể cả đen và trắng) có ba tham số R, G, B bằng nhau: rgb(x, x, x).
• Vì x có thể nhận giá trị từ 0 đến 255, nên có 256 màu xám trong hệ RGB (bao gồm đen rgb(0,0,0) và trắng rgb(255,255,255)).

Hoạt động 2 trang 84

Đề bài:

1. Cách thiết lập định dạng màu chữ trong CSS như thế nào?

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

Lời giải:

Các phần tử HTML có thể được tô màu bằng các thuộc tính CSS sau:

• Thuộc tính color – định dạng màu chữ (màu nổi).
• Thuộc tính background-color – định dạng màu nền.
• Thuộc tính border – định dạng màu khung viền quanh phần tử.

Ví dụ:

h1 {
  color: red;
  background-color: lightgreen;
  border: 2px solid magenta;
}

→ Phần tử <h1> sẽ có chữ đỏ, nền xanh lá nhạt và khung viền màu magenta dày 2 pixel.

Câu hỏi củng cố trang 85

Đề bài:

1 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.

Lời giải:

Cần bọc cụm “Tim Berners-Lee” trong một thẻ (ví dụ <strong>) trong tệp HTML:

<p>… làm việc với <strong>Tim Berners-Lee</strong> tại viện hạt nhân CERN.</p>

Sau đó thêm CSS định dạng cho <strong>:

strong {
  background-color: yellow;
  border: 1px solid orange;
}

→ Cụm “Tim Berners-Lee” sẽ có nền vàng và khung viền cam.

2. Sửa lại CSS trên, thay đổi đị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.

Lời giải:

Sửa CSS thêm khung viền cho p:

p {
  color: blue;
  border: 2px solid black;
}

Kết quả kiểm tra: khung viền chỉ xuất hiện quanh phần tử <p>, không xuất hiện quanh các phần tử con (như <em>, <strong> bên trong <p>).

→ Kết luận: thuộc tính border không có tính kế thừa. Chỉ có color và background-color mới kế thừa cho các phần tử con.

2. Thiết lập bộ chọn là tổ hợp các phần tử có quan hệ

Hoạt động 3 trang 85

Đề 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.

Lời giải:

Điểm khác biệt cốt lõi:

• E F rộng nhất (con và cháu), E > F hẹp hơn (chỉ con trực tiếp).
• E + F hẹp nhất trong anh em (chỉ liền kề), E ~ F rộng hơn (mọi anh em đứng sau).

Câu hỏi củng cố mục 2 trang 87

Đề bài: Trong ví dụ ở Hình 15.7, mã HTML có dạng:

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

Với mẫu em ~ strong {color: red;} thì cả hai <strong> (Tim Berners-Lee và CERN) đều có màu đỏ.

1. Nếu thay mẫu em ~ strong bằng p > strong thì kết quả sẽ như thế nào?

Lời giải:

• p > strong chọn các <strong> là con trực tiếp của <p>.
• Cả hai <strong> “Tim Berners-Lee” và “CERN” đều là con trực tiếp của <p>.

→ Kết quả: cả hai <strong> đều có màu đỏ (giống với em ~ strong).

2. Nếu thay mẫu em ~ strong bằng em + strong thì kết quả sẽ như thế nào?

Lời giải:

• em + strong chọn <strong> đứng liền kề ngay sau <em>.
• Sau <em> “Hakon Wium Lie” là <strong> “Tim Berners-Lee” (đây là phần tử anh em ngay sau em).

→ Kết quả: chỉ <strong> “Tim Berners-Lee” có màu đỏ, còn <strong> “CERN” giữ màu mặc định.

3. Nếu thay mẫu em ~ strong bằng p strong thì kết quả sẽ như thế nào?

Lời giải:

• p strong chọn các <strong> là con hoặc cháu của <p>.
• Cả hai <strong> đều là con của <p>.

→ Kết quả: cả hai <strong> đều có màu đỏ (giống với em ~ strong).

Luyện tập

Luyện tập trang 88

Đề bài:

1. Thiết lập hệ màu cơ bản (17 màu của CSS2.1) theo bộ ba tham số R, G, B.

Lời giải:

2. Khi nào thì các mẫu định dạng E F và E > F có tác dụng như nhau?

Lời giải:

• E F áp dụng cho F là con hoặc cháu của E.
• E > F áp dụng cho F là con trực tiếp của E.

→ Hai mẫu có tác dụng như nhau khi trong cây HTML, mọi F nằm dưới E đều là con trực tiếp của E (không có F nào là “cháu”). Tức là không có trường hợp F lồng trong một phần tử trung gian nào khác vẫn thuộc E.

Vận dụng

Vận dụng trang 88

Đề bài:

1. Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:

a) E1 E2 E3.

Lời giải:

Ý nghĩa: chọn E3 là con/cháu của E2, mà E2 là con/cháu của E1.

Ví dụ:

div p em {color: red;}

→ Áp dụng màu đỏ cho các <em> là con/cháu của <p>, mà <p> phải là con/cháu của <div>.

b) E1 > E2 > E3.

Lời giải:

Ý nghĩa: chọn E3 là con trực tiếp của E2, và E2 là con trực tiếp của E1.

Ví dụ:

body > div > p {color: blue;}

→ Áp dụng màu xanh cho các <p> là con trực tiếp của <div>, mà <div> phải là con trực tiếp của <body>.

2. Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:

a) E + F + G.

Lời giải:

Ý nghĩa: chọn G là anh em liền kề ngay sau F, và F là anh em liền kề ngay sau E (cả ba cùng phần tử cha).

Ví dụ:

h1 + p + em {color: green;}

→ Áp dụng màu xanh lá cho <em> đứng liền kề ngay sau <p>, mà <p> đứng liền kề ngay sau <h1>.

b) E > F + G.

Lời giải:

Ý nghĩa: chọn G là anh em liền kề ngay sau F, mà F là con trực tiếp của E (G và F cùng phần tử cha là E).

Ví dụ:

div > p + em {color: purple;}

→ Áp dụng màu tím cho <em> đứng liền kề ngay sau <p>, mà <p> phải là con trực tiếp của <div>.

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa