Tin học 12 · Định hướng Tin học ứng dụng

Bài 15. Tạo màu cho chữ và nền

SAU BÀI HỌC NÀY EM SẼ:

Các định dạng sau có thiết lập một màu không? Em có nhận xét gì về cách thiết lập màu này?

1 HỆ THỐNG MÀU CỦA CSS

Hoạt động 1

Cùng thảo luận và tìm hiểu hệ màu RGB hỗ trợ bởi HTML và CSS.

a) Hệ màu RGB

HTML và CSS hỗ trợ hệ màu theo mô hình RGB (R: red, G: green, B: blue). 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à 2^8 × 2^8 × 2^8 = 2^24 = 16 777 216 màu.

Mỗi giá trị màu được thiết lập bởi một trong các cách sau:

Hình 15.1. Một số hình ảnh tham số màu được thiết lập trong CSS
Hình 15.1. Một số hình ảnh tham số màu được thiết lập trong CSS

Màu trắng (white) rgb(100%, 100%, 100%) #ffffff

Hình 15.1. Một số hình ảnh tham số màu được thiết lập trong CSS
Hình 15.1. Một số hình ảnh tham số màu được thiết lập trong CSS
Hình 15.1. Một số hình ảnh tham số màu được thiết lập trong CSS
Hình 15.1. Một số hình ảnh tham số màu được thiết lập trong CSS

Hình 15.1. Một số hình ảnh tham số màu được thiết lập trong CSS

b) Hệ màu HSL

Một hệ màu khác mà HTML và CSS hỗ trợ là HSL (Hue, Saturation, Lightness). H (Hue) là vòng tròn màu với giá trị từ 0 đến 360. S (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à 0%. Ngược lại, màu sẽ đầy đủ nếu độ bão hoà 100%. L (Lightness) là độ sáng với giá trị từ 0% đến 100%. Với 0%, mức độ sáng là thấp nhất, màu sẽ là màu đen. Với 100%, độ sáng là lớn nhất, màu sẽ là màu trắng. Như vậy, đặt Lightness = 50% để có màu sáng đúng.

Hình 15.2. Mô hình hệ màu HSL với các tham số Hue, Saturation, Lightness và mô hình vòng tròn màu Hue với giá trị từ 0 đến 360
Hình 15.2. Mô hình hệ màu HSL với các tham số Hue, Saturation, Lightness và mô hình vòng tròn màu Hue với giá trị từ 0 đến 360
Hình 15.2. Mô hình hệ màu HSL với các tham số Hue, Saturation, Lightness và mô hình vòng tròn màu Hue với giá trị từ 0 đến 360
Hình 15.2. Mô hình hệ màu HSL với các tham số Hue, Saturation, Lightness và mô hình vòng tròn màu Hue với giá trị từ 0 đến 360

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 chuẩn để dễ dàng cho việc sử dụng. Tên màu không phân biệt chữ hoa chữ thường.

Ví dụ một số tên màu có sẵn: black, gray, white, red, green, orange, yellow, purple, blue, lime.

Phiên bản CSS3 đã thiết lập 140 tên màu.

Hệ màu trên trang web được hỗ trợ bởi HTML và CSS chủ yếu là hệ màu RGB. Ngoài ra có thể sử dụng hệ màu HSL hoặc các tên màu có sẵn.

Lưu ý: Các màu xám (hay trắng, đen) có thể được thiết lập theo các cách sau:

Hoạt động 2

Cùng thảo luận về cách thiết lập màu trong các mẫu CSS và trả lời các câu hỏi sau:

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:

Ví dụ:

h1 {color: lightgreen;}
h1 {color: red; background-color: lightgreen; border: 2px solid magenta;}
em {background-color: lightgreen; border: 1px solid red;} p {color: blue;}

Kết quả áp dụng hai CSS trên có thể như Hình 15.3.

Hình 15.3. Kết quả áp dụng CSS định dạng màu
Hình 15.3. Kết quả áp dụng CSS định dạng màu

CSS hỗ trợ định dạng màu chữ bằng thuộc tính color, màu nền bằng thuộc tính background-color và màu khung viền bằng thuộc tính border.

Lưu ý: Các thuộc tính định dạng màu chữ và màu nền đều có tính kế thừa, riêng thuộc tính 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Ệ

Từ trước đến nay chúng ta chỉ xem xét các mẫu định dạng CSS với bộ chọn là các phần tử độc lập, riêng biệt. Trong hoạt động này, chúng ta sẽ tìm hiểu các mẫu định dạng với bộ chọn là các phần tử có liên quan đến nhau. Các định dạng này có rất nhiều ứng dụng trên thực tế. Các định dạng này có thể hiểu là được áp dụng trên các phần tử với điều kiện nhất định.

Hoạt động 3

Quan sát, trao đổi và thảo luận về 4 trường hợp bộ chọn là tổ hợp các phần tử, nêu ý nghĩa và sự khác biệt giữa các trường hợp này: E F, E > F, E + F và E ~ F.

Bảng 15.1 mô tả chi tiết ý nghĩa và ví dụ áp dụng cho các trường hợp định dạng CSS có dạng là tổ hợp các phần tử có quan hệ với nhau. Sau đây là một số ví dụ minh hoạ cho các trường hợp của Bảng 15.1.

Bộ chọnÝ nghĩaVí dụ
E FQuan hệ con cháu. Áp dụng cho các con/cháu của E, tức là E phải ở phía trên F trong cây HTML.div p {color: blue;} Áp dụng cho các phần tử p với điều kiện p là con/cháu của div.
E > FQuan hệ cha con trực tiếp. Áp dụng cho phần tử con của E.p > em {color: red;} Áp dụng cho các phần tử em với điều kiện em là phần tử con của p.
E + FF kề ngay sau E, E và F phải có cùng phần tử cha.em + strong {color: red;} Áp dụng cho phần tử strong nếu strong đứng liền kề ngay sau em.
E ~ FQuan hệ anh em. Áp dụng cho các phần tử F là phần tử đứng sau không cần liên tục với E, E và F có cùng phần tử cha.em ~ strong {color: red;} Áp dụng cho phần tử strong nếu strong đứng sau em.

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

Với định dạng div p {color: blue;} áp dụng cho trang HTML sau, ta thấy đoạn văn bản đầu tiên là phần tử con của div, đoạn thứ hai là phần tử con của body; do vậy mẫu định dạng trên chỉ áp dụng cho phần tử p đầu tiên (Hình 15.4).

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

b) Kết quả hiển thị trên trình duyệt

