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

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV cho HS đọc Hoạt động 1 – Tìm hiểu cách biểu diễn màu trong HTML và CSS tr.83 SGK:

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

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS, mỗi nhóm tìm hiểu một cách biểu diễn màu bằng cách trả lời các câu hỏi:

a) Hệ màu RGB

+ 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?

b) Hệ màu HSL

+ 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?

c) Các tên màu có sẵn trong CSS

+ 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?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.84 SGK: 

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

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

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1 SGK tr.83 – 84 sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra.

- GV quan sát và trợ giúp HS (nếu cần thiết).

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- GV mời đại diện các nhóm báo cáo kết quả thảo luận.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi Hoạt động củng cố kiến thức tr.84  SGK:

Câu 1. Các màu cơ bản được thể hiện bằng hàm hsl như sau:

Câu 2. Trong hệ màu rgb có 256 màu thuộc màu xám. Các màu này có tham số RGB là rgb(x,x,x) với x chạy từ 0 đến 255.

Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: 

- Từ kết quả thảo luận của nhóm, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ.

- GV chính xác hoá lại các nội dung kiến thức.

- GV chốt kiến thức theo Hộp kiến thức: 

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

a) Hệ màu RGB

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

Màu trắng (white), rgb(255,255,255) rgb(100%,100%,100%) #ffffff

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

Màu xám (gray), rgb(128,128,128) rgb(50%,50%,50%) #808080

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

Màu đen (black), rgb(0,0,0), rgb(0%,0%,0%) #000000

b) Hệ màu HSL

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

Hình 15.2. Mô hình hệ màu HSL với các tham số Hue, Saturation, Light và mô hình vòng tròn màu Hue với giá trị từ 0° (đỏ) đến 360° (cũng là đỏ), 120° (xanh lá cây), 240° (xanh dương)

c) Các tên màu có sẵn trong CSS

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

Ví dụ: black, gray, white, red, green, orange, yellow, purple, blue, lime....

- Phiên bản CSS3 đã thiết lập 140 tên màu.

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

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS, đọc 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 tr.84 SGK và trả lời các câu hỏi:

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

- GV đặt câu hỏi định hướng cho các nhóm thảo luận:

+ CSS hỗ trợ định dạng màu chữ, màu nền và khung viền của các phần tử HTML trên trang web bằng những thuộc tính nào?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.85 SGK:

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

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

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1 SGK tr.84 – 85  sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra.

- GV quan sát và trợ giúp HS (nếu cần thiết).

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- GV mời đại diện các nhóm báo cáo kết quả thảo luận.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: 

- Từ kết quả thảo luận của nhóm, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ.

- GV chính xác hoá lại các nội dung kiến thức.

- GV chốt kiến thức theo Hộp kiến thức: 

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

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

- Ví dụ:

• Trong mẫu CSS sau, phần tử h1 được định dạng màu chữ, màu nền và màu của khung viền:

• Trong mẫu CSS sau, định dạng khung viền, màu nền cho phần tử em, định dạng màu chữ cho phần tử p:

Kết quả áp dụng hai CSS trên:

Hình 15.3. Kết quả áp dụng CSS định dạng màu

- Lưu ý: 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.

Hướng dẫn trả lời câu hỏi Hoạt động 2 tr.84 SGK:

1. Trong CSS, màu chữ được thiết lập bằng thuộc tính color.

2. Trong CSS, màu nền của các phần tử được thiết lập bằng thuộc tính background-color.

Hướng dẫn trả lời câu hỏi Hoạt động củng cố kiến thức tr.85 SGK:

Câu 1. Sửa lại CSS định dạng màu nền và khung viền cho cụm từ Tim Berners-Lee:

Câu 2. Sửa lại CSS trên, thay đổi định dạng khung viền cho phần tử p:

Kết quả áp dụng:

Tính chất định dạng khung viền không có tính kế thừa.

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS nhắc lại kiến thức cũ về thứ tự ưu tiên áp dụng các mẫu định dạng đã được học ở Bài 14:

+ Các mẫu định dạng CSS được áp dụng theo nguyên tắc nào trong mô hình cây HTML?

+ Khi có nhiều mẫu định dạng CSS cùng áp dụng cho một phần tử HTML thì trình duyệt sẽ chọn các mẫu định dạng theo thứ tự ưu tiên nào để áp dụng?

- Từ đó, GV nhấn mạnh lại tính chất kế thừa trong mối quan hệ cha-con giữa các phần tử.

- GV cho HS đọc 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ử tr.85 SGK để dẫn dắt vào bài học:

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. 

……………………

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.

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

Bảng 15.1. Bốn bộ chọn là tổ hợp các phần tử

a) Ví dụ minh hoạ cho trường hợp E F

Xét mẫu định dạng div p {color: blue;} áp dụng cho văn bản HTML sau: 

………………