Màu nền

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 25 trên 76.

Trong CSS, thuộc tính background-color dùng để đặt màu nền cho một phần tử HTML. Thuộc tính này cho phép bạn chỉ định một giá trị màu.

Đây là cú pháp cơ bản để dùng thuộc tính background-color:

selector {
    background-color: color-value;
}

Dưới đây là một vài cách phổ biến để chỉ định giá trị màu trong CSS:

Màu có tên: Các tên màu được định nghĩa sẵn, chẳng hạn như red, blue, green, black, white, v.v.

Giá trị hệ thập lục phân: Mã màu gồm sáu chữ số, đứng sau dấu thăng (#), chẳng hạn #FF0000 là màu đỏ.

Giá trị RGB: Xác định các thành phần đỏ, xanh lá và xanh dương của một màu bằng hàm rgb(), với các giá trị từ 0 đến 255, chẳng hạn như rgb(255, 0, 0) cho màu đỏ.

Ví dụ:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

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

Trong ví dụ này, màu nền của phần tử <body> được đặt thành lightblue, tất cả tiêu đề <h1> có nền màu đỏ (#FF0000), tất cả phần tử <p> (đoạn văn) có nền màu xanh dương (rgb(0, 0, 255)).

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có tiêu đề (<h1>), đoạn văn (<p>) và phần tử chia nội dung (<div>). Nhiệm vụ của bạn là dùng thuộc tính background-color để tạo kiểu cho các phần tử này. Làm theo các bước dưới đây:

Viết quy tắc CSS áp dụng cho phần tử <h1>. Đặt background-color thành yellow.
Viết quy tắc CSS áp dụng cho phần tử <p>. Đặt background-color thành #00FF00 (xanh lá cây).
Viết quy tắc CSS áp dụng cho phần tử <div>. Đặt background-color thành rgb(255, 0, 255) (màu đỏ tươi).

Tự làm thử

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>