Giả sử định dạng p > em {color: red;} áp dụng cho văn bản sau. 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, do đó định dạng trên chỉ áp dụng cho phần tử em thứ hai (Hình 15.5).

<body> <h1> Lịch sử CSS </h1> <p> Ý tưởng của CSS do kĩ sư <span><em>Hakon Wium Lie</em></span> người Na Uy, thiết lập năm 1994 trong khi làm việc với <em>Tim Berners-Lee</em> tại viện hạt nhân CERN </p> </body>
Hình 15.5. Ví dụ sử dụng bộ chọn E > F
Hình 15.5. Ví dụ sử dụng bộ chọn E > F

Hình 15.5. Ví dụ sử dụng bộ chọn E > F

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

Xét định dạng em + strong {color: red;}. Trong văn bản sau 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, do đó mẫu định dạng trên sẽ áp dụng cho phần tử strong (Hình 15.6).

<body> <h1> Lịch sử CSS </h1> <p> Ý tưởng của CSS do kĩ sư <em>Hakon Wium Lie</em> người Na Uy, thiết lập năm 1994 trong khi làm việc với <strong>Tim Berners-Lee</strong> tại viện hạt nhân <em>CERN</em> </p> </body>

Hình 15.6

Với định dạng em ~ strong {color: red;}, văn bản sau có hai phần tử strong đều nằm phía sau của phần tử em, do đó mẫu định dạng trên sẽ áp dụng cho cả hai phần tử strong (Hình 15.7).

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

<body> <h1> Lịch sử CSS </h1> <p> Ý tưởng của CSS do kĩ sư <em>Hakon Wium Lie</em> người Na Uy, thiết lập năm 1994 trong khi làm việc với <strong>Tim Berners-Lee</strong> tại viện hạt nhân <strong>CERN</strong> </p> </body>

Lịch sử CSS

Ý tưởng của CSS do kĩ sư Hakon Wium Lie, người Na Uy thiết lập năm 1994 trong khi làm việc với Tim Berners-Lee tại viện hạt nhân CERN.

a) Mã HTML

b) Kết quả hiển thị trên trình duyệt

Hình 15.7. Ví dụ sử dụng bộ chọn E ~ F

Quan hệ E, F trong các trường hợp trên có thể mô tả như trong các sơ đồ sau:

CSS hỗ trợ các kiểu bộ chọn là tổ hợp các phần tử quan hệ dạng: E F, E > F, E + F và E ~ F

Lịch sử CSS

Ý tưởng của CSS do kĩ sư Hakon Wium Lie, người Na Uy thiết lập năm 1994 trong khi làm việc với Tim Berners-Lee tại viện hạt nhân CERN.

b) Kết quả hiển thị trên trình duyệt

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 chính xác và đẹp:

LỢI ÍCH CỦA CSS

Sử dụng CSS mang lại rất nhiều tiện ích và hiệu quả trong công việc. Sau đây là một vài nguyên nhân chính khi sử dụng mẫu định dạng CSS để trình bày trang web:

Hướng dẫn:

Bước 1. Nhập văn bản trên thành tệp HTML. Có thể thiết lập các phần tử HTML như sau:

Bước 2. Viết ra các yêu cầu trình bày trang web, ví dụ:

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

h1 {color: red;} li {line-height: 1.5;} strong {color: blue;} strong em {color: red;}
<style> </style>

LUYỆN TẬP

VẬN DỤNG