Cách Sử Dụng Thuộc Tính Background-color Trong CSS ... - Web Cơ Bản

Thuộc tính background-color trong CSS

1) Thuộc tính background-color trong CSS

- Thuộc tính background-color dùng để thiết lập "màu nền" của phần tử HTML.

- Ví dụ:

Phần tử này được thiết lập nền màu vàng

- Lưu ý: Đối với một phần tử HTML, phần diện tích được thiết lập màu nền sẽ bao gồm các phần:

  • border.
  • padding.
  • content.
  • (không bao gồm phần margin)

2) Cách sử dụng thuộc tính background-color trong CSS

- Để sử dụng thuộc tính background-color, ta dùng cú pháp như sau:

background-color: color|transparent|initial|inherit;

- Trong đó, ta thấy giá trị của thuộc tính background-color có thể được xác định bởi một trong bốn loại:

color

- Một giá trị màu cụ thể, nó có thể là:

  • Tên màu, ví dụ: red, green, blue, ....
  • Giá trị RGB, ví dụ: rgb(140, 51, 79), rgb(0, 228, 62), ....
  • Giá trị HEX, ví dụ: #FFA500, #00FFFF, ....
Xem ví dụ
transparent

- Nền của phần tử sẽ có màu trong suốt.

- Lưu ý: Nền trong suốt khác với nền màu trắng. Màu nền của phần tử trong suốt sẽ bị ảnh hưởng bởi màu nền của phần tử chứa nó.

Xem ví dụ
initial

- Sử dụng giá trị mặc định của nó.

- Lưu ý: Mặc định thì nền của một phần tử sẽ có màu trong suốt, cho nên nó sẽ có ý nghĩa tương tự như giá trị transparent.

Xem ví dụ
inherit

- Kế thừa giá trị thuộc tính background-color từ phần tử cha của nó

Xem ví dụ

- Ngoài ra, thuộc tính background-color cũng thường được dùng để chỉnh màu nền cho văn bản.

Ví dụ: <!DOCTYPE html> <html> <body> <p>Tài liệu <span style="background-color:red">hướng dẫn học</span> Lập Trình Web.</p> </body> </html> Xem ví dụ

Từ khóa » Bỏ Background Trong Css