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

Khám phá hệ thống màu trong CSS và cách thiết lập màu chữ, màu nền, màu viền. Bài học cũng giới thiệu bộ chọn tổ hợp các phần tử có quan hệ để áp dụng màu sắc linh hoạt trong trang web.

🎯 Mục tiêu bài học

Sử dụng được CSS để thiết lập màu chữ, màu nền, màu khung viền.
Hiểu các hệ màu trong CSS và cách chọn phần tử có quan hệ.

1. Hệ thống màu của CSS

a) Hệ màu RGB

Màu được xác định bởi 3 giá trị: R (Red), G (Green), B (Blue).
Mỗi giá trị từ 0 → 255 ⇒ tổng cộng 16 777 216 màu.
Cách biểu diễn: rgb(r, g, b), rgb(r%, g%, b%), #rrggbb (hệ hexa).

Ví dụ RGB:

Trắng: rgb(255,255,255) – #ffffff
Đen: rgb(0,0,0) – #000000
Xám: rgb(x,x,x)

b) Hệ màu HSL

H (Hue): sắc màu (0°–360°).
S (Saturation): độ bão hòa (0%–100%).
L (Lightness): độ sáng (0%–100%).
Cách biểu diễn: hsl(h, s%, l%).
Màu xám: hsl(h, 0%, l%).

c) Tên màu có sẵn trong CSS

CSS2: 16 tên màu chuẩn (red, blue, black, white,…).
CSS3: 140 tên màu.
Tên màu không phân biệt chữ hoa – thường.

2. Thiết lập màu chữ và màu nền bằng CSS

color → thiết lập màu chữ.
background-color → thiết lập màu nền.
border → thiết lập màu khung viền.

📌 Lưu ý:

color, background-color có tính kế thừa.
border không có tính kế thừa.

3. Thiết lập bộ chọn là tổ hợp các phần tử có quan hệ

Bộ chọn và ý nghĩa:

E F: F là con/cháu của E.
E > F: F là con trực tiếp của E.
E + F: F là anh em liền kề ngay sau E.
E ~ F: F là anh em phía sau E (không cần liền kề).

RGB HSL color background-color combinator