Chúng ta có thể chỉ định màu nền của một phần tử bằng thuộc tính background-color. Các giá trị có thể được chỉ định bằng tên chuẩn, rgb(), rgba(), hsl() hoặc hsla().
Cú pháp
Cú pháp của thuộc tính CSS background-color như sau:
Selector { background-color: /*giá trị*/ }
Ví dụ
Các ví dụ sau minh họa thuộc tính CSS background-color:
<!DOCTYPE html> <html> <head> <style> p:first-of-type { font-family: cursive; background-color: pink; } p:last-child { background-color: azure; } div { margin: auto; padding: 5px; font-family: Helvetica; width: 430px; background-color: burlywood; } </style> </head> <body> <p> Java là ngôn ngữ lập trình cao cấp最初由 Sun Microsystems 开发。</p> <div> Java phát hành năm 1995</div> <p> Java chạy trên nhiều nền tảng như Windows, Mac OS và các phiên bản UNIX khác nhau.</p> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> div { background-color: springgreen; } h1 { background-color: lightcoral; text-align: center; } p { background-color: lightseagreen; font-size: 150%; } </style> </head> <body> <div> <h1>Demo</h1> <p>Đây là văn bản demo1. Đây là văn bản demo2. Đây là văn bản demo3. </p> </div> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
