BÀI 15.
TẠO MÀU CHO
CHỮ VÀ NỀN

Sử dụng CSS để thiết lập màu cho chữ và nền

1. HỆ THỐNG MÀU CỦA CSS
a) Hệ màu RGB
(255, 0, 0)

• Hệ màu RGB: hệ màu kết hợp
từ ba màu cơ bản Red (R),
Green (G) và Blue (B).
• Mỗi màu là tổ hợp gồm 3 giá
trị (R, G, B)
• Mỗi giá trị nằm trong khoảng
0 – 255 (8 bit)
• Tổng số màu: 28 x 28 x 28 = 224
= 16 777 216

(255, 255, 0)

(255, 0, 255)

(0, 255, 0)

(0, 0, 255)
(0, 255, 255)

1. HỆ THỐNG MÀU CỦA CSS
a) Hệ màu RGB
• Hệ màu RGB: hệ màu kết hợp
từ ba màu cơ bản Red (R),
Green (G) và Blue (B).
• Mỗi màu là tổ hợp gồm 3 giá
trị (R, G, B)
• Mỗi giá trị nằm trong khoảng
0 – 255 (8 bit)
• Tổng số màu: 28 x 28 x 28 = 224
= 16 777 216

1. HỆ THỐNG MÀU CỦA CSS
a) Hệ màu RGB
Các cách thiết lập màu RGB:
• rgb(x-red, x-green, x-blue):
rgb(255, 165, 0)
• rgb(x-red%, x-green%, x-blue%):
rgb(100%, 65%, 0%)
• #rrggbb:
#FFA500

1. HỆ THỐNG MÀU CỦA CSS
a) Hệ màu RGB

1. HỆ THỐNG MÀU CỦA CSS
b) Hệ màu HSL
• Hệ màu HSL: hệ màu được tạo
thành từ 3 yếu tố Hue (vùng
màu), Saturation (độ bão hòa) và
Lightness (độ sáng)

1. HỆ THỐNG MÀU CỦA CSS
b) Hệ màu HSL
• Hue: vòng tròn màu với giá trị từ
0 đến 360
• Saturation: độ bão hòa hay độ
đậm đặc của màu với giá trị từ
0% đến 100%, màu biến mất ở
0% (chuyển sang xám) và đầy đủ
nhất ở 100%
• Lightness: độ sáng với giá trị từ
0% đến 100%, độ sáng thấp nhất
ở 0% (màu đen) và lớn nhất ở
100% (màu trắng), và màu đúng
nhất ở 50%

0

100

0

100

1. HỆ THỐNG MÀU CỦA CSS
b) Hệ màu HSL
Các cách thiết lập màu HSL:
• hsl(x-hue, x-saturation%, x-lightness%):

0

100

0

100

1. HỆ THỐNG MÀU CỦA CSS
b) Hệ màu HSL
Các cách thiết lập màu HSL:
• hsl(x-hue, x-saturation%, x-lightness%):

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. HỆ THỐNG MÀU CỦA CSS
c) Các tên màu có sẵn trong CSS
CSS2 – 16 màu
CSS3 – 140 màu
•
•
•
•
•
•
•
•
•
•

White
Grey
Brown
Blue
Green
Purple
Yellow
Orange
Pink
Red

1. Các màu cơ bản red, yellow, green, blue, magenta, cyan
được thể hiện bằng hàm hsl như thế nào?
Các màu cơ bản thể hiện bằng hệ màu RGB và HSL:
Màu
red
green
blue
yellow
cyan
magenta

RGB
(255, 0, 0)
(0, 255, 0)
(0, 0, 255)
(255, 255, 0)
(0, 255, 255)
(255, 0, 255)

HSL
(0, 100%, 50%)
(120, 100%, 50%)
(240, 100%, 50%)
(30, 100%, 50%)
(180, 100%, 50%)
(300, 100%, 50%)

2. Trong hệ màu rgb có bao nhiêu màu thuộc màu xám?
• Trong hệ màu RGB, màu xám được đại diện bởi các giá trị R, G, B
giống nhau. Cụ thể, nếu giá trị đỏ (red), xanh lá cây (green) và xanh
dương (blue) đều bằng nhau, chúng ta sẽ có một màu xám. Vì mỗi
kênh màu có 256 giá trị từ 0 đến 255, nên có tổng cộng 256 màu
xám khác nhau trong hệ màu RGB.

1. HỆ THỐNG MÀU CỦA CSS
Thiết lập màu sắc cho trang web
Màu chữ
Màu nền
Màu khung viền
Lưu ý:
Thuộc tính border
không có tính kế
thừa.

1. Sửa lại CSS trong ví dụ trên, định dạng màu nền và khung
viền cho cụm từ Tim Berners-Lee với màu khác biệt.

2. Sửa lại CSS trên, thay đổi định dạng khung viền cho phần tử p. Em hãy
kiểm tra xem tính chất này có kế thừa cho các phần tử con không.

2. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ

2. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ
a) Ví dụ minh họa cho trường hợp E F
body
div
h1

h1

p

p

E F

- Quan hệ con cháu
- F là phần tử con hoặc cháu của E
- Áp dụng cho phần F

2. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ
b) Ví dụ minh họa cho trường hợp E > F
body
h1

p
span

em

em

E>F

- Quan hệ cha con trực tiếp
- F là phần tử con của E
- Áp dụng cho phần F

2. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ
c) Ví dụ minh họa cho trường hợp E + F
body
h1

p

em

strong

em

E+F

- Quan hệ anh em liền kề
- F là phần tử liền kề ngay sau
E - E và F có cùng phần tử cha
- Áp dụng cho phần F

2. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ
d) Ví dụ minh họa cho trường hợp E ~ F
body
h1

p

em

strong

strong

E~F

- Quan hệ anh em
- F là phần tử đứng sau E,
- E và F có cùng phần tử cha
- Áp dụng cho phần F

1. Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng
p > strong thì kết quả sẽ như thế nào?
• Kết quả vẫn như cũ: dòng chữ “Tim Berners-Lee” và “CERN” vẫn
có màu đỏ (quan hệ cha con trực tiếp)

2. Trong ví dụ ở Hình 15.7 nếu thay mẫu em ~ strong bằng
em + strong thì kết quả sẽ như thế nào?
• Kết quả : dòng chữ “Tim Berners-Lee” vẫn có màu đỏ, còn “CERN”
không còn màu đỏ nữa (quan hệ anh em liền kề)

3. Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng
p strong thì kết quả sẽ như thế nào?
• Kết quả vẫn như cũ: dòng chữ “Tim Berners-Lee” và “CERN” vẫn
có màu đỏ (quan hệ con cháu)

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:

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:

3. THỰC HÀNH
Nhiệm vụ : Tạo trang HTML và định dạng CSS

Bước 1. Nhập văn bản thành tệp html và thiết lập các phần tử html

3. THỰC HÀNH
Nhiệm vụ : Tạo trang HTML và định dạng CSS

Bước 2. Viết ra các yêu cầu trình bày trang web

3. THỰC HÀNH
Nhiệm vụ : Tạo trang HTML và định dạng CSS

Bước 3. Thiết lập các mẫu định dạng CSS

LUYỆN TẬP
1. Thiết lập hệ màu cơ bản (17 màu của CSS2.1) theo bộ ba tham số R, G,
B.

LUYỆN TẬP
2. Khi nào các mẫu định dạng E F và E > F có tác dụng như
nhau?
• Các mẫu định dạng E F và E > F có tác dụng như nhau khi F là phần tử
con trực tiếp của E

VẬN DỤNG
1. Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:
a) E1 E2 E3
b) E1 > E2 > E3

a) E1 E2 E3: mẫu định dạng sẽ áp dụng cho phần tử E3, nếu E3 là con hoặc
cháu của E2 và E2 là con hoặc cháu của E1
b) E1 > E2 > E3: mẫu định dạng sẽ áp dụng cho phần tử E3, nếu E3 là con
trực tiếp của E2 và E2 là con trực tiếp của E1

VẬN DỤNG
1. Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:
a) E1 E2 E3
b) E1 > E2 > E3

VẬN DỤNG
2. Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:
a) E + F + G.
b) E > F + G

a) E + F + G: mẫu định dạng sẽ áp dụng cho phần tử G, nếu G có phần tử
liền kề bên trái là F, F lại có phần tử liền kề bên trái là E. Tức là E, F, G
phải là 3 phần tử liền kề nhau.
b) E > F + G: mẫu định dạng sẽ áp dụng cho phần tử G, nếu G có phần tử
liền kề bên trái là F và cả F, G đều là phần tử con trực tiếp của E.

VẬN DỤNG
2. Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:
a) E + F + G.
b) E > F + G

THANK
YOU!