Bài 8: Cách sử dụng màu(color) trong css

Cách sử dụng màu(color) trong css

Để đặt màu cho phần tử HTML bằng CSS, bạn có thể sử dụng một trong các cách sau:

1. Sử dụng tên màu: CSS có một bộ sẵn các tên màu, cho phép bạn đặt màu một cách dễ dàng bằng cách sử dụng tên màu.

Ví dụ:

p {
  color: red;
}

Trong ví dụ trên, màu chữ cho tất cả các phần tử <p> sẽ là màu đỏ.

2. Sử dụng giá trị HEX: Mỗi màu có một giá trị HEX, được biểu diễn bằng 6 ký tự số và chữ cái từ 0 đến F.

Ví dụ:

p {
  color: #FF0000;
}

Trong ví dụ trên, màu chữ cho tất cả các phần tử <p> sẽ là màu đỏ (#FF0000 là mã HEX của màu đỏ).

3. Sử dụng giá trị RGB: Mỗi màu cũng có thể được biểu diễn bằng giá trị RGB, trong đó mỗi giá trị đại diện cho mức độ đỏ, xanh lá cây và xanh dương của màu. Giá trị của mỗi thành phần nằm trong khoảng từ 0 đến 255.

Ví dụ:

p {
  color: rgb(255, 0, 0);
}

Trong ví dụ trên, màu chữ cho tất cả các phần tử <p> sẽ là màu đỏ (255, 0, 0 là giá trị RGB của màu đỏ).

4. Sử dụng giá trị RGBA: Giống như giá trị RGB, giá trị RGBA cũng được sử dụng để đặt màu, nhưng nó bao gồm một giá trị alpha (độ trong suốt) trong khoảng từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt).

Ví dụ:

p {
  color: rgba(255, 0, 0, 0.5);
}

Trong ví dụ trên, màu chữ cho tất cả các phần tử <p> sẽ là màu đỏ với độ trong suốt là 0.5.

Lưu ý rằng bạn có thể sử dụng các giá trị màu này cho các thuộc tính khác nhau trong CSS, chẳng hạn như background-color, border-color, text-shadow,...