Màu nền là một yếu tố quan trọng giúp làm nổi bật nội dung và tạo điểm nhấn cho trang web. Trong HTML và CSS, bạn có thể dễ dàng thiết lập màu nền cho một phần tử bằng nhiều cách khác nhau, từ màu đơn sắc đến hiệu ứng gradient. Việc lựa chọn màu nền phù hợp không chỉ giúp cải thiện trải nghiệm người dùng mà còn thể hiện phong cách thiết kế chuyên nghiệp. Hãy cùng tìm hiểu cách thiết lập màu nền cho phần tử HTML một cách đơn giản và hiệu quả!
Cách thiết lập màu nền cho phần tử
– Thông thường thì các phần tử sẽ có nền “trong suốt”, nếu muốn thiết lập lại màu nền cho phần tử thì chúng ta cần phải sử dụng thuộc tính background-color với cú pháp như sau:
background-color:value;– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị bên dưới:
| transparent | – Nền của phần tử sẽ trong suốt. | Xem ví dụ |
| color | – Chỉ định một màu sắc cụ thể (màu sắc này có thể được xác định dựa theo tên màu, giá trị rgb, giá trị hex, giá trị rgba, giá trị hsl, . . . .) | Xem ví dụ |
| initial | – Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính background-color có giá trị là transparent) |
|
| inherit | – Kế thừa giá trị thuộc tính background-color từ phần tử cha của nó. | Xem ví dụ |
– Lưu ý: Thuộc tính background-color cũng thường được áp dụng trong việc đánh dấu văn bản.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
</head>
<body>
<p>Học <span style="background-color:red">CSS</span> miễn phí</p>
</body>
</html>Điều chỉnh phạm vi được thiết lập màu nền
– Trong các bài học trước thì tôi đã từng có giới thiệu sơ qua về cấu trúc của một phần tử HTML, nó bao gồm bốn thành phần chính: margin border padding content
- margin
- border
- padding
- content
– Khi chúng ta sử dụng thuộc tính background-color để thiết lập màu nền cho phần tử thì mặc định phạm vi được thiết lập màu nền sẽ bắt đầu từ phần border cho đến hết phần content
- margin
- border
- padding
- content
– Tuy nhiên, với việc sử dụng thuộc tính background-clip thì chúng ta có thể điều chỉnh lại phạm vi được thiết lập màu nền của phần tử.
background-clip: value;– Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị như sau:
| border-box | – Phạm vi được thiết lập màu nền sẽ bao gồm ba phần:
|
Xem ví dụ |
| padding-box | – Phạm vi được thiết lập màu nền sẽ bao gồm hai phần:
|
|
| content-box | – Phạm vi được thiết lập màu nền chỉ bao gồm phần: content | |
| initial | – Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính background-clip có giá trị là border-box) |
|
| inherit | – Kế thừa giá trị thuộc tính background-clip từ phần tử cha của nó. |
