Trắc nghiệm Tin học 12 Bài 15: Tạo màu cho chữ và nền
Phần 1. 15 câu Trắc nghiệm Tin học 10 Bài 15: Tạo màu cho chữ và nền
I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.
Câu 1: Bộ chọn CSS nào áp dụng định dạng cho các phần tử <p> là con trực tiếp của <div>?
A. div p
B. div > p
C. div + p
D. div ~ p
Hướng dẫn giải
Đáp án: B
Giải thích: Bộ chọn div > p áp dụng định dạng cho các phần tử <p> là con trực tiếp của <div>.
Câu 2: Mã rgb(0, 255, 0) đại diện cho màu nào trong hệ màu RGB?
A. Màu đỏ
B. Màu xanh lá cây
C. Màu xanh dương
D. Màu vàng
Hướng dẫn giải
Đáp án: B
Giải thích: Mã rgb(0, 255, 0) biểu thị màu xanh lá cây với giá trị G (Green) là 255 và các giá trị R (Red) và B (Blue) là 0.
Câu 3: Để làm cho tất cả văn bản trong trang web có màu xám, bạn sử dụng thuộc tính CSS nào?
A. background-color: gray;
B. border: gray;
C. color: gray;
D. font-color: gray;
Hướng dẫn giải
Đáp án: C
Giải thích: Thuộc tính color: gray; được sử dụng để thiết lập màu chữ thành màu xám cho toàn bộ văn bản trên trang.
Câu 4: Trong CSS, thuộc tính background-color được sử dụng để làm gì?
A. Định dạng màu viền
B. Định dạng màu nền
C. Định dạng màu chữ
D. Định dạng cỡ chữ
Hướng dẫn giải
Đáp án: B
Giải thích: Thuộc tính background-color trong CSS được sử dụng để thiết lập màu nền cho các phần tử HTML.
Câu 5: Để áp dụng một màu cụ thể cho tất cả các phần tử HTML trong trang, bạn sử dụng bộ chọn CSS nào?
A. body
B. *
C. html
D. all
Hướng dẫn giải
Đáp án: B
Giải thích: Bộ chọn * trong CSS đại diện cho tất cả các phần tử HTML trong trang, áp dụng các định dạng cho tất cả các phần tử nếu chưa được định dạng bởi bất kỳ mẫu CSS nào khác.
Câu 6: Hệ màu nào được sử dụng trong CSS để biểu diễn màu sắc bằng ba giá trị số từ 0 đến 255?
A. CMYK
B. RGB
C. HSL
D. HEX
Hướng dẫn giải
Đáp án: B
Giải thích: Hệ màu RGB sử dụng ba giá trị số (R – Red, G – Green, B – Blue) từ 0 đến 255 để biểu diễn màu sắc.
Câu 7: Thuộc tính CSS nào được sử dụng để định dạng màu chữ?
A. background-color
B. color
C. border
D. font-color
Hướng dẫn giải
Đáp án: B
Giải thích: Thuộc tính color trong CSS được sử dụng để thiết lập màu sắc cho văn bản
Câu 8: Trong hệ màu HSL, giá trị nào biểu thị độ bão hòa của màu?
A. H (Hue)
B. S (Saturation)
C. L (Lightness)
D. A (Alpha)
Hướng dẫn giải
Đáp án: B
Giải thích: S (Saturation) trong hệ màu HSL biểu thị độ bão hòa hay độ đậm đặc của màu, từ 0
Câu 9: Thuộc tính CSS nào sau đây không có tính kế thừa?
A. color
B. background-color
C. border
D. font-size
Hướng dẫn giải
Đáp án: C
Giải thích: Trong CSS, thuộc tính border không có tính kế thừa, nghĩa là nó không tự động áp dụng cho các phần tử con.
Câu 10: Mã màu hexa #ff0000 biểu thị màu gì trong hệ RGB?
A. Màu xanh lá cây
B. Màu xanh dương
C. Màu đỏ
D. Màu đen
Hướng dẫn giải
Đáp án: C
Giải thích: Mã màu hexa #ff0000 biểu thị màu đỏ, với giá trị R (Red) là 255, G (Green) và B (Blue) là 0.
II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai
Câu 1: Phát biểu sau đây đúng hay sai về Hệ màu CSS và các thuộc tính màu?
a) Hệ màu RGB sử dụng ba giá trị từ 0 đến 255 để biểu diễn màu sắc.
b) Mã màu hexa #rrggbb trong CSS biểu diễn màu sắc bằng hệ thập phân.
c) Hệ màu HSL trong CSS có ba thành phần: Hue, Saturation, và Brightness.
d) Thuộc tính background-color được sử dụng để thiết lập màu chữ.
Hướng dẫn giải
a) Đúng: Hệ màu RGB sử dụng ba giá trị số từ 0 đến 255 để biểu diễn màu sắc cho các kênh đỏ (Red), xanh lá (Green), và xanh dương (Blue).
b) Sai: Mã màu hexa #rrggbb sử dụng hệ đếm cơ số 16 (hexa) để biểu diễn màu sắc, không phải hệ thập phân.
c) Sai: Hệ màu HSL bao gồm ba thành phần: Hue (Sắc độ), Saturation (Độ bão hòa), và Lightness (Độ sáng). Không có thành phần Brightness.
d) Sai: Thuộc tính background-color được sử dụng để thiết lập màu nền, không phải màu chữ. Màu chữ được thiết lập bằng thuộc tính color.
Câu 2: Đánh dấu đúng hay sai về các bộ chọn CSS và ứng dụng của chúng?
a) Bộ chọn div p áp dụng định dạng cho tất cả các phần tử <p> là con trực tiếp của <div>.
b) Bộ chọn div > p áp dụng định dạng cho các phần tử <p> là con trực tiếp của <div>.
c) Bộ chọn em + strong áp dụng định dạng cho phần tử <strong> ngay sau phần tử <em>.
d) Bộ chọn h1 ~ p áp dụng định dạng cho tất cả các phần tử <p> sau phần tử <h1>, không cần phải là con trực tiếp của nó.
Hướng dẫn giải
a) Sai: Bộ chọn div p áp dụng định dạng cho tất cả các phần tử <p> là con cháu của <div>, không nhất thiết phải là con trực tiếp.
b) Đúng: Bộ chọn div > p áp dụng định dạng cho các phần tử <p> là con trực tiếp của <div>.
c) Đúng: Bộ chọn em + strong áp dụng định dạng cho phần tử <strong> ngay sau phần tử <em>, nghĩa là hai phần tử này liền kề nhau.
d) Đúng: Bộ chọn h1 ~ p áp dụng định dạng cho tất cả các phần tử <p> sau phần tử <h1>, không cần phải là con trực tiếp của nó.
PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3
Câu 1: Hệ màu RGB trong CSS có thể biểu diễn bao nhiêu màu khác nhau?
Hướng dẫn giải
Đáp án: 16,777,216 màu
Giải thích: Hệ màu RGB trong CSS sử dụng ba kênh màu (Red, Green, Blue), mỗi kênh có giá trị từ 0 đến 255. Số lượng màu có thể biểu diễn là 256×256×256=16,777,216256 \times 256 \times 256 = 16,777,216256×256×256=16,777,216 màu.
Câu 2: Hệ màu HSL trong CSS có những thành phần nào và ý nghĩa của chúng là gì?
Hướng dẫn giải
Đáp án: Hệ màu HSL bao gồm ba thành phần: Hue (Sắc độ), Saturation (Độ bão hòa), và Lightness (Độ sáng).
Giải thích: Hue (Sắc độ) được đo bằng độ từ 0 đến 360, xác định vị trí của màu trên vòng tròn màu.
Saturation (Độ bão hòa) là mức độ màu sắc từ 0
Lightness (Độ sáng) đo độ sáng của màu từ 0
Câu 3: CSS hỗ trợ bao nhiêu tên màu chuẩn trong các phiên bản CSS2 và CSS3?
Hướng dẫn giải
Đáp án: CSS2 hỗ trợ 16 tên màu chuẩn, còn CSS3 mở rộng lên 140 tên màu.
Giải thích: Trong CSS2, chỉ có 16 tên màu chuẩn như black, gray, white, red, green, v.v.
CSS3 mở rộng danh sách này lên 140 tên màu, bao gồm nhiều màu sắc khác nhau để tiện lợi trong việc thiết kế giao diện.
Phần 2. Lý thuyết Tin học 10 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
HTML và CSS hỗ trợ hệ màu theo mẫu RGB (R – red, G – green, B – blue). 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à 28 × 28 × 28 = 224 = 16 777 216 màu.
Mỗi giá trị màu được thiết lập bởi một trong các cách sau:
– rgb(x-red, x-green, x-blue), trong đó x-red, x-green, x-blue có thể nhận các giá trị độc lập từ 0 đến 255.
– rgb(x-red
trăm của 255.
– #rrggbb, trong đó rr, gg, bb là giá trị trong hệ đếm hexa (hệ đếm cơ số 16).
b) Hệ mẫu HSL
Hệ màu HSL trong HTML và CSS bao gồm ba thành phần:
– H (Hue): Vòng tròn màu với giá trị từ 0 đến 360 độ.
– S (Saturation): Độ bão hòa hay độ đậm đặc của màu, từ 0
-L (Lightness): Độ sáng, từ 0
c) Các tên mẫu có sẵn trong CSS
CSS hỗ trợ thiết lập màu bằng các hàm `rgb()` và `hsl()`, cũng như các tên màu chuẩn để dễ sử dụng.
– CSS2 thiết lập 16 tên màu chuẩn (không phân biệt chữ hoa chữ thường), ví dụ: black, gray, white, red, green, orange, yellow, purple, blue, lime, v.v.
– CSS3 mở rộng với 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.
– hsl(h, 0
Các phần tử HTML có thể được tô màu bằng các thuộc tính sau:
– color: Định dạng màu chữ (màu nổi).
– background-color: Định dạng màu nền.
– border: Định dạng màu khung viền quanh phần tử.
Kết quả áp dụng hai CSS trên có thể như Hình 15.3.
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.
CSS hỗ trợ định dạng màu chữ bằng thuộc tính color, màu nền bằng thuộc tính background-color và màu khung viền bằng thuộc tính border.
2. Thiết lập bộ chọn là tổ hợp các phần tử có quan hệ
Bảng 15.1 mô tả chi tiết, ý nghĩa và ví dụ áp dụng cho các trường hợp định dạng CSS có dạng là tổ hợp các phần tử có quan hệ với nhau:
Một số ví dụ minh họa cho các trường hợp của bảng 15.1:
a) Ví dụ minh họa cho trường hợp E F:
Với định dạng div p {color: blue;} áp dụng cho trang HTML sau, ta thấy đoạn văn bản đầu tiên là phần tử con của div, đoạn thứ hai là phần tử con của body, do vậy mẫu định dạng trên chỉ áp dụng cho phần tử p đầu tiên (Hình 15.4).
b) Ví dụ minh hoạ cho trường hợp E > F
Giả sử định dạng p ) em {color: red; } áp dụng cho văn bản sau. Trong đoạn văn bản này có hai phần tử em, nhưng chỉ phần tử em thứ hai là con trực tiếp của p, do đó định dạng trên chỉ áp dụng cho phần tử em thứ hai (Hình 15.5)
c) Ví dụ minh hoạ cho trường hợp E + F
Xét định dạng em + strong {color: red; }. Trong văn bản sau có một phần tử strong liền kề với phần tử em và cả hai đều là con trực tiếp của p, do đó mẫu định dạng trên sẽ áp dụng cho phần tử strong (Hình 15.6).
3. Thực hành
Nhiệm vụ: Tạo trang HTML và định dạng CSS
Yêu cầu:
– Thiết lập trang HTML và định dạng CSS để thể hiện văn bản sau chính xác và đẹp
Lợi ích của CSS:
– Trình bày chính xác. Có thể điều khiển chính xác cách trang web hiển thị cũng như khi in ra máy in.
– Tiết kiệm công sức đáng kể. Bạn có thể thay đổi lại hoàn toàn cách trang trí, định dạng, trình bày một trang hoặc cả một website chỉ bằng việc chỉnh sửa và thay đổi một tệp CSS duy nhất.
– Điều khiển hiển thị đa dạng. CSS cho phép điều khiển định dạng trên các phương tiện máy tính khác nhau, từ máy tính màn hình lớn cho đến các thiết bị di động nhỏ.
– Tiếp cận trình bày theo ngữ nghĩa văn bản. CSS cho phép trình bày nội dung không theo cú pháp logic giống như các ngôn ngữ lập trình bình thường mà cho phép thay đổi, điều khiển việc trang trí, trình bày theo ngữ nghĩa ngôn ngữ của nội dung văn bản.
Hướng dẫn:
Bước 1. Nhập văn bản trên thành tập html. Có thể thiết lập các phần tử HTML như sau:
– Bốn ý chính của lợi ích CSS được trình bày bằng cặp thẻ <ul><li>.
– Các câu đầu in đậm của các ý chính dùng thẻ <strong>.
– Các cụm từ in nghiêng dùng thẻ xem).
Bước 2. Viết ra các yêu cầu trình bày trang web, ví dụ:
– Tiêu đề chữ màu đỏ.
– Nội dung chính dùng dấu đầu dòng, không có thứ tự để trình bày. – Các dòng của danh sách có chiều cao dòng bằng 1,5 bình thường.
– Dòng chữ nhấn mạnh đầu dòng để màu xanh đậm.
– Các cụm từ nhấn mạnh bên trong các dòng dùng màu đỏ, chữ nghiêng.
Bước 3. Thiết lập các mẫu định dạng CSS.
Xem thêm các bài trắc nghiệm Tin học 12 Kết nối tri thức hay, chi tiết khác:
Trắc nghiệm Bài 14: Định dạng văn bản bằng CSS
Trắc nghiệm Bài 15: Tạo màu cho chữ và nền
Trắc nghiệm Bài 16: Định dạng khung
Trắc nghiệm Bài 17: Các mức ưu tiên của bộ chọn
Trắc nghiệm Bài 18: Thực hành tổng hợp thiết kế trang web
Trắc nghiệm Bài 19: Dịch vụ sửa chữa và bảo trì máy tính