Màu nền là HTML hay CSS?

Điều đầu tiên bạn nên biết là có nhiều loại màu HTML khác nhau, chẳng hạn như mã màu Hex, tên màu HTML, giá trị RGB và RGBa, màu HSL, v.v. Để chọn màu ưa thích của bạn, hãy sử dụng Công cụ màu của chúng tôi

Trong đoạn mã này, bạn có thể tìm thấy nhiều cách khác nhau để thêm màu nền. Hãy bắt đầu từ cái dễ nhất

Thêm thuộc tính style vào phần tử

Bạn có thể đặt màu nền cho tài liệu HTML bằng cách thêm style="background-color. " đến phần tử

  
    Title of the document
  
  
    Some heading
    
Some paragraph for example.
  

Kết quả

Một số tiêu đề

Đoạn nào đó chẳng hạn

Thêm thuộc tính màu nền CSS vào phần tử

Thuộc tính background-color dùng để thay đổi màu nền. Chèn nó vào phần tử, bạn sẽ có một trang bìa đầy màu sắc

  
    Title of the document 
    
  
  

Bạn cũng có thể thêm màu nền cho các thành phần cụ thể trong tài liệu của mình. Ví dụ: hãy xem cách thay đổi màu của tiêu đề và đoạn văn

  
    Title of the document
    
  
  
    
Some heading with green background.
    
Some paragraph with blue background.
  

Hãy xem một ví dụ khác, nơi chúng ta thêm màu nền với giá trị tên màu vào

, HSL cho

và giá trị RGBa cho phần tử

  
    Title of the document
    
  
  
    Example
    
Some heading with green background.
    
Some paragraph with blue background.
    Some paragraph for
  

Nền chuyển màu cho phép bạn tạo hiệu ứng chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định

Có hai loại hình nền gradient. linear-gradient và radial-gradient

Trong nền có độ dốc tuyến tính, bạn có thể đặt điểm bắt đầu cho các màu. Nếu bạn không đề cập đến điểm bắt đầu, nó sẽ tự động đặt "từ trên xuống dưới" theo mặc định

Ví dụ đã cho hiển thị một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu từ màu xanh lam, chuyển sang màu xanh lá cây. Thay đổi nó theo yêu cầu của bạn

Trong nền gradient xuyên tâm, điểm bắt đầu được xác định bởi tâm của nó

Bạn cũng có thể điều chỉnh tỷ lệ phần trăm màu của mình như thế này. (màu1 30%, màu2 50%, màu3 20%)

Bạn có thể tạo nền sẽ thay đổi màu sắc của nó trong thời gian đã đề cập. Đối với điều đó, hãy thêm thuộc tính hoạt ảnh vào phần tử. Sử dụng quy tắc @keyframes để đặt màu nền mà bạn sẽ lướt qua, cũng như khoảng thời gian mỗi màu sẽ xuất hiện trên trang

Thuộc tính được sử dụng để đặt màu nền của phần tử HTML là màu bg. Tùy theo thành phần cần đặt màu nền mà ta sử dụng thẻ phù hợp. Thuộc tính bgcolor có thể được sử dụng với các thẻ sau- body, table, td, th, tr, marquee

Làm cách nào để Đặt màu nền trong HTML?

Hãy cho chúng tôi xem cách đặt màu nền trong HTML bằng thuộc tính bgcolor và các phương pháp khác. Cú pháp đặt màu nền bằng thuộc tính bgcolor như sau

Giá trị ở đây có thể là tên màu, số RGB hoặc số hex của màu

Hãy cho chúng tôi thấy điều này với sự giúp đỡ của một ví dụ

  
    bgcolor attribute
  
  
    Background colour using bgcolor
  


đầu ra
Thuộc tính bgcolor được thảo luận ở trên đã được sử dụng trước đó nhưng đã bị bỏ qua từ HTML 5 trở đi. Bây giờ chúng tôi sử dụng thuộc tính kiểu để đặt màu nền của trang. Trong phần này, chúng ta sẽ tìm hiểu chi tiết về thuộc tính style
Thuộc tính kiểu được sử dụng với các thẻ HTML chỉ định các kiểu nội tuyến cho một phần tử. Thuộc tính này có thuộc tính màu nền, có thể được sử dụng để đặt màu nền cho phần tử HTML. Nếu thuộc tính kiểu được sử dụng, nó sẽ ghi đè lên tất cả các bộ kiểu toàn cầu khác. Chúng ta có thể sử dụng thuộc tính kiểu nội tuyến hoặc sử dụng CSS nội bộ cho cùng
CSS nội tuyến cho phép chúng tôi tạo kiểu cho các phần tử HTML cụ thể. Hãy cho chúng tôi xem điều này với sự trợ giúp của đoạn mã sau


  
    Style Property
  
  
    Style Property using inline CSS
  


đầu ra
CSS nội bộ được sử dụng để bao gồm CSS bên trong phần đầu của tài liệu
Hãy cho chúng tôi xem điều này với sự trợ giúp của đoạn mã sau

  
    Internal CSS
    
  
  
    Style attribute using internal css
  


đầu ra
Bây giờ chúng ta hãy khám phá những cách khác nhau trong đó các thuộc tính phong cách có thể được sử dụng để thiết lập màu nền của trang web
Bằng cách chỉ định màu mong muốn - Trong phương pháp này, chúng tôi đề cập đến màu mà chúng tôi muốn nền của chúng tôi là. Ví dụ: đỏ, xanh, v.v.
cú pháp

Bằng cách sử dụng mã màu hex - Màu nền có thể được chỉ định thông qua mã màu thập lục phân
cú pháp




Bằng cách sử dụng các giá trị màu RGB - Màu nền có thể được chỉ định thông qua các giá trị màu RGB. Các giá trị này đề cập đến lượng màu đỏ, lục và lam. Mỗi giá trị RGB là một số từ 0 đến 255
cú pháp
<"tag" style="background-color:  rgb("R_value","G_value","B_value");">
Bằng cách sử dụng các giá trị màu HSL - HSL là viết tắt của màu sắc, độ bão hòa và độ sáng. Màu nền có thể được chỉ định thông qua các giá trị màu HSL. Hue đề cập đến mức độ cường độ trên bánh xe màu, trong đó 0 là màu đỏ, 240 là màu xanh lam và 120 là màu xanh lá cây. Mức độ bão hòa là tỷ lệ phần trăm trong khoảng từ 0 đến 100 trong đó 0% có nghĩa là màu xám và 100% có nghĩa là đủ màu. Độ sáng cũng là tỷ lệ phần trăm từ 0 đến 100, xác định cường độ của màu, trong đó 0% là màu đen và 100% là màu trắng, 50% là trung bình
cú pháp
<"tag" style="background-color:  hsl("hue_value","saturation_percentage","lightness_percentage");">
Bằng cách tạo nền gradient - Chúng ta có thể đặt màu nền của trang web bằng cách tạo nền gradient. Nó có thể đạt được bằng cách tạo một dải màu nền bằng cách đề cập đến hướng của dải màu cùng với màu sắc. Độ dốc có thể là tuyến tính, hướng tâm hoặc hình nón
Hãy cho chúng tôi xem điều này với sự trợ giúp của ví dụ sau


  
    Style Property
  
  
    Background linear gradient
  


    
đầu ra
Trong ví dụ trên, chúng tôi xác định một gradient tuyến tính bắt đầu từ bên trái với màu đỏ và chuyển sang màu vàng. Nếu muốn kiểm soát nhiều hơn hướng của dải màu, có thể sử dụng các góc thay vì các hướng được xác định trước

ví dụ

Bây giờ chúng ta sẽ xem các ví dụ khác nhau về các đoạn mã minh họa cách sử dụng thuộc tính màu nền của thuộc tính kiểu với các thành phần HTML khác nhau. Chúng ta sẽ từng bước xây dựng một trang web ngắn và dễ thương có chứa tiêu đề và một số văn bản. Chúng tôi sẽ sử dụng phông chữ đã nhập để làm cho văn bản bắt mắt

ví dụ 1. Đặt màu nền của cơ thể

  
    Style Property
  
  
  
    

      
        Style Attribute
      
    
  


đầu ra
Chúng tôi đã tạo một tiêu đề và áp dụng phông chữ đã nhập của mình. Chúng tôi đã đặt màu nền của phần thân là màu hồng bằng cách sử dụng thuộc tính style bên trong thẻ body
ví dụ 2. Đặt màu nền của phần tử div


  
    Style Property
  
  
  
    

      
        Style Attribute
      
    
    

      In this example, we are using Style Property via inline CSS. We are setting the background color of this div element as light green, and the background color of the body has been set as pink.
    
  


đầu ra
Trong ví dụ này, thuộc tính style cũng đã được sử dụng với thẻ div, cùng với thẻ body. Màu nền mà chúng tôi muốn phần tử div được đề cập trong thuộc tính kiểu thích hợp. Chúng tôi đã đặt màu nền của phần tử div thứ hai là màu xanh lục nhạt và thêm một số văn bản vào đó
 

			
Bạn có thể đặt màu nền trong HTML không?
			
Cách thêm màu nền trong HTML. Để thêm màu nền trong HTML, hãy  sử dụng thuộc tính màu nền CSS . Đặt nó thành tên hoặc mã màu bạn muốn và đặt nó bên trong thuộc tính kiểu. Sau đó, thêm thuộc tính kiểu này vào một phần tử HTML, chẳng hạn như bảng, tiêu đề, div hoặc thẻ span. 
		
			
Màu nền và màu nền có giống nhau trong CSS không?
			
Sự khác biệt chính giữa CSS nền và CSS màu nền là  thuộc tính nền CSS là thuộc tính tốc ký của tất cả các thuộc tính nền.  Đồng thời, background-color là thuộc tính dùng để chỉ định màu nền . 
		
			
Màu nền được gọi trong CSS là gì?
			
Thuộc tính  background-color  đặt màu nền của phần tử. Nền của một phần tử là tổng kích thước của phần tử, bao gồm cả phần đệm và đường viền (nhưng không phải là lề). 
		
			
Mã HTML cho Màu nền là gì?
			
Thuộc tính HTML   bgcolor  được sử dụng để xác định Màu nền của Tài liệu. Giá trị thuộc tính. tên_màu. Nó chỉ định tên của Màu nền của Tài liệu. hex_number. Nó chỉ định mã hex của Màu nền trong Tài liệu.