Lý thuyết Tin học 12 Bài 15 (Kết nối tri thức): Tạo màu cho chữ và nền

Lý thuyết Tin học 12 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%, x-green%, x-blue%), trong đó các tham số biểu thị giá trị phần

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% (màu xám) đến 100% (màu đầy đủ).

-L (Lightness): Độ sáng, từ 0% (đen) đến 100% (trắng). Đặt lightness = 50% để có màu đúng.

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%, x%)`khi tham số saturation bằng 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.

$\to$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.

Trắc nghiệm Tin học 12 Bài 15: Tạo màu cho chữ và nền

PHẦ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: 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

Câu 2: 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

Câu 3: 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)

Câu 4: 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

Câu 5: 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

Câu 6: 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

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

Câu 8: Để 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;

Câu 9: 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ữ

Câu 10: Để á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

PHẦN 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ữ.

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

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?

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

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?

Xem thêm