Thiết Lập Màu Nền Trong HTML - VLOS

Trang chủ » Trong Css Gradient Có Mấy Kiểu Thiết Lập đổi Màu » Thiết Lập Màu Nền Trong HTML - VLOS

Có thể bạn quan tâm

Bulbgraph.png Chủ đề nóng: Phương pháp kỷ luật tích cực - Cổ học tinh hoa - Những thói hư tật xấu của người Việt - Công lý: Việc đúng nên làm - Giáo án Điện tử - Sách giáo khoa - Học tiếng Anh - Bài giảng trực tuyến - Món ăn bài thuốc - Chăm sóc bà bầu - Môi trường - Tiết kiệm điện - Nhi khoa - Ung thư - Tác hại của thuốc lá - Các kỹ thuật dạy học tích cực - Dạy học phát triển năng lực - Chương trình giáo dục phổ thông Thiết lập màu nền trong HTML Từ VLOS Bước tới: chuyển hướng, tìm kiếm

Để thiết lập màu nền cho website trong HTML, bạn chỉ cần thay đổi thành tố phần "body" (thân) của thẻ <style></style>. Các bước hướng dẫn sẽ thay đổi theo hình dạng của hình nền. Hãy học cách đặt nền website thành một màu đồng nhất, ảnh, màu đậm dần hoặc nhạt dần, hình động nhiều màu sắc.

Mục lục

  • 1 Các bước
    • 1.1 Đặt nền một màu đồng nhất
    • 1.2 Dùng ảnh làm hình nền
    • 1.3 Đặt nền đậm/nhạt dần
    • 1.4 Đặt nền đổi màu
  • 2 Nguồn và Trích dẫn

Các bước[sửa]

