Cách để Thiết Lập Màu Nền Trong HTML - WikiHow

Trang chủ » Chỉnh Màu Background Trong Html » Cách để Thiết Lập Màu Nền Trong HTML - WikiHow

Có thể bạn quan tâm

Skip to Content
  • Trang đầu
  • Ngẫu nhiên
  • Duyệt các Chuyên mục
  • Giới thiệu về wikiHow
  • Đăng nhập / Đăng ký
Các chính sáchCách để Thiết lập màu nền trong HTML PDF download Tải về bản PDF Cùng viết bởi Jessica Andzouana

Tham khảo

PDF download Tải về bản PDF X

Bài viết này có đồng tác giả là Jessica Andzouana, một trong những đồng tác giả viết bài của chúng tôi. Các đồng tác giả viết bài của wikiHow phối hợp chặt chẽ với đội ngũ biên tập viên để đảm bảo nội dung được chính xác và toàn diện nhất có thể. Bài viết này đã được xem 100.464 lần.

Trong bài viết này: Chuẩn bị trước khi chỉnh sửa HTML Tạo nền màu đơn sắc Tạo nền màu gradient Tạo nền tự động đổi màu Xem thêm 1... Thu gọn... Mẹo và cảnh báo Bài viết có liên quan Tham khảo

Đây là bài viết hướng dẫn cách thay đổi màu nền của trang web bằng việc chỉnh sửa tập tin HTML.

Các bước

Phương pháp 1 Phương pháp 1 của 4:

Chuẩn bị trước khi chỉnh sửa HTML

PDF download Tải về bản PDF
  1. Step 1 Xác định màu nền mà bạn muốn sử dụng. 1 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:
    • 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. Step 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. 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 <bgcolor> 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. Step 3 Thêm đề mục "html" vào văn bản. 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ẻ <style></style>:
      <!DOCTYPE html> <html> <head> <style> </style> </head> </html>
  4. Step 4 Tạo dòng trống giữa các thẻ "style" (kiểu). 4 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ẻ <style> và phía trên thẻ </style>.
  5. Step 5 Thêm phần "body" (thân trang). 5 Thêm phần "body" (thân trang). Nhập lệnh sau trong thẻ <style></style>:
      body { }
    • 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
Phương pháp 2 Phương pháp 2 của 4:

Tạo nền màu đơn sắc

PDF download Tải về bản PDF
  1. Step 1 Tìm đề mục "html" của văn bản. 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.
  2. Step 2 Thêm thuộc tính "background-color" vào phần "body" (thân trang). 2 Thêm thuộc tính "background-color" vào phần "body" (thân trang). Nhập background-color: 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. Step 3 Thêm màu nền mà bạn thích vào thuộc tính "background-color". 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:
      body { background-color: #d24dff; }
  4. Step 4 Xem lại thông tin "style" (kiểu). 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:
      <!DOCTYPE html> <html> <head> <style> body { background-color: #d24dff } </style> </head> </html>
  5. Step 5 Sử dụng "background-color" để đặt màu nền cho các yếu tố khác. 5 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 (<h1>) hoặc đoạn văn (<p>), bạn sẽ có đoạn mã như sau:[2]
      <!DOCTYPE html> <html> <head> <style> body { background-color: #93B874; } h1 { background-color: #00b33c; } p { background-color: #FFFFFF); } </style> </head> <body> <h1>Đề mục màu xanh lá</h1> <p>Đoạn văn màu trắng </p> </body> </html>
    Quảng cáo
Phương pháp 3 Phương pháp 3 của 4:

Tạo nền màu gradient

PDF download Tải về bản PDF
  1. Step 1 Tìm đề mục "html" của văn bản. 1 Tì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.
  2. Step 2 Tìm hiểu cú pháp cơ bản của quy trình này. 2 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(direction/angle, color1, color2, color3, etc.);
  3. Step 3 Tạo màu gradient theo chiều dọc. 3 Tạ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ẻ <style></style>:
      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; }
    • Mỗ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.
  4. Step 4 Tạo màu gradient biến đổi theo hướng. 4 Tạo màu gradient biến đổi theo hướng. 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ẻ <style></style>:[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; }
    • Bạn có thể dùng thẻ "left" (trái) và "right" (phải) để thử tạo dải màu theo hướng khác.
  5. Step 5 Sử dụng thuộc tính khác để điều chỉnh màu gradient. 5 Sử dụng thuộc tính khác để điều chỉnh màu gradient. Bạn có thể biến đổi màu gradient theo nhiều cách.
    • Ví dụ, bạn không chỉ có thể thêm nhiều hơn hai màu, mà còn có thể đặt tỉ lệ phần trăm cho từng màu. Đây là cách bạn tạo diện tích cho từng phần màu. Sau đây là ví dụ của màu gradient được thực hiện theo nguyên tắc này: background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
  6. 6 Thêm độ trong suốt cho màu sắc. Đâ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));
  7. Step 7 Xem mã đã hoàn tất. 7 Xem mã đã hoàn tất. Mã dùng để tạo nền màu gradient của trang web sẽ trông giống như sau:
      <!DOCTYPE html> <html> <head> <style> 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; } </style> </head> <body> </body> </html>
    Quảng cáo
