Mục tiêu kiến thức cần đạt: Cách thiết lập hệ thống màu của CSS; Các thuộc tính màu sắc của định dạng CSS; Bộ chọn CSS dạng tổ hợp các phần tử có quan hệ và ý nghĩa của các bộ chọn này.
1. Hệ thống màu của CSS
a. Hệ màu RGB (red, green, blue)
Có 3 cách để thiết lập màu trong hệ màu RGB
rgb(x-red, x-green, x-blue), trong đó các thông số x-red, x-green, x-blue nhận giá trị từ 0-255rgb(x-red%, x-green%, x-blue%), trong đó các thông số là giá trị % của 255#rrggbb, trong đó rr, gg, bb là giá trị trong hệ đếm hexa (cơ số 16)
b. Hệ màu HSL (Hue, Saturation, Lightness)
HSL giúp chúng ta mô tả màu sắc thông qua 3 thuộc tính chính:
- Hue (Sắc độ): Đây là màu cơ bản của một màu sắc, được biểu diễn bằng một góc trên vòng tròn màu. Ví dụ, 0 độ là màu đỏ, 120 độ là màu xanh lá, 240 độ là màu xanh dương.
- Saturation (Độ bão hòa): Chỉ mức độ đậm nhạt của màu sắc. Khi độ bão hòa bằng 100%, màu sẽ ở dạng nguyên bản, đậm nét nhất.
- Lightness (Độ sáng): Xác định độ sáng tối của màu sắc. Khi độ sáng bằng 0%, màu sẽ là màu đen. Khi độ sáng bằng 100%, màu sẽ là màu trắng. Để có màu sắc trung tính, đặt độ sáng bằng 50%.
c. Các tên màu có sẵn trong CSS
Bảng 16 màu có tên trong CSS2:
Với phiên bản CSS3 hỗ trợ 140 màu có tên.
d. Các thuộc tính màu trong CSS
Các thuộc tính để tô màu cho phần tử trong HTML:
color: định dạng màu chữbackground-color: màu nềnborder: màu khung viền quanh phần tử
Ví dụ: phần tử h1 được định dạng màu chữ, màu nền và màu khung viền
h1 {
color: red;
background-color: lightgreen;
boder: 2px solid magenta;
}Lưu ý: Các thuộc tính định dạng màu chữ và màu nền có tính kế thừa, riêng thuộc tính khung viền (border) không có tính kế thừa.
2. Thiết lập bộ chọn (là tổ hợp các phần tử có quan hệ)
Với bộ chọn là các phần tử độc lập, thì các định dạng sẽ áp dụng cho tất cả các phần tử.
Với các mẫu định dạng bộ chọn là các phần tử có liên quan đến nhau, chỉ áp dụng trên các phần tử với điều kiện nhất định. Đây là các định dạng có nhiều ứng dụng trong thực tế.
Có 4 bộ chọn là tổ hợp các phần tử như sau:
a. Trường hợp E F (quan hệ con cháu)
Áp dụng cho phần tử F, với điều kiện F phải là con hoặc cháu của E.
Ví dụ sau đây áp dụng định dạng chữ màu xanh dương cho phần tử p là con hoặc cháu của phần tử div
div p {color: blue;}b. Trường hợp E > F (quan hệ cha con trực tiếp)
Áp dụng cho phần tử F, với điều kiện F là con trực tiếp của E.
Ví dụ định dạng màu chữ đỏ cho phần tử em là con trực tiếp (không phải cháu) của phần tử p
p > em {color: red;}c. Trường hợp E + F (quan hệ anh em liền kề)
Áp dụng cho phần tử F, với điều kiện F là phần tử liền kề ngay sau E và cả 2 phải cùng phần tử cha.
Vì dụ định dạng màu chữ cho phần tử strong là phần tử liền kề sau của phần tử em, cả 2 phần tử đề là con trực tiếp của cùng một phần tử cha
em + strong {color: red;}d. Trường hợp E ~ F (quan hệ anh em)
Áp dụng cho phần tử F, với điều kiện F là phần tử đứng sau và không cần liên tục với E, cả 2 phải cùng phần tử cha.
Ví dụ: áp dụng định dạng màu chữ cho các phần tử strong nằm phía sau và có cùng phần tử cha với phần tử em
em ~ strong {color: red;}Hình mô tả các trường hợp quan hệ phần tử:
Ví dụ
Cùng xem ví dụ sau đây để hiểu rõ hơn về bộ chọn tổ hợp
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về các bộ chọn CSS</title>
<style>
/* Bộ chọn E F (con cháu) */
div p {
color: blue;
background-color: lightgray;
}
/* Bộ chọn E > F (cha con trực tiếp) */
div > span {
color: red;
border: 2px solid green;
}
/* Bộ chọn E + F (anh em liền kề) */
h2 + p {
color: purple;
}
/* Bộ chọn E ~ F (anh em) */
h2 ~ p {
color: orange;
}
</style>
</head>
<body>
<div>
<p>Đây là đoạn văn bên trong div.</p>
<span>Đây là span bên trong div.</span>
</div>
<h2>Tiêu đề 2</h2>
<p>Đoạn văn liền kề sau tiêu đề 2.</p>
<p>Một đoạn văn nữa sau tiêu đề 2.</p>
</body>
</html>Kết quả:
Câu hỏi trắc nghiệm dạng D1 và D2 Tin học 12 Bài 15. Tạo màu cho chữ và nền
Bảng xếp hạng
| Hạng | Họ tên | Điểm số | Thời gian |
|---|---|---|---|
| 1 |
Phan Kim Ngân
2 lần thi
|
100/100
|
44 giây |
| 2 |
Võ Thanh Sang
4 lần thi
|
100/100
|
44 giây |
| 3 |
Thanh Thuỳ
3 lần thi
|
100/100
|
51 giây |
| 4 |
Mai
2 lần thi
|
100/100
|
53 giây |
| 5 |
Phạm Thị Phương Oanh
2 lần thi
|
100/100
|
55 giây |
| 6 |
thị trinh
1 lần thi
|
100/100
|
57 giây |
| 7 |
Thành Quy
1 lần thi
|
100/100
|
59 giây |
| 8 |
.
7 lần thi
|
100/100
|
1 phút 2 giây |
| 9 |
Trần Ngọc Thư
5 lần thi
|
100/100
|
1 phút 2 giây |
| 10 |
Nguyễn Như Ý
1 lần thi
|
100/100
|
1 phút 5 giây |
| 11 |
Diệp Huỳnh Như
1 lần thi
|
100/100
|
1 phút 16 giây |
| 12 |
Lăng Trường Khả
4 lần thi
|
100/100
|
1 phút 20 giây |
| 13 |
Thúy Quyên
3 lần thi
|
100/100
|
1 phút 28 giây |
| 14 |
Nguyễn Xuyên Thành
3 lần thi
|
100/100
|
1 phút 29 giây |
| 15 |
Trần Ngọc Hào
1 lần thi
|
100/100
|
1 phút 30 giây |
| 16 |
Nguyễn Phước thiện
5 lần thi
|
100/100
|
1 phút 48 giây |
| 17 |
Nguyễn Hiếu Nghĩa
1 lần thi
|
100/100
|
2 phút 3 giây |
| 18 |
Đồng Đăng Khoa
1 lần thi
|
100/100
|
2 phút 6 giây |
| 19 |
Nguyễn Thành Đạt
2 lần thi
|
100/100
|
2 phút 11 giây |
| 20 |
Lê Trâm Anh
2 lần thi
|
100/100
|
3 phút 9 giây |
| 21 |
Võ Thị Yến Nhi
1 lần thi
|
100/100
|
3 phút 39 giây |
| 22 |
Dương Hoàng Trọng
1 lần thi
|
100/100
|
4 phút 17 giây |
| 23 |
A
1 lần thi
|
100/100
|
9 phút 14 giây |
| 24 |
Trần Quốc Minh
5 lần thi
|
99/100
|
1 phút 21 giây |
| 25 |
Cao Thị Cẩm Ly
8 lần thi
|
96/100
|
1 phút 7 giây |
| 26 |
Cao Uyên Nhi
1 lần thi
|
96/100
|
2 phút 41 giây |
| 27 |
Lê Như Mạnh
1 lần thi
|
96/100
|
3 phút 27 giây |
| 28 |
Võ Như Ngọc
2 lần thi
|
96/100
|
4 phút 14 giây |
| 29 |
Nguyễn Hữu Nghĩa
4 lần thi
|
93/100
|
1 phút 16 giây |
