Để thêm màu nền vào phần tử HTML, bạn có thể sử dụng thuộc tính CSS background-color .
Giả sử bạn có đánh dấu HTML sau và bạn muốn thêm màu nền vào <body> phần tử:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Changing background color in HTML/CSS</title>
</head>
<body>
<h1>Here's an awesome website!</h1>
</body>
</html>
Cách đơn giản nhất để thêm màu nền là tạo một <style> nội bộ trong tài liệu HTML của bạn.
Trong <head> trong HTML, tạo một tập hợp <style></style> các thẻ. Sau đó, bạn có thể thêm các quy tắc kiểu CSS cho màu nền trong <style> phần tử.
<head>
<meta charset="UTF-8">
<title>Changing background color in HTML/CSS</title>
<style>
body {
background-color: #78a8eb;
}
</style>
</head>Mã HTML và CSS này sẽ tạo ra một trang web giống như thế này!
Ký hiệu màu
#78a8eb giá trị cho background-color thuộc tính được viết bằng ký hiệu thập lục phân, còn được gọi là hệ thập lục phân. Nó đại diện cho màu sắc với một tập hợp các ký tự cho các kênh Đỏ, Xanh lục và Xanh lam. Các ký tự bao gồm các số từ 0 đến 9, sau đó là các chữ cái A-F. Không (0) là giá trị thấp nhất và F là giá trị cao nhất.
Bạn cũng có thể thể hiện màu sắc trong CSS bằng các ký hiệu khác.
Ví dụ:trong ký hiệu chức năng, màu được định dạng là rgba() . Trong ví dụ của chúng tôi, màu nền sẽ được viết như sau:
background-color: rgb(120, 168, 235);Hoặc trong ký hiệu HSL (Hue, Saturation, Lightness), nó sẽ được viết như thế này:
background-color: hsl(215, 74%, 70%);Bất kỳ cách viết màu nào trong ba cách này đều được chấp nhận trong các trình duyệt hiện đại.
Các phương pháp không được dùng nữa (không sử dụng)
Trong các phiên bản trước của tiêu chuẩn web, mọi người sẽ sử dụng bgcolor thuộc tính có màu hex trong chính thẻ HTML:
<body bgcolor="#78a8eb" ></body>Tuy nhiên, đây là một cách thiết lập màu nền cũ. Bạn không nên sử dụng cái này nữa– chỉ cần viết các kiểu CSS để kiểm soát màu sắc.