Đáp án Tin học ứng dụng 12 kết nối bài 15: Tạo màu cho chữ và nền

BÀI 15. MÀU CHO CHỮ VÀ NỀN.

KHỞI ĐỘNG

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ề thiết lập này?

Giải chi tiết:

Các định dạng màu sau đều đề cập đến cùng một màu màu tím, nhưng được biểu diễn bằng các kiểu mô tả màu khác nhau:

a) p { color: rgb(128, 0, 128); }

• Sử dụng giá trị RGB (Red, Green, Blue) để chỉ định màu sắc. Trong trường hợp này, giá trị RGB là (128, 0, 128), tương ứng với màu tím.

b) p { color: #800080; }

• Sử dụng mã màu hex (Hexadecimal) để chỉ định màu sắc. Mã màu #800080 cũng biểu diễn màu tím trong không gian màu hex.

c) p { color: hsl(300, 100%, 25.1%); }

• Sử dụng hệ màu HSL (Hue, Saturation, Lightness) để chỉ định màu sắc. Trong trường hợp này, giá trị HSL là (300, 100%, 25.1%), với giá trị Hue (màu) là 300 độ, tương ứng với màu tím.

Nhận xét:

• Cả ba định dạng màu đều thiết lập cùng một màu tím, chỉ khác nhau trong cách biểu diễn màu sắc (RGB, Hex, HSL).

• Mỗi phương pháp biểu diễn màu có ưu điểm riêng, ví dụ như mã hex là cách phổ biến và dễ đọc, RGB cung cấp sự chính xác cao hơn về các giá trị màu cơ bản, và HSL cho phép điều chỉnh dễ dàng độ sáng, độ bão hòa và màu sắc chính xác hơn so với RGB.

• Việc sử dụng cả ba định dạng màu này tùy thuộc vào sở thích cá nhân và yêu cầu cụ thể của dự án hoặc thiết kế.

1. HỆ THỐNG MÀU CỦA CSS

Hoạt động 1: Tìm hiểu cách biểu diẽn màu trong HTML và CSS

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

Giải chi tiết:

Hệ màu RGB (Red, Green, Blue) là một trong những phương pháp phổ biến nhất để biểu diễn và điều chỉnh màu sắc trên web, được hỗ trợ bởi HTML và CSS. Dưới đây là một số điểm cần biết về hệ màu RGB khi sử dụng trong lập trình web:

Các thành phần của hệ màu RGB:

• Red (Đỏ): Được đo bằng một giá trị từ 0 đến 255, trong đó 0 là màu đen và 255 là màu đỏ tối đa.

• Green (Xanh lá cây): Được đo bằng một giá trị từ 0 đến 255, trong đó 0 là màu đen và 255 là màu xanh lá cây tối đa.

• Blue (Xanh dương): Được đo bằng một giá trị từ 0 đến 255, trong đó 0 là màu đen và 255 là màu xanh dương tối đa.

Biểu diễn màu sắc trong CSS và HTML:

• Sử dụng giá trị RGB: Trong CSS, màu sắc có thể được định nghĩa bằng cách sử dụng giá trị RGB. Ví dụ:

p {

    color: rgb(255, 0, 0); /* Đỏ */

    background-color: rgb(0, 255, 0); /* Xanh lá cây */

}

Trong ví dụ trên, rgb(255, 0, 0) biểu thị màu đỏ hoàn toàn (tất cả đỏ, không có màu xanh lá cây hoặc xanh dương), trong khi rgb(0, 255, 0) biểu thị màu xanh lá cây hoàn toàn (tất cả xanh lá cây, không có màu đỏ hoặc xanh dương).

• Mã màu hex (Hexadecimal): Mã màu hex cũng dựa trên hệ màu RGB, nhưng được biểu diễn dưới dạng hex (16 cơ số). Ví dụ, màu đỏ có thể được biểu diễn bằng #FF0000, trong đó #FF tương đương với giá trị RGB 255, và các giá trị sau đó lần lượt là 0 cho Green và 0 cho Blue.

Ưu điểm của hệ màu RGB:

• Đơn giản và phổ biến: RGB là hệ màu đơn giản và được hỗ trợ rộng rãi trong các ứng dụng web.

• Điều chỉnh màu sắc chính xác: Bằng cách điều chỉnh các giá trị Red, Green và Blue, người phát triển có thể tinh chỉnh chính xác màu sắc mong muốn.

• Tương thích với nhiều thiết bị và trình duyệt: Hệ màu RGB là một tiêu chuẩn được hỗ trợ rộng rãi, vì vậy các màu sắc sử dụng RGB sẽ hiển thị đồng nhất trên hầu hết các thiết bị và trình duyệt web hiện đại.

Hệ màu RGB là công cụ quan trọng trong thiết kế web, giúp đạt được màu sắc chính xác và thống nhất trên các nền tảng khác nhau.

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

Giải chi tiết:

Red (đỏ): HSL(0, 100%, 50%)

