Nội dung chính Khoa học máy tính 12 kết nối bài 15: Tạo màu cho chữ và nền

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

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

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

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.

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.

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

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

 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Ệ

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

- Đoạn văn bản đầu tiên là phần tử con của div.

- Đoạn văn bản thứ hai là phần tử con của body. Mẫu định dạng chỉ áp dụng cho phần tử p đầu tiên.

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

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. 

Mẫu định dạng chỉ áp dụng cho phần tử em thứ hai.

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

Trong văn bản 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.

Mẫu định dạng sẽ áp dụng cho phần tử strong.

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

Văn bản có hai phần tử strong đều nằm phía sau của phần tử em, do đó mẫu định dạng sẽ áp dụng cho cả hai phần tử strong.