Bài 31: HTML và CSS từ Zero đến Hero(Bài 08 CSS)

 

2.3       Màu sắc và nền

Phần này sẽ tìm hiểu các kiến thức, các thuộc tính liên quan đến màu sắc (color) và nền (background); tìm hiểu thêm một số bộ chọn mới; viết mã CSS ở một tập tin riêng biệt (external style sheet).

2.3.1       Xác định màu

Có hai cách phổ biến để xác định một màu, một là dùng các tên màu định sẵn và hai là dùng giá trị số.

Tên màu

Cách trực quan nhất để xác định một màu là dùng tên của nó. Tất nhiên, lập trình viên không thể sử dụng các tên màu tùy ý, mà chỉ được sử dụng các tên màu đã được đặc tả sẵn trong CSS. Cụ thể, CSS1 và CSS2 hỗ trợ 16 tên màu; CSS2.1 hỗ trợ 17 tên màu; CSS3 hỗ trợ 140 tên màu.

Ví dụ, một luật CSS có dùng tên màu,

p { color: gray; }

Xem hình minh họa một số tên màu,

Xem thêm các tên màu tại địa chỉ sau: https://www.w3schools.com/colors/colors_names.asp

Giá trị số

Xác định màu bằng tên tuy đơn giản nhưng lại bị giới hạn về số lượng màu. Vì vậy, mọi người hay sử dụng giá trị số để xác định một màu, đó là giá trị RGB của màu. Với giá trị RGB, có thể xác định hàng triệu màu khác nhau.

Ngoài hệ màu RGB, CSS cũng hỗ trợ hệ màu HSL. Tuy nhiên, do tính phổ biến và được trình duyệt hỗ trợ tốt hơn, nên phần này sẽ chỉ tập trung tìm hiểu hệ màu RGB.

Hệ màu RGB

Máy tính tạo ra các màu khác nhau bằng cách kết hợp ba màu cơ bản là: đỏ (red), xanh lá cây (green) và xanh da trời (blue). Phương pháp này có tên gọi là hệ màu RGB, là viết tắt của ba chữ Red, Green và Blue. Để tạo ra một màu bất kì, chỉ cần kết hợp ba màu cơ bản lại, với tỉ lệ nhất định.

Mỗi màu cơ bản có giá trị nằm trong khoảng từ 0 tới 255. Nếu ba màu cơ bản đều có giá trị là 0, ta sẽ có màu đen (black). Nếu ba màu cơ bản đều có giá trị là 255, ta sẽ có màu trắng (white).  

Như vậy, mọi điểm màu trên màn hình đều được mô tả bằng bộ ba giá trị RGB, ví dụ màu lavender sẽ có bộ ba giá trị là (200, 178, 230).

Xem hình minh họa về hệ màu RGB,

Chọn màu

Cách dễ nhất để chọn một màu và lấy được giá trị RGB của nó là sử dụng một công cụ xử lý ảnh bất kì, ví dụ Adobe Photoshop, Adobe Fireworks, hoặc Corel PaintShop Pro. Nếu không có các công cụ xử lý ảnh chuyên nghiệp, có thể dùng các công cụ để lấy màu và giá trị RGB đơn giản hoặc các công cụ trên mạng, ví dụ phần mềm ColorPic hoặc trang web colorpicker.com. Trong giao diện của các phần mềm lấy màu, giá trị RGB của mỗi màu sẽ nằm sau kí hiệu #.

Xem hình minh họa,

Các viết giá trị màu trong CSS

Có ba cách để viết giá trị màu RGB trong CSS, một là dùng giá trị hệ 10, hai là dùng %, ba là dùng giá trị hệ 16.

Dùng giá trị hệ 10

Bắt đầu là kí hiệu rgb, sau đó là ba giá trị hệ 10 của ba màu cơ bản, mỗi giá trị nằm trong khoảng từ 0 tới 255, ví dụ,

color: rgb(200, 178, 230);

Dùng giá trị %,

Bắt đầu là kí hiệu rgb, sau đó là ba giá trị % của ba màu cơ bản, giá trị % được tính bằng cách lấy giá trị hệ 10/255, ví dụ,

color: rgb(78%, 70%, 90%);

Dùng giá trị hệ 16

Bắt đầu là kí hiệu #, sau đó là ba giá trị hệ 16 của ba màu cơ bản, mỗi giá trị màu được biểu diễn bằng hai kí số hệ 16, ví dụ,

color: #C8B2E6;

Trong trường hợp giá trị của mỗi màu cơ bản là hai kí số giống nhau thì có thể viết rút gọn, ví dụ,

color: #FFCC00 hoặc color: #993366

thì có thể viết rút gọn thành,

color: #FC0 hoặc color: #936

Xem hình minh họa về giá trị màu hệ 16,

Màu RGBa

Màu RGBa cho phép xác lập một màu bất kì cùng với độ mờ của màu. Chữ a là viết tắt của alpha, được sử dụng để thiết lập độ mờ của màu, nếu a có giá trị 0: tương ứng với màu trong suốt hay mờ nhiều nhất (transparent), nếu a có giá trị 1: tương ứng với màu ít mờ nhất hay đậm đặc nhất (opaque).

Ví dụ, xem hình minh họa,