Phương pháp 4 Phương pháp 4 của 4:

Tạo nền tự động đổi màu

PDF download Tải về bản PDF
  1. Step 1 Tìm đề mục "html" của văn bản. 1 Tìm đề mục "html" của văn bản. Đề mục này thường hiển thị ở gần phía trên văn bản.
  2. Step 2 Thêm thuộc tính chuyển đổi vào phần "body" (thân trang). 2 Thêm thuộc tính chuyển đổi vào phần "body" (thân trang). 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]
      -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite;
    • Dòng đầu tiên của đoạn mã dành cho trình duyệt mã nguồn mở, còn dòng cuối cùng của đoạn mã dành cho trình duyệt khác.
  3. Step 3 Thêm màu cho phần chuyển đổi. 3 Thêm màu cho phần chuyển đổi. 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]
      @-webkit-keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;} } @keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;} }
    • Lư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.
  4. Step 4 Xem lại mã. 4 Xem 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:
      <!DOCTYPE html> <html> <head> <style> body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; } @-webkit-keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;} } @keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;} } </style> </head> <body> </body> </html>
    Quả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 background-color: orange; 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.

Bài viết wikiHow có liên quan

Tạo một trang web đơn giản với HTMLCách đểTạo một trang web đơn giản với HTML Sửa màu trong GimpCách đểSửa màu trong Gimp Xem người theo dõi mới của bạn bè trên InstagramCách đểXem người theo dõi mới của bạn bè trên Instagram Thay đổi hình nền GoogleCách đểThay đổi hình nền Google Tải một phần video YouTube với chất lượng HDCách đểTải một phần video YouTube với chất lượng HD Tắt McAfeeCách đểTắt McAfee Chèn ảnh bằng HTMLCách đểChèn ảnh bằng HTML Dùng Máy tính không cần chuộtCách đểDùng Máy tính không cần chuột Bắt đầu học lập trình máy tínhCách đểBắt đầu học lập trình máy tính Nhập dấu chiaCách đểNhập dấu chia Bắt đầu lập trình trên PythonCách đểBắt đầu lập trình trên Python Thay đổi độ nhạy chuộtCách đểThay đổi độ nhạy chuột Quảng cáo

Tham khảo

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
  2. ↑ http://www.w3schools.com/css/css_background.asp
  3. ↑ https://css-tricks.com/css3-gradients/
  4. ↑ http://www.w3schools.com/css/css3_gradients.asp
  5. ↑ https://codepen.io/metagrapher/pen/tgcLl
  6. ↑ http://www.w3schools.com/css/css3_animations.asp

Về bài wikiHow này

Jessica Andzouana Cùng viết bởi: Jessica Andzouana Bài viết này có đồng tác giả là Jessica Andzouana, một trong những đồng tác giả viết bài của chúng tôi. Các đồng tác giả viết bài của wikiHow phối hợp chặt chẽ với đội ngũ biên tập viên để đảm bảo nội dung được chính xác và toàn diện nhất có thể. Bài viết này đã được xem 100.464 lần. Chuyên mục: Máy tính và Điện tử Ngôn ngữ khác Tiếng Anh Tiếng Pháp Tiếng Tây Ban Nha Tiếng Indonesia Tiếng Nga Tiếng Đức Tiếng Bồ Đào Nha Tiếng Italy Tiếng Thái Tiếng Hà Lan Tiếng Ả Rập Tiếng Nhật Tiếng Trung Tiếng Hàn Tiếng Hindi Tiếng Thổ Nhĩ Kỳ Tiếng Ba Tư
  • In
Trang này đã được đọc 100.464 lần.

Bài viết này đã giúp ích cho bạn?

Có Không Quảng cáo Cookie cho phép wikiHow hoạt động tốt hơn. Bằng việc tiếp tục sử dụng trang web của chúng tôi, bạn đồng ý với chính sách cookie của chúng tôi.

Bài viết có liên quan

Tạo một trang web đơn giản với HTMLCách đểTạo một trang web đơn giản với HTMLSửa màu trong GimpCách đểSửa màu trong GimpXem người theo dõi mới của bạn bè trên InstagramCách đểXem người theo dõi mới của bạn bè trên InstagramThay đổi hình nền GoogleCách đểThay đổi hình nền Google