Yellow (vàng): HSL(60, 100%, 50%)

Green (xanh lá cây): HSL(120, 100%, 50%)

Blue (xanh dương): HSL(240, 100%, 50%)

Magenta (đỏ tím): HSL(300, 100%, 50%)

Cyan (xanh lam): HSL(180, 100%, 50%)

Câu hỏi 2: Trong hệ màu rgb có bao nhiêu màu thuộc màu xám?

Giải chi tiết:

Trong hệ màu RGB, màu xám được đại diện bởi các giá trị RGB giống nhau. Cụ thể, nếu giá trị đỏ (red), xanh lá cây (green) và xanh dương (blue) đều bằng nhau, chúng ta sẽ có một màu xám. Vì mỗi kênh màu có 256 giá trị từ 0 đến 255, nên có tổng cộng 256 màu xám khác nhau trong hệ màu RGB.

Hoạt động 2: Tìm hiểu cách thiết lập màu chữ và màu nền bằng CSS

Cùng thảo luận về cách thiết lập màu trong các mẫu CSS và trả lời các câu hỏi sau:

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ử CSS như thế nào?

Giải chi tiết:

- Để thiết lập định dạng màu chữ trong CSS, bạn có thể sử dụng thuộc tính "color". Có thể áp dụng giá trị màu bằng tên màu (ví dụ: "red", "blue"), mã hex (ví dụ: "#FF0000" cho màu đỏ) hoặc giá trị RGB (ví dụ: "rgb(255, 0, 0)" cho màu đỏ).

- Để thiết lập màu nền cho các phần tử CSS, bạn có thể sử dụng thuộc tính "background-color". Tương tự như màu chữ, bạn có thể áp dụng giá trị màu bằng tên màu, mã hex hoặc giá trị RGB.

2. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ

Hoạt động 3: Tìm hiểu cách thiết lập bộ chọn là tổ hợp các phần tử

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.

Giải chi tiết:

- E F (Descendant selector): Chọn tất cả các phần tử F nằm bên trong phần tử E, bất kể cấp độ lồng nhau của chúng. Ví dụ: div p sẽ chọn tất cả các phần tử <p> nằm trong các phần tử <div>.

- E > F (Child selector): Chọn các phần tử F là con trực tiếp của phần tử E. Điều này chỉ chọn các phần tử F nằm trực tiếp bên trong phần tử E, không bao gồm các phần tử F ở các cấp độ lồng nhau sâu hơn. Ví dụ: ul > li sẽ chọn tất cả các phần tử <li> là con trực tiếp của phần tử <ul>.

- E + F (Adjacent sibling selector): Chọn các phần tử F ngay sau phần tử E và cùng cấp với E. Điều này chỉ chọn phần tử F đầu tiên sau phần tử E. Ví dụ: h2 + p sẽ chọn phần tử <p> đầu tiên ngay sau một phần tử <h2>.

- E ~ F (General sibling selector): Chọn tất cả các phần tử F cùng cấp với phần tử E, ngay sau và lồng nhau. Điều này tương tự như trường hợp E + F, nhưng khác biệt là E ~ F có thể chọn nhiều phần tử F, không chỉ phần tử đầu tiên. Ví dụ: h3 ~ p sẽ chọn tất cả các phần tử <p> cùng cấp với phần tử <h3>.

Câu hỏi 1: Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng p > strong thì kết quả sẽ như thế nào?

Giải chi tiết:

Nếu thay mẫu em ~ strong bằng p > strong, kết quả sẽ không thay đổi. Lí do là trong cấu trúc HTML, phần tử <strong> đang nằm trực tiếp trong phần tử <p>. Do đó, cả hai trường hợp em ~ strong và p > strong đều sẽ chọn phần tử <strong> đó và áp dụng các định dạng CSS tương ứng.

Mã HTML sau khi sửa:

Kết quả hiển thị:

Câu hỏi 2: Trong ví dụ ở Hình 15.7 nếu thay mẫu em ~ strong bằng em + strong thì kết quả sẽ như thế nào?

Giải chi tiết:

Câu hỏi 3: Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng p strong thì kết quả sẽ như thế nào?

Giải chi tiết:

Kết quả là các phần tử <strong> ngay sau phần tử <em> sẽ có màu chữ xanh.

Mã HTML sau khi thay đổi:

Kết quả hiển thị:

LUYỆN TẬP

Câu 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.

Giải chi tiết:

- Đen: RGB(0, 0, 0)

- Trắng: RGB(255, 255, 255)

- Đỏ: RGB(255, 0, 0)

- Xanh lá cây: RGB(0, 128, 0)

- Xanh da trời: RGB(0, 0, 255)

- Xanh lam: RGB(0, 0, 128)

- Vàng: RGB(255, 255, 0)

- Cam: RGB(255, 165, 0)

- Hồng: RGB(255, 192, 203)

- Tím: RGB(128, 0, 128)

- Xanh dương: RGB(0, 0, 139)

- Xám: RGB(128, 128, 128)

- Xám đậm: RGB(169, 169, 169)

- Xám nhạt: RGB(211, 211, 211)

- Nâu: RGB(165, 42, 42)

- Xanh oliv: RGB(128, 128, 0)

- Xanh lá cây đậm: RGB(0, 100, 0)

Mã HTML:

Kết quả hiển thị của các màu tương ứng:

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

Giải chi tiết:

Các mẫu định dạng E F và E > F trong CSS có tác dụng như nhau trong trường hợp sau:

Khi phần tử F là con trực tiếp của phần tử E.

Trong trường hợp này, cả hai mẫu đều áp dụng cho phần tử F nằm trong phần tử E. Điều này có nghĩa là phần tử F phải là con trực tiếp của phần tử E và không được chứa trong bất kỳ phần tử con nào khác.

VẬN DỤNG

Câu 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.

b) E1 > E2 >E3.

Giải chi tiết:

a)Mẫu định dạng E1 E2 E3: Đây là một mẫu kết hợp (descendant selector) trong CSS, áp dụng cho các phần tử E3 nằm trong phần tử E2, và phần tử E2 nằm trong phần tử E1. Mẫu này không yêu cầu E2 và E3 là con trực tiếp của E1, mà có thể nằm bất kỳ đâu trong cây phân cấp của E1.

Ví dụ:

Trong ví dụ trên, mẫu định dạng .container .parent .child span áp dụng cho phần tử <span> nằm trong phần tử có lớp "child", nằm trong phần tử có lớp "parent", và nằm trong phần tử có lớp "container". Điều này cho phép chúng ta định dạng các phần tử <span> trong một cây phân cấp phức tạp.

b) Mẫu định dạng E1 > E2 > E3: Đây là một mẫu kết hợp (child combinator) trong CSS, áp dụng cho các phần tử E3 là con trực tiếp của E2, và E2 là con trực tiếp của E1. Mẫu này yêu cầu E2 và E3 nằm trực tiếp trong E1.

Ví dụ:

Trong ví dụ trên, mẫu định dạng .parent > .child > span áp dụng cho phần tử <span> là con trực tiếp của phần tử có lớp "child", và phần tử có lớp "child" là con trực tiếp của phần tử có lớp "parent". Điều này cho phép chúng ta định dạng các phần tử <span> chỉ khi chúng nằm trực tiếp trong các phần tử <li> và <ul>, không áp dụng cho các phần tử <span> khác nằm ở cấp độ khác trong cây phân cấp.

Câu 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.

b) E >F + G

Giải chi tiết:

Các mẫu định dạng CSS tổng quát như E + F + G và E > F + G là các điều kiện chọn phần tử trong CSS, giúp xác định cách các phần tử HTML được lựa chọn và áp dụng các quy tắc CSS. Dưới đây là giải thích chi tiết và ví dụ cho mỗi mẫu định dạng:

a) E + F + G

Mẫu này áp dụng cho các phần tử G sau khi phần tử E đầu tiên và phần tử F ngay sau nó. Điều này có nghĩa là phần tử G phải là con trực tiếp của E và là anh chị em kế tiếp của phần tử F.

Ví dụ:

<div class="container">

    <p>Paragraph 1</p>

    <h2>Heading 2</h2>

    <p>Paragraph 2</p>

    <p>Paragraph 3</p>

</div>

p + h2 + p {

    color: blue;

}

Trong ví dụ trên, CSS sẽ chọn các phần tử <p> mà đứng sau một phần tử <h2> và cùng là anh chị em kế tiếp của phần tử <p> đầu tiên. Do đó, chỉ có <p>Paragraph 2</p> sẽ được áp dụng CSS màu xanh.

b) E > F + G

Mẫu này áp dụng cho các phần tử G là con trực tiếp của E và là anh chị em kế tiếp của phần tử F.

Ví dụ:

<ul class="list">

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

</ul>

ul > li + li {

    color: red;

}

Trong ví dụ này, CSS sẽ chọn các phần tử <li> mà là anh chị em kế tiếp của một phần tử <li> và là con trực tiếp của một phần tử <ul>. Do đó, chỉ có các <li> thứ hai và thứ ba sẽ được áp dụng CSS màu đỏ.

Ý nghĩa và sử dụng:

• Các mẫu định dạng CSS như E + F + G và E > F + G giúp xác định mối quan hệ giữa các phần tử trong HTML và áp dụng các quy tắc CSS dựa trên những mối quan hệ này.

• Chúng hữu ích khi cần lựa chọn các phần tử cụ thể trong một cấu trúc phân cấp, giúp tinh chỉnh giao diện một cách linh hoạt và hiệu quả hơn.

Việc hiểu và sử dụng các mẫu định dạng CSS này sẽ giúp em có thể kiểm soát và điều chỉnh giao diện web một cách hiệu quả và dễ dàng hơn.