KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
BÀI 15. TẠO MÀU CHO CHỮ VÀ NỀN
1. HỆ THỐNG MÀU CỦA CSS
a) Hệ màu RGB
Nguyên lý:
Kết hợp ba màu cơ bản: Đỏ (Red), Lục (Green), Lam (Blue). Mỗi giá trị chạy từ 0 đến 255 (tương đương 8 bit), tạo ra tổng cộng 28 x 28 x 28 = 16.777.216 màu.
Cách viết thập phân:
Sử dụng cú pháp rgb(r, g, b).
Cách viết thập lục phân (Hex):
Sử dụng ký tự # kèm theo 3 cặp mã Hex (từ 00 đến FF) đại diện cho R, G, B.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 1: Trong thiết kế web bằng CSS, hệ màu RGB được sử dụng rất phổ biến. Theo nguyên lý cơ bản của hệ màu này, nó được tạo ra dựa trên sự kết hợp của ba màu sắc gốc cơ bản nào dưới đây?
Câu 2: Khi viết mã màu theo định dạng thập lục phân (Hex) trong CSS, người lập trình phải sử dụng ký tự # kết hợp với 3 cặp mã. Mỗi cặp mã này nhận các giá trị nằm trong khoảng giới hạn nào?
Câu 3: Giả sử bạn đang lập trình một giao diện web và muốn thiết lập một phần tử hiển thị màu đỏ thuần khiết bằng cú pháp thập phân. Mã lệnh CSS nào sau đây được viết đúng chuẩn theo quy tắc của RGB?
b) Hệ màu HSL
Nguyên lý:
Dựa trên ba thông số: Sắc màu (Hue - góc trên vòng tròn màu từ 0 đến 360), Độ bão hòa (Saturation - %) và Độ sáng (Lightness - %).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 4: Bên cạnh hệ màu RGB quen thuộc, CSS còn hỗ trợ một hệ màu khác mang tính trực quan cao hơn. Hệ thống màu HSL được xây dựng dựa trên ba thông số kĩ thuật cơ bản cốt lõi nào sau đây?
Câu 5: Khi sử dụng hệ màu HSL trong thiết kế giao diện, thông số Sắc màu (Hue) được biểu diễn trên một vòng tròn màu. Thông số này nhận các giá trị góc được tính toán nằm trong khoảng giới hạn cụ thể nào?
Câu 6: Bạn đang viết mã CSS bằng hệ màu HSL và muốn định dạng một nút bấm hiển thị màu xanh lam đậm với sắc màu 240 độ, bão hòa 100%, độ sáng 50%. Đoạn mã nào dưới đây là hoàn toàn chính xác?
c) Tên màu tiếng Anh
Đặc điểm:
Sử dụng các tên màu chuẩn đã được định nghĩa sẵn (khoảng hơn 140 tên màu).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 7: Để giúp người lập trình tiết kiệm thời gian khi thiết kế web, CSS cung cấp sẵn một thư viện các tên màu bằng tiếng Anh. Hiện nay có khoảng bao nhiêu tên màu chuẩn đã được định nghĩa sẵn trong hệ thống?
Câu 8: Việc sử dụng tên màu tiếng Anh trong việc thiết kế giao diện mang lại đặc điểm nổi bật nào so với việc dùng mã màu phức tạp khi lập trình viên tiến hành định dạng màu sắc cho trang web?
Câu 9: Trong quá trình viết mã CSS cho một thẻ tiêu đề, nếu bạn muốn chữ hiển thị màu cam bằng cách sử dụng trực tiếp tên màu tiếng Anh chuẩn, bạn sẽ viết dòng mã lệnh nào sau đây cho hợp lý nhất?
2. THIẾT LẬP MÀU CHO CHỮ VÀ NỀN
a) Thuộc tính color
Công dụng:
Xác định màu sắc cho văn bản bên trong phần tử.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 10: Trong quá trình định dạng phần tử HTML bằng CSS, lập trình viên sử dụng một thuộc tính đặc biệt có tên là color. Thuộc tính cơ bản này được áp dụng nhằm thực hiện công dụng chính yếu nào sau đây?
Câu 11: Thuộc tính color trong CSS có thể nhận các giá trị đầu vào rất đa dạng để phục vụ việc thiết kế. Dựa trên lý thuyết, bạn có thể truyền loại dữ liệu gì vào thuộc tính này để đổi màu chữ?
Câu 12: Giả sử bạn muốn thiết lập đoạn văn bản bên trong thẻ <p> hiển thị màu tím bằng mã thập lục phân (Hex). Dựa vào cú pháp CSS, bạn sẽ chọn dòng mã lệnh nào dưới đây để thực hiện chính xác?
b) Thuộc tính background-color
Công dụng:
Xác định màu nền cho phần tử.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 13: Cùng với việc tô màu cho chữ viết, CSS cũng cung cấp công cụ để thay đổi màu sắc ở phía sau nội dung. Thuộc tính background-color trong ngôn ngữ CSS thực hiện công dụng chính xác nào đối với phần tử?
Câu 14: Khi áp dụng thuộc tính background-color cho phần tử <body> của một trang HTML, điều gì sẽ xảy ra đối với giao diện tổng thể của trang web mà người dùng nhìn thấy trên màn hình trình duyệt của họ?
Câu 15: Nếu bạn nhận được yêu cầu thiết kế để đổi toàn bộ nền của trang web (thẻ body) sang màu vàng nhạt (lightyellow) bằng ngôn ngữ CSS. Cú pháp viết mã lệnh nào sau đây là hoàn toàn chuẩn xác và hợp lý?
3. Ý NGHĨA VÀ LỢI ÍCH CỦA CSS
Tách biệt nội dung và trình bày:
Giúp mã HTML gọn gàng hơn, chỉ tập trung vào dữ liệu.
Tái sử dụng định dạng:
Viết một lần, áp dụng cho hàng ngàn phần tử.
Dễ dàng cập nhật:
Thay đổi một dòng mã CSS sẽ thay đổi diện mạo của cả website.
Điều khiển trên nhiều thiết bị:
CSS giúp trang web hiển thị tốt trên cả máy tính lẫn điện thoại.
Tiếp cận theo ngữ nghĩa:
Cho phép thay đổi trang trí theo ý nghĩa của nội dung.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 16: Ngôn ngữ CSS được sinh ra để khắc phục nhiều hạn chế của thiết kế web cổ điển. Theo nội dung bài học, một trong những ý nghĩa cơ bản và quan trọng nhất của việc sử dụng CSS là giúp ích gì?
Câu 17: Khả năng kiểm soát linh hoạt của CSS không chỉ dừng lại ở màn hình máy tính truyền thống. Theo tài liệu, CSS giúp trang web hiển thị tốt trên các loại thiết bị nào khác trong thực tế hiện nay?
Câu 18: Việc tách biệt giữa việc nhập nội dung (bằng HTML) và việc trang trí (bằng CSS) thành hai công việc hoàn toàn độc lập mang lại kết quả tích cực nào cho mã nguồn của một trang web?
Câu 19: Đặc tính "Đảm bảo tính thống nhất" của CSS có vai trò vô cùng quan trọng đối với các website lớn. Điều này giúp tránh được tình trạng tiêu cực nào trong quá trình xây dựng các trang con thuộc cùng website?
Câu 20: Bạn được yêu cầu đổi màu nền của 1000 phần tử nút bấm trên một website lớn. Nhờ tính năng "Dễ dàng cập nhật" và "Tái sử dụng định dạng" của CSS, bạn sẽ thực hiện công việc này với giải pháp nào tối ưu nhất?