Thuộc tính Colors

05/05/2019

Bài sau » « Bài trước

Trong CSS, Thuộc tính color dùng để mô tả màu sắc cho văn bản, màu nền của thẻ HTML,... Ta sử dụng tên màu theo chuẩn quốc tế (red, green, blue,...) , hoặc theo các hệ màu RGB, RGBA, HEX, HSL, HSLA...

Tên màu - Color name

- Trong HTML, Ta có thể sử dụng color name để mô tả màu sắc. HTML hỗ trợ lên đến 140 tên màu. Tham khảo tại đây.

CSS Colors

Background color

- Bạn có thể chỉ định màu sắc làm màu background cho phần tử HTML.

- Cú pháp: background-color: tên màu | mã màu;

Hello world!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="background-color: blue;color: #fff;">Hello world!</div> <div style="background-color: tomato;color:#fff">Lorem ipsum....</div>

Text color

- Bạn có thể chỉ định màu sắc cho đoạn text.

- Cú pháp: color: tên màu | mã màu;

Hello world!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="color: blue;">Hello world!</div>
<div style="color:tomato;">Lorem ipsum....</div>

Border color

- Bạn có thể chỉ định màu sắc cho đường viền - border.

- Cú pháp: border: <độ rộng> <kiểu border> <tên màu | mã màu>;

Hello world!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="border:2px solid blue;">Hello world!</div>
<div style="border:2px solid tomato;">Lorem ipsum....</div>

Color values

- Trong HTML, màu sắc có thể được chỉ định bằng cách sử dụng các hệ màu RGB, RGBA, HSL, HEX, HSLA.

- Ví dụ: Cùng diễn dạt màu "tomato" nhưng ta có nhiều cách sử dụng như sau:

Hệ màu RGB cú pháp: background-color : rgb(255, 99, 71)
Hệ màu HEX cú pháp: background-color : #ff6347
Hệ màu HSL cú pháp: background-color : hsl(9, 100%, 64%)

- Hoặc với thuộc tính opacity:

Hệ màu RGBA cú pháp: background-color : rgba(255, 99, 71, 0.5)
Hệ màu HSLA cú pháp: background-color : hsla(9, 100%, 64%, 0.5)

RGB values

- Trong HTML, color có thể được chỉ định bằng hệ màu RGB. Cú pháp:

   rgb(red, green, blue)

- Mỗi tham số (red, green, blue) là một số nằm trong khoảng từ 0 - 255.

rgb(0,0,0)

RED

0

GREEN

0

BLUE

0

- Khi ta cho 3 giá trị của thuộc tính bằng nhau thì ta được bộ mã màu cho màu xám.

CSS Colors

RGBA Values

- RGBA là hệ màu mở rộng của RGB với tham số Alpha - Chỉ số Opacity của màu sắc. Cú pháp :

 rgba (red, green, blue, alpha)

- Alpha là tham số từ 0.0 (trong suốt) - 1.0 (không trong suốt).

Ví dụ : 

CSS Colors

HEX values

- Trong HTML, color có thể được chỉ định bằng hệ màu HEX (hệ thập lục phân). Cú pháp:

 #rrggbb

- Mỗi tham số rr (red), gg (green) , bb (blue) nằm trong khoảng từ 00 - ff 

CSS Colors

HSL values

- Trong HTML, color được chỉ định bằng hue, saturation, and lightness (HSL) value. Cú pháp:

 hsl (hue, saturation, lightness)

- Hue là độ trong vòng tròn màu 0 - 360. red là 0, green là 120, blue là 240.

- Saturation là phần trăm giá trị, 0% nghĩa là màu xám, 100% nghĩa là full màu.

- Lightness cũng là phần trăm, 0% là màu đen, 50% không sáng không tối, 100% là màu trắng.

CSS Colors

HSLA Values

- HSLA là hệ màu mở rộng của HSL với tham số Alpha - Chỉ số Opacity của màu sắc. Cú pháp :

 hsla(hue, saturation, lightness, alpha)

- Alpha là tham số từ 0.0 (trong suốt) - 1.0 (không trong suốt).

CSS Colors

Bài sau » « Bài trước
Back to top