Xác định màu nền mà bạn muốn sử dụng. Màu HTML được quy định theo mã dựa trên cơ sở tông màu. Bạn có thể dùng công cụ chọn màu HTML miễn phí W3Schools để tìm mã cho màu mà bạn muốn sử dụng: Màu HTML được quy định theo mã dựa trên cơ sở tông màu. Bạn có thể dùng công cụ chọn màu HTML miễn phí W3Schools để tìm mã cho màu mà bạn muốn sử dụng:
Truy cập https://www.w3schools.com/colors/colors_picker.asp bằng trình duyệt web của máy tính.
Nhấp vào màu gốc mà bạn muốn sử dụng trong phần "Pick a Color" (Chọn màu).
Chọn tông màu ở bên phải trang.
Ghi lại mã số hiển thị bên phải tông màu đó.
2
Mở tập tin HTML trong chương trình soạn thảo văn bản yêu thích của bạn. Đối với HTML5, thuộc tính HTML không còn được hỗ trợ. Màu nền cùng với tất cả các phần tạo kiểu khác trên trang cần được xử lý bằng CSS.[1] Đối với HTML5, thuộc tính HTML không còn được hỗ trợ. Màu nền cùng với tất cả các phần tạo kiểu khác trên trang cần được xử lý bằng CSS.[1]
Bạn có thể dùng Notepad++ hoặc Notepad trên máy tính Windows, hoặc dùng TextEdit hay BBEdit trên máy tính Mac.
3
Thêm đề mục "html" vào văn bản. Tất cả thông tin tạo kiểu cho trang (bao gồm màu nền) cần được đặt trong thẻ
body{background-color:}
4: Tất cả thông tin tạo
kiểu cho trang (bao gồm màu nền) cần được đặt trong thẻ
Tạo dòng trống giữa các thẻ "style" (kiểu). Bạn cần một dòng để nhập thêm thông tin bên dưới thẻ
body{background-color:}
5 và phía trên thẻ
body{background-color:}
6. Bạn cần một dòng
để nhập thêm thông tin bên dưới thẻ
body{background-color:}
5 và phía trên thẻ
body{background-color:}
6.
5
Thêm phần "body" (thân trang). Nhập lệnh sau trong thẻ
body{background-color:}
4: Nhập lệnh sau trong thẻ
body{background-color:}
4:
Những thay đổi của phần "body" trong CSS sẽ ảnh hưởng đến cả trang.
Bỏ qua bước này nếu bạn muốn tạo nền màu gradient.
Quảng cáo
1
Tìm đề mục "html" của văn bản. Đề mục này thường hiển thị ở phần đầu văn bản. Đề mục này thường hiển thị ở
phần đầu văn bản.
2
Thêm thuộc tính "background-color" vào phần "body" (thân trang). Nhập
body{background-color:}
8 trong ngoặc của phần thân trang. Bây giờ bạn sẽ có phần "body" như sau: Nhập
body{background-color:}
8 trong ngoặc của phần thân trang. Bây giờ bạn sẽ có phần "body" như sau:
body{background-color:}
Tại đây, bạn chỉ có thể nhập "color" vì việc nhập "colour" sẽ bị lỗi.
3
Thêm màu nền mà bạn thích vào thuộc tính "background-color". Nhập mã số của màu đã chọn kèm theo dấu chấm phẩy bên cạnh yếu tố "background-color:" để thực hiện việc này. Ví dụ, để tạo nền màu hồng cho trang, bạn sẽ thực hiện như sau: Nhập mã số của màu đã chọn kèm theo dấu chấm phẩy bên cạnh yếu tố "background-color:" để thực hiện việc này. Ví dụ, để tạo nền màu hồng cho trang, bạn sẽ thực hiện như sau:
body{background-color:#d24dff;}
4
Xem lại thông tin "style" (kiểu). Lúc này, đề mục của văn bản HTML trông giống như sau: Lúc này, đề mục của
văn bản HTML trông giống như sau:
Sử dụng "background-color" để đặt màu nền cho các yếu tố khác. Tương tự như việc tạo màu cho phần thân trang, bạn có thể dùng "background-color" để tạo màu nền cho các yếu tố khác như đề mục, đoạn văn, v.v. Ví dụ, để tạo màu nền cho đề mục chính () hoặc đoạn văn (), bạn sẽ có đoạn mã như sau:[2] Tương tự như việc tạo màu cho phần thân trang, bạn có thể dùng "background-color" để tạo màu nền cho các yếu tố khác như đề mục, đoạn văn, v.v. Ví dụ, để tạo màu nền cho đề mục chính (
) hoặc đoạn văn (), bạn sẽ có đoạn mã như sau:[2]<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #93B874;
}
h2 {
background-color: #00b33c;
}
p {
background-color: #FFFFFF);
}
</style>
</head>
<body>
<h2>Đề mục màu xanh lá</h2>
<p>Đoạn văn màu trắng </p>
</body>
</html>
Quảng cáo 1Tìm đề mục "html" của văn bản. Đề mục này thường hiển thị ở phần đầu văn bản. Đề mục này hiển thị ở
gần phần đầu của văn bản. 2Thêm thuộc tính "background-color" vào phần "body" (thân trang). Nhập body {
background-color:
}
8 trong ngoặc của phần thân trang. Bây giờ bạn sẽ có phần "body" như sau: Khi
tạo màu gradient, bạn cần hai phần thông tin: điểm/góc bắt đầu, và các màu dùng để tạo kiểu gradient. Bạn có thể chọn nhiều màu để tạo kiểu gradient có tất cả những màu đó, và bạn có thể chọn tạo màu gradient theo hướng hoặc góc.[3]background: linear-gradient(direction/angle, color1, color2, color3, etc.);
3Tại đây, bạn chỉ có thể nhập "color" vì việc nhập "colour" sẽ bị lỗi. Nếu bạn không
đặt hướng, màu gradient sẽ chuyển đổi theo chiều từ trên xuống dưới. Để tạo màu gradient, bạn cần đặt đoạn mã sau trong thẻ body {
background-color:
}
4: html {
min-height: 100%;
}
body {
background: -webkit-linear-gradient(#93B874, #C9DCB9);
background: -o-linear-gradient(#93B874, #C9DCB9);
background: -moz-linear-gradient(#93B874, #C9DCB9);
background: linear-gradient(#93B874, #C9DCB9);
background-color: #93B874;
}
Thêm màu nền mà bạn thích vào thuộc tính "background-color". Nhập mã số của màu đã chọn kèm theo dấu chấm phẩy bên cạnh yếu tố "background-color:" để thực hiện việc này. Ví dụ, để tạo nền màu hồng cho trang, bạn sẽ thực hiện như sau: 4Xem lại thông tin "style" (kiểu). Lúc này, đề mục của văn bản HTML trông giống như sau: Nếu không
muốn tạo màu gradient biến đổi theo chiều dọc, bạn có thể thêm hướng cho màu gradient để thay đổi cách chuyển đổi màu sắc. Hãy đặt đoạn mã sau trong thẻ body {
background-color:
}
4:[4]html {
min-height: 100%;
}
body {
background: -webkit-linear-gradient(left, #93B874, #C9DCB9);
background: -o-linear-gradient(right, #93B874, #C9DCB9);
background: -moz-linear-gradient(right, #93B874, #C9DCB9);
background: linear-gradient(to right, #93B874, #C9DCB9);
background-color: #93B874;
}
Sử dụng "background-color" để đặt màu nền cho các yếu tố khác. Tương tự như việc tạo màu cho phần thân trang, bạn có thể dùng "background-color" để tạo màu nền cho các yếu tố khác như đề mục, đoạn văn, v.v. Ví dụ, để tạo màu nền cho đề mục chính () hoặc đoạn văn (), bạn sẽ có đoạn mã như sau:[2] 5Tìm đề mục "html" của văn bản. Đề mục này hiển thị ở gần phần đầu của văn bản. Bạn có thể biến đổi màu gradient theo nhiều cách. Tìm hiểu cú pháp cơ bản của quy trình này. Khi tạo màu gradient, bạn cần hai phần thông tin: điểm/góc bắt đầu, và các màu dùng để tạo kiểu gradient. Bạn có thể chọn nhiều màu để tạo kiểu gradient có tất cả những màu đó, và bạn có thể chọn tạo màu gradient theo hướng hoặc góc.[3]background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
6Tạo màu gradient theo chiều dọc. Nếu bạn không đặt hướng, màu gradient sẽ chuyển đổi theo chiều từ trên xuống dưới. Để tạo màu gradient, bạn cần đặt đoạn mã sau trong thẻ body {
background-color:
}
4: Đây là thao tác làm phai màu. Hãy sử dụng cùng một màu
để làm cho màu phai hoàn toàn. Bạn cần sử dụng chức năng rgba() để chỉ định màu. Giá trị cuối xác định độ trong suốt: 0 dành cho màu đơn sắc và 1 dành cho độ trong suốt. background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
7Mỗi trình duyệt đều có cách hiển thị chức năng màu gradient không giống nhau, nên bạn cần thêm nhiều kiểu lệnh. Mã dùng để tạo nền màu
gradient của trang web sẽ trông giống như sau: body {
background-color:
}
0Quảng cáo 1Tìm đề mục "html" của văn bản. Đề mục này thường hiển thị ở phần đầu văn bản. Đề mục này thường hiển
thị ở gần phía trên văn bản. 2Thêm thuộc tính "background-color" vào phần "body" (thân trang). Nhập body {
background-color:
}
8 trong ngoặc của phần thân trang. Bây giờ bạn sẽ có phần "body" như sau: Nhập đoạn mã sau tại dòng bên dưới ngoặc "body {" và phía trên ngoặc đóng:[5]body {
background-color:
}
1Tại đây, bạn chỉ có thể nhập "color" vì việc nhập "colour" sẽ bị lỗi. 3Thêm màu nền mà bạn thích vào thuộc tính "background-color". Nhập mã số của màu đã chọn kèm theo dấu chấm phẩy bên cạnh yếu tố "background-color:" để thực hiện việc này. Ví dụ, để tạo nền màu hồng cho trang, bạn sẽ thực hiện như sau: Bây giờ bạn sẽ
dùng quy tắc @keyframes để đặt màu nền cho vòng lặp chuyển đổi, cùng với thời gian mà mỗi màu sẽ hiển thị trên trang. Nhắc lại, bạn cần nhập mã riêng cho từng loại trình duyệt. Hãy nhập các dòng mã sau bên dưới ngoặc đóng của phần thân trang:[6]body {
background-color:
}
2Lưu ý, hai quy tắc (@-webkit-keyframes và @keyframes có cùng màu nền và tỉ lệ phần trăm. Bạn cần đồng nhất hai yếu tố này để tạo ra trải nghiệm giống nhau trên tất cả trình duyệt.Tỉ lệ phần trăm (0%, 25%, v.v.) được tính theo tổng thời gian chuyển động (60s). Khi bạn tải trang, nền liền hiển thị màu (#33FFF3) được đặt tại 0%. Sau khi hết 25% của 60 giây, nền sẽ chuyển sang màu #7821F và cứ thế tiếp tục.Bạn có thể điều chỉnh thời gian và màu sắc sao cho tạo ra kết quả như mong muốn. 4Xem lại mã. Toàn bộ phần mã tạo hiệu ứng tự động thay đổi màu sẽ trông giống như sau: Toàn bộ phần mã tạo hiệu ứng tự động
thay đổi màu sẽ trông giống như sau: body {
background-color:
}
3Quảng cáo Lời khuyên
Nếu muốn sử dụng màu cơ bản trong mã HTML, bạn có thể nhập tên màu mà không cần thêm dấu thăng (#) thay vì sử dụng mã màu HTML. Ví dụ: để tạo nền màu cam, bạn sẽ nhập
body{background-color:#d24dff;}
1 tại đây.
Bạn cũng có thể dùng hình ảnh làm nền cho trang web bằng HTML.
Cảnh báo
Hãy kiểm tra mọi thay đổi dành cho trang web trước khi áp dụng trực tuyến.