Đặt nền một màu đồng nhất[sửa]

  1. Mở tập tin HTML trong phần mềm chỉnh sửa văn bản yêu thích. Với HTML5, thuộc tính HTML <bgcolor> không được hỗ trợ nữa. Đối với màu nền cùng các thiết lập kiểu dáng khác của trang web, bạn có thể sử dụng CSS.[1]
  2. Thêm thẻ <style></style> vào tài liệu. Toàn bộ thông tin kiểu dáng của trang (bao gồm cả màu nền) sẽ được mã hóa bằng các thẻ đó. Nếu bạn có sẵn thẻ <style>, chỉ cần kéo xuống đoạn đó. <!DOCTYPE html> <html> <head> <style> </style> </head> </html>
  3. Gõ thành tố "body" vào giữa thẻ <style></style>. Bất kỳ thao tác nào can thiệp vào thành tố "body" trong CSS sẽ ảnh hưởng đến cả trang. <!DOCTYPE html> <html> <head> <style> body { } </style> </head> <body> </body> </html>
  4. Thêm thuộc tính "background-color" (màu nền) vào trước thành tố "body". Trong đoạn mã này, chỉ cần một lần "color" (màu) là mã sẽ hoạt động. <!DOCTYPE html> <html> <head> <style> body { background-color: } </style> </head> <body> </body> </html>
  5. Thêm mã màu mong muốn vào thuộc tính "background-color". Bạn có thể gõ màu bằng tên (green, blue, red, v.v.), hoặc sử dụng mã thập lục (hex) tương ứng với màu bạn muốn (ví dụ #000000 là màu đen, #ff0000 là màu đỏ, v.v.) hoặc nhập giá trị RGB tương ứng với màu (ví dụrgb(255,255,0) là màu vàng). Dưới đây là ví dụ sử dụng mã màu thập lục, màu nền của bạn sẽ giống với màu biểu ngữ của wikiHow: <!DOCTYPE html> <html> <head> <style> body { background-color: #93B874; } </style> </head> <body> </body> </html>
    • Trắng: #FFFFFF
    • Hồng nhạt: #FFCCE6
    • Nâu đỏ nung: #993300
    • Màu chàm - #4B0082
    • Tím - #EE82EE
    • Vào trang w3schools.com HTML Color Picker để tìm mã thập lục tương ứng với màu sắc bạn muốn.
  6. Sử dụng thuộc tính "background-color" để đặt màu nền cho các thành tố khác. Tương tự với thành tố "body", bạn có thể dùng thuộc tính "background-color" để quyết định màu nền của các thành tố khác. Chỉ cần thêm các thành tố đó vào thẻ <style></style> cùng với thuộc tính "background-color".[2] <!DOCTYPE html> <html> <head> <style> body { background-color: #93B874; } h1 { background-color: orange; } p { background-color: rgb(255,0,0); } </style> </head> <body> <h1>Phần tiêu đề có nền màu cam</h1> <p>Đoạn văn có nền màu đỏ</p> </body> </html>

Dùng ảnh làm hình nền[sửa]

  1. Mở tập tin HTML trong phần mềm chỉnh sửa. Nhiều người thích dùng ảnh làm hình nền cho website. HTML cho phép bạn đặt hình trang trí, hoa văn, ảnh chụp hay bất kỳ ảnh nào khác làm hình nền. Với HTML5, bạn nên sử dụng CSS để đặt hình nền trong thẻ <style></style>.
  2. Thêm thẻ <style></style> vào tập tin HTML. Toàn bộ thông tin kiểu dáng của trang (bao gồm cả màu nền) sẽ được mã hóa trong các thẻ này. Nếu bạn có sẵn thẻ <style>, chỉ cần kéo xuống đoạn đó. <!DOCTYPE html> <html> <head> <style> </style> </head> </html>
  3. Nhập thành tố "body" vào thẻ <style></style>. Bất kỳ thao tác nào liên quan tới thành tố "body" trong CSS sẽ ảnh hưởng tới cả trang. <!DOCTYPE html> <html> <head> <style> body { } </style> </head> <body> </body> </html>
  4. Thêm thuộc tính "background-image" vào thành tố "body". Khi muốn thêm thuộc tính này, bạn cần có tên tập tin ảnh. Đảm bảo rằng tập tin ảnh được lưu trữ cùng thư mục với tập tin HTML (hoặc nhập đường dẫn đầy đủ của tập tin lên máy chủ).[3] <!DOCTYPE html> <html> <head> <style> body { background-image: url("imagename.png"); background-color: #93B874; } </style> </head> <body> </body> </html>
    • Bạn có thể thêm thuộc tính background-color phòng trường hợp không tải được ảnh nền.
  5. Ảnh nhiều lớp. Bạn có thể xếp ảnh chồng lên nhau. Cách này rất hữu dụng nếu bạn sử dụng nhiều ảnh nền trong suốt để kết hợp với nhau tạo ra hình nền. <!DOCTYPE html> <html> <head> <style> body { background-image: url("image1.png"), url("image2.gif"); background-color: #93B874; } </style> </head> <body> </body> </html>
    • Ảnh được liệt kê đầu tiên sẽ xuất hiện trên cùng. Ảnh được liệt kê thứ 2 sẽ xuất hiện sau ảnh đầu tiên.

Đặt nền đậm/nhạt dần[sửa]

  1. Sử dụng CSS để tạo nền đậm/nhạt dần. Nếu bạn muốn thứ gì đó phá cách hơn một màu đồng nhất, nhưng lại không đủ thời gian để tạo ảnh động nhiều màu, hãy thử nền đậm/nhạt dần. Đây là kiểu nền mà màu sắc sẽ đậm dần hoặc nhạt dần thành màu khác. Bạn có thể dùng CSS để tạo và tùy chỉnh nền. Trước khi tạo nền, bạn cần nắm được những điều cơ bản khi chỉnh sửa kiểu dáng trang với CSS.
  2. Hiểu các cú pháp cơ bản. Khi tạo nền đậm/nhạt dần, có 2 phần thông tin bạn cần: điểm/góc bắt đầu và 2 màu sắc biến đổi lẫn nhau. Bạn có thể chọn biến đổi giữa nhiều màu hoặc thiết lập hướng, góc độ đậm nhạt của màu sắc.[4] background: linear-gradient(direction/angle, color1, color2, color3, etc.);
  3. Tạo nền đậm/nhạt dần theo chiều dọc. Nếu không chỉ định hướng cụ thể, màu sẽ nhạt dần theo chiều từ trên xuống dưới. Mỗi trình duyệt lại có những thành tố hiển thị nền đậm/nhạt dần khác nhau, bạn cần nhập một số phiên bản mã khác nhau. <!DOCTYPE html> <html> <head> <style> html { min-height: 100%; /* Đây là đoạn mã bắt buộc để màu nền hiển thị toàn trang */ } body { background: -webkit-linear-gradient(#93B874, #C9DCB9); /* Chrome 10+, Safari 5.1+ */ background: -o-linear-gradient(#93B874, #C9DCB9); /* Opera 11.1+ */ background: -moz-linear-gradient(#93B874, #C9DCB9); /* Firefox 3.6+ */ background: linear-gradient(#93B874, #C9DCB9); /* Standard syntax (must be last) */ background-color: #93B874; /* Bạn nên đặt màu nền phòng trường hợp không tải được màu nền đậm/nhạt dần*/ } </style> </head> <body> </body> </html>
  4. Tạo màu nền đậm/nhạt dần có định hướng. Thêm định hướng vào màu nền là cách bạn thay đổi hướng đổi màu. Lưu ý rằng các trình duyệt khác nhau sẽ có cách hiển thị đổi màu khác nhau. Các kết quả đều thu được màu nền đậm/nhạt dần giống nhau.[5] <!DOCTYPE html> <html> <head> <style> html { min-height: 100%; } body { background: -webkit-linear-gradient(left, #93B874, #C9DCB9); /* từ trái sang phải*/ background: -o-linear-gradient(right, #93B874, #C9DCB9); /* kết thúc phía bên phải */ background: -moz-linear-gradient(right, #93B874, #C9DCB9); /* kết thúc phía bên phải */ background: linear-gradient(to right, #93B874, #C9DCB9); /* chuyển động sang phía bên phải */ background-color: #93B874; /* Bạn nên đặt màu nền đồng nhất phòng trường hợp không tải được màu nền đậm/nhạt dầntn 5555n*/ } </style> </head> <body> </body> </html>
  5. Sử dụng các thuộc tính khác để điều chỉnh màu nền đậm/nhạt dần. Bạn có thể tùy biến rất nhiều yếu tố.
    • Ví dụ, bạn có thể thêm nhiều hơn 2 mà hoặc thiết lập phần trăm hiển thị của từng màu. Ngoài ra, bạn có thể thiết lập khoảng cách giữa từng phân khúc màu. background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
    • Thêm độ trong cho màu sắc. Đây là cách để làm màu nhạt đi. Sử dụng cùng màu để màu nhạt dần đến trong suốt. Bạn cần dùng chức năng rgba() để xác định màu. Giá trị cuối cùng sẽ quyết định độ trong của màu: 0 màu đồng nhất và 1 là trong suốt. background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));

Đặt nền đổi màu[sửa]

  1. Tìm thẻ <style> trong đoạn mã HTML. Nếu không thích nền một màu đơn thuần, hãy thử nền động đổi màu. Với HTML 5, bạn nên chỉnh sửa hình nền với CSS. Nếu chưa từng thiết lập nền với CSS, hãy tham khảo Đặt nền một màu đồng nhất trước khi thực hiện phương pháp này.
  2. Thêm thuộc tính ảnh động vào thành tố "body". Bạn cần thêm 2 thuộc tính khác nhau, mỗi trình duyệt lại yêu cầu mã khác nhau.[6] <!DOCTYPE html> <html> <head> <style> body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; } </style> </head> <body> </body> </html>
    • -webkit-animation là thuộc tính bắt buộc trên các trình duyệt nền tảng Chromium (Chrome, Opera, Safari). animation là tiêu chuẩn của các trình duyệt khác.
    • colorchange là tên tập tin hình động trong ví dụ này.
    • 60s là thời gian (60 giây) của ảnh động/chuyển động. Đừng quên thiết lập cả cú pháp webkit và tiêu chuẩn.
    • infinite là mã để lập đi lập lại ảnh động. Nếu muốn ảnh động chạy một lần, đến màu cuối cùng thì dừng lại, bạn có thể bỏ qua đoạn này.
  3. Thêm màu vào ảnh động. Giờ bạn sẽ sử dụng quy luật @keyframes để chọn màu dùng trong ảnh động cùng với khoảng thời gian từng màu xuất hiện. Mỗi trình duyệt web lại yêu cầu mã khác nhau.[7] <!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>
    • Lưu ý 2 quy tắc (@-webkit-keyframes và @keyframes có cùng màu nền và phần trăm. Bạn cần thiết lập như vậy để hình ảnh được hiển thị đồng nhất trên các trình duyệt khác nhau.
    • Phần trăm (0%, 25%, v.v) là tổng độ dài của ảnh động (60s). Khi tải trang, nền sẽ là màu được đặt ở 0% (#33FFF3). Khi ảnh động chạy được 25% của 60 giây, nền sẽ chuyển sang màu #78281F, và cứ tiếp tục như vậy.
    • Bạn có thể điều chỉnh thời gian và màu sắc sao cho phù hợp với nhu cầu.

Nguồn và Trích dẫn[sửa]

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
  2. ↑ http://www.w3schools.com/css/css_background.asp
  3. ↑ http://www.w3schools.com/cssref/pr_background-image.asp
  4. ↑ https://css-tricks.com/css3-gradients/
  5. ↑ http://www.w3schools.com/css/css3_gradients.asp
  6. ↑ https://codepen.io/metagrapher/pen/tgcLl
  7. ↑ http://www.w3schools.com/css/css3_animations.asp
  • Biên dịch và thực thi Java bằng Command Prompt
  • Tạo một trang web đơn giản với HTML
  • Xóa cơ sở dữ liệu trong MySQL
  • Ngôn ngữ lập trình
  • Chuyển tiếp URL
  • « Mới nhất
  • ‹ Mới hơn
  • Cũ hơn ›
Lấy từ “https://tusach.thuvienkhoahoc.com/index.php?title=Thiết_lập_màu_nền_trong_HTML&oldid=140149” Thể loại:
  • WikiHow
  • Lập trình
Thể loại ẩn:
  • Trang chưa có hình đại diện
Hoạt động gần đây
  • Lấy liên kết URL của hình ảnhsửa đổi 3 tuần trước
  • Làm núi lửasửa đổi 1 tháng trước
  • Bài 10: Liên Xô xây dựng CNXH (…sửa đổi 2 tháng trước
  • Giáo trình Điện tử cơ bản/C…sửa đổi 2 tháng trước
  • Mẫu câu hỏi theo các mức đ…sửa đổi 4 tháng trước
xem toàn bộLike fanpage để cập nhật tri thứcĐăng ký nhận bài viết mới qua email

Nhập email của bạn:

Cung cấp bởi Google

Trình đơn chuyển hướng

Công cụ cá nhân

  • Mở tài khoản
  • Đăng nhập

Không gian tên

  • Nội dung
  • Thảo luận

Biến thể

Tìm kiếm

Xem nhanh

  • Trang Chính
  • Tin tức Khoa học
  • Tủ sách VLOS
  • Giới thiệu Sách
  • Quy trình Công nghệ
  • Giáo án Điện tử
  • Bài giảng Trực tuyến
  • Ngân hàng Ý tưởng
  • Ghi chú Khoa học

Cộng đồng

  • Hỏi - Đáp
  • Thảo luận mới
  • Bài viết mới nhất
  • Bài nhiều người đọc
  • Hoạt động thành viên
  • Thay đổi gần đây

Các đề án

  • Sách giáo khoa mở
  • Điện từ Sinh học
  • Từ điển Thuốc
  • Công nghệ Ưu tiên
  • Văn hóa Khoa học
  • Ngôn ngữ học
  • Từ điển Hàn lâm
  • Thần kinh & tư duy
  • Các câu lạc bộ
  • Sinh học đại cương
  • Rùa Hồ Gươm
  • Khái niệm Sinh học

Hướng dẫn để

  • sơ cứu cấp cứu
  • chăm sóc sức khỏe
  • cân bằng tâm lý
  • phát triển kỹ năng
  • thay đổi lối sống
  • giao tiếp xã hội
  • phát triển tình yêu
  • thủ thuật internet
  • làm đẹp
  • vệ sinh cá nhân
  • ăn kiêng
  • nấu ăn ngon
  • làm mẹ chăm con
  • làm vườn trồng cây
  • hạnh phúc gia đình

Công cụ

  • Các liên kết đến đây
  • Thay đổi liên quan
  • Các trang đặc biệt
  • Bản để in
  • Thông tin trang

Từ khóa » Trong Css Gradient Có Mấy Kiểu Thiết Lập đổi Màu