Các bài viết hướng dẫn nổi bật

Xem Instagram riêng tư của người khác mà không cần theo dõi: sự thực và 3 cách thay thếXem Instagram riêng tư của người khác mà không cần theo dõi: sự thực và 3 cách thay thếXem video đã xóa trên YouTube bằng WayBack MachineXem video đã xóa trên YouTube bằng WayBack Machine3 cách đơn giản giúp bạn đăng nhập Instagram không cần mã xác minh3 cách đơn giản giúp bạn đăng nhập Instagram không cần mã xác minhBiết ai đã chia sẻ bài đăng trên Instagram của bạn lên Story của họBiết ai đã chia sẻ bài đăng trên Instagram của bạn lên Story của họ

Các bài viết hướng dẫn phổ biến

Chiến thắng khi đánh nhau ngoài đườngCách đểChiến thắng khi đánh nhau ngoài đườngKết nối tai nghe Bluetooth với máy tínhCách đểKết nối tai nghe Bluetooth với máy tínhBật xem trước ảnh trong thư mục (Windows 10)Cách đểBật xem trước ảnh trong thư mục (Windows 10)Chạy tập tin HTMLCách đểChạy tập tin HTMLNhân chéoCách đểNhân chéoViết mã giảCách đểViết mã giả

Các bài viết hướng dẫn nổi bật

Chọn thuê người yêu đóng thế: 8 lời khuyên dành cho bạnChọn thuê người yêu đóng thế: 8 lời khuyên dành cho bạn15 dấu hiệu kín đáo cho thấy nàng bị bạn thu hút15 dấu hiệu kín đáo cho thấy nàng bị bạn thu hútXem đường chỉ tay hôn nhân: độ dài, độ cong và các đặc điểm riêng biệtXem đường chỉ tay hôn nhân: độ dài, độ cong và các đặc điểm riêng biệtPhải làm gì khi con gái không trả lời tin nhắn của bạn: 13 kiểu tin nhắn mà bạn có thể gửi cho cô ấyPhải làm gì khi con gái không trả lời tin nhắn của bạn: 13 kiểu tin nhắn mà bạn có thể gửi cho cô ấy

Các bài viết hướng dẫn nổi bật

9 cách đơn giản giúp bạn nhận biết người có nhiều tài khoản Instagram9 cách đơn giản giúp bạn nhận biết người có nhiều tài khoản Instagram3 cách dễ dàng để tìm một người trên Snapchat khi không có tên người dùng của họ3 cách dễ dàng để tìm một người trên Snapchat khi không có tên người dùng của họXem ai theo dõi một tài khoản riêng tư trên InstagramXem ai theo dõi một tài khoản riêng tư trên Instagram5 cách để tìm một người trên Tinder5 cách để tìm một người trên Tinder

Các bài viết hướng dẫn nổi bật

175 câu bắt chuyện thú vị và hấp dẫn để tiêu khiển với bạn bè175 câu bắt chuyện thú vị và hấp dẫn để tiêu khiển với bạn bè17 dấu hiệu cho biết chàng thầm yêu bạn17 dấu hiệu cho biết chàng thầm yêu bạnÝ nghĩa bí mật của emoji 🍆 (cà tím) và cách phản hồiÝ nghĩa bí mật của emoji 🍆 (cà tím) và cách phản hồi5 cách dễ dàng để biết ai đó đã chặn bạn trên Discord5 cách dễ dàng để biết ai đó đã chặn bạn trên Discord

Các bài viết hướng dẫn nổi bật

Xem ai không theo dõi lại bạn trên InstagramXem ai không theo dõi lại bạn trên InstagramTìm tên bài hát của đoạn nhạc trong video bằng Shazam trên máy tính và thiết bị di độngTìm tên bài hát của đoạn nhạc trong video bằng Shazam trên máy tính và thiết bị di độngBói chỉ tay: xem đường tình duyênBói chỉ tay: xem đường tình duyênKể về bản thân trên ứng dụng hẹn hòKể về bản thân trên ứng dụng hẹn hò wikiHow
  • Chuyên mục
  • Máy tính và Điện tử
  • Trang chủ
  • Giới thiệu về wikiHow
  • Các chuyên gia
  • Liên hệ với chúng tôi
  • Sơ đồ Trang web
  • Điều khoản Sử dụng
  • Chính sách về Quyền riêng tư
  • Do Not Sell or Share My Info
  • Not Selling Info

Theo dõi chúng tôi

--753

Từ khóa » Chỉnh Màu Background Trong Html