Tin 12 - Bài 15 - KNTT

Tin 12 - HK2 - Bài 15 - KNTT - Năm học 2024 - 2025

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 CSSa) Hệ màu RGB

1 HỆ THỐNG MÀU CỦA CSSa) 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ừ

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

1 HỆ THỐNG MÀU CỦA CSSc) Các tên màu có sẵn trong CSSCSS2 – 16 màu

Các màu cơ bản thể hiện bằng hệ màu RGB và HSL:

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?

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

2 Trong hệ màu rgb có bao nhiêu màu thuộc màu xám?

1 HỆ THỐNG MÀU CỦA CSSThiết lập màu sắc cho trang web

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Ệ

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

body div

h1 p

h1 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

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

• 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)

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ả : 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ề)

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ả vẫn như cũ: dòng chữ “Tim Berners-Lee” và “CERN” vẫn

có màu đỏ (quan hệ con cháu)

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?

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

3 THỰC HÀNH

Nhiệm vụ : Tạo trang HTML và đị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

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 E3b) 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 E1b) 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 E3b) 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

T H A N K

YO U !