Giáo án và PPT Khoa học máy tính 12 kết nối bài 15: Tạo màu cho chữ và nền

BÀI 15: TẠO MÀU CHO CHỮ VÀ NỀN

HOẠT ĐỘNG KHỞI ĐỘNG

GV yêu cầu HS thảo luận và trả lờ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)

b)

c)  

HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

Hoạt động 1. Hệ thống màu của CSS

Nhiệm vụ 1: Hệ màu RGB

GV đặt câu hỏi hướng dẫn học sinh tìm hiểu: Nguyên lí hoạt động của hệ màu RGB là gì? Mỗi màu được biểu diễn bởi hệ RGB có cấu trúc như thế nào? Trong CSS, mỗi giá trị màu RGB được thiết lập như thế nào?

Sản phẩm dự kiến:

- Nguyên lí hoạt động của hệ màu RGB: Hệ màu RGB (R – red, G – green, B – blue) hoạt động dựa trên nguyên lý tổng hợp ánh sáng, trong đó ba màu đỏ, xanh lá cây và xanh dương được kết hợp với nhau theo tỷ lệ khác nhau để tạo ra các màu khác.

- Cấu trúc màu: Mỗi màu là một tổ hợp gồm ba giá trị (r, g, b), trong đó mỗi giá trị này là số nguyên nằm trong khoảng từ 0 đến 255, tức là một số 8 bit.

Tổng số màu cho phép là màu.

- Cách thiết lập giá trị màu RGB: 

• rgb(x-red, x-green, x-blue): các tham số có thể nhận giá trị độc lập từ 0 đến 255.

• rgb(x-red%, x-green%, x-blue%): các tham số biểu thị giá trị phần trăm của 255.

• #rrggbb: rr, gg, bb là giá trị trong hệ đếm hexa (hệ đếm cơ số 16).

Nhiệm vụ 2: Hệ màu HSL

GV đặt câu hỏi hướng dẫn học sinh tìm hiểu: Hệ màu HSL biểu diễn màu sắc như thế nào? Mỗi giá trị màu HSL được thiết lập như thế nào?

Kết luận:

- Trong khi hệ màu RGB dựa trên ba màu cơ bản để tạo ra các màu khác. HSL tập trung vào cách mà con người cảm nhận màu sắc, làm cho nó trở thành một công cụ hữu ích trong thiết kế đồ họa và chỉnh sửa hình ảnh.

- Cách biểu diễn màu sắc: Hệ màu HSL là một hệ màu sử dụng ba thông số để biểu diễn màu sắc gồm có:

+ H (Hue): Màu sắc.

+ S (Saturation): Độ bão hòa.

+ L (Lightness): Độ sáng.

- Cách thiết lập giá trị màu HSL:

hsl(hue, saturation, lightness)

Trong đó:

+ hue là vòng tròn màu với giá trị từ 0 đến 360.

+ saturation chỉ độ bão hoà hay độ đậm đặc của màu với giá trị từ 0% đến 100%:

• Màu sẽ biến mất chỉ còn xám khi độ bão hoà bằng 0%. 

• Màu sẽ đầy đủ nếu độ bão hoà bằng 100%.

+ lightness là độ sáng với giá trị từ 0% đến 100%:

• Với 0%, độ sáng thấp nhất, màu sẽ đen. 

• Với 100%, độ sáng là lớn nhất, màu sẽ trắng. 

Đặt lightness = 50% để có màu đúng.

Nhiệm vụ 3: Các tên màu có sẵn trong CSS

GV đưa ra câu hỏi: Ngoài cách sử dụng hàm rgb() và hsl(), CSS còn hỗ trợ cách biểu diễn màu nào? 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? Trong hệ màu rgb có bao nhiêu màu thuộc màu xám?

Kết luận:

- Bên cạnh việc thiết lập màu bằng các hàm rgb() và hsl(), CSS còn thiết lập sẵn các tên màu để dễ dàng cho việc sử dụng. 

- Phiên bản CSS2 thiết lập tên 16 màu chuẩn. và tên màu không phân biệt chữ hoa chữ thường.

- Lưu ý: Các màu xám (hay đen trắng) có thể được thiết lập theo các cách sau:

+ rgb(x,x,x) với các tham số r, g, b bằng nhau.

+ (h,0%,x%) khi tham số saturation bằng 0%.

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

• Thuộc tính color dùng để định dạng màu chữ (màu nổi). 

• Thuộc tính background-color dùng để định dạng màu nền.

• Thuộc tính border dùng để định dạng màu khung viền quanh phần tử.

Các mẫu định dạng CSS được áp dụng theo nguyên tắc kế thừa trong mô hình cây HTML:

• Nếu mẫu định dạng được viết cho một phần tử thì sẽ được áp dụng mặc định cho tất cả các phần tử con, cháu. 

• Nếu có nhiều mẫu định dạng được viết cho cùng một bộ chọn thì mẫu viết sau cùng sẽ được áp dụng. 

• Nếu bộ chọn có kí tự * thì được áp dụng cho mọi phần tử nhưng với độ ưu tiên thấp nhất. 

• Mẫu định dạng với kí hiệu !important có mức ưu tiên cao nhất.

………………………………………..

HOẠT ĐỘNG LUYỆN TẬP

Từ nội dung bài học, GV yêu cầu HS hoàn thành các bài tập trắc nghiệm sau:

Câu 1: Để định dạng màu khung viền quanh phần tử, em sử dụng thuộc tính CSS nào?

A. background-color.

B. bgcolor.

C. color.

D. border.

Câu 2: Cách thiết lập màu tím trong hệ màu RGB là

A. # 800080.

B. # 808080.

C. # 808000.

D. # 808000.

Câu 3: Mẫu CSS áp dụng cho các phần tử có quan hệ cha con trực tiếp là

A. div p {background-color: lightblue;}

B. p + em {color: red;}.

C. p > strong {color: green;}.

D. strong  em {color: gray;}.

Câu 4: Bộ chọn nào áp dụng cho các phần tử F với điều kiện F là phần tử con/cháu của E, tức là E phải ở phía trên F trong cây HTML?

A. E F.

B. E + F.

C. E F.

D. E > F.

Câu 5: Phương án nào sau đây là cách thiết lập màu đen trong hệ màu RGB?

A. rgb(100%, 100%, 100%).

B. #808080.808080.

C. rgb(255, 255, 255).

D. rgb(0%, 0%, 0%).

Sản phẩm dự kiến:

HOẠT ĐỘNG VẬN DỤNG

Vận dụng kiến thức, GV yêu cầu HS hoàn thành bài tập sau:

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.

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