Thẻ HTML nào được sử dụng cho màu nền?

Màu nền sử dụng mã màu Hex

Coloring a webpage background is actually pretty simple. The first and most popular way is by using a Hex color code with the background-color property. Here we apply a Hex color directly on the HTML element using the style attribute.

HTML

Bản demo trên CodePen

Phương pháp tương tự này có thể được sử dụng để tạo kiểu cho bất kỳ phần tử HTML nào, nhưng hãy nhớ rằng hành vi của chúng có thể khác nhau tùy thuộc vào việc chúng là phần tử cấp độ khối hay nội tuyến. Sử dụng công cụ chọn màu hoặc biểu đồ màu của chúng tôi để tìm mã màu Hex

Màu nền sử dụng tên màu HTML

Mã màu HEX có thể là phổ biến nhất, nhưng chúng chỉ là một trong nhiều phương pháp có sẵn để tô màu cho phần tử HTML. Cách thứ hai là sử dụng tên màu HTML;

HTML

Bản demo trên CodePen

Dưới đây là danh sách hữu ích của tất cả 140 tên màu HTML với các giá trị HEX và RGB tương ứng của chúng để tham khảo

Màu nền sử dụng các giá trị màu RGB

Các giá trị RGB cũng có thể được sử dụng để thêm màu nền cho các phần tử HTML. Sử dụng cùng một thuộc tính kiểu như trước đây, thay thế mã HEX hoặc tên màu bằng một giá trị RGB được định dạng đúng [hãy đảm bảo đặt nó trong dấu ngoặc đơn và đặt tiền tố bằng chữ thường 'rgb']

HTML

Bản demo trên CodePen

Khi sử dụng các giá trị RGB trong HTML, bạn có thêm tùy chọn chỉ định mức độ mờ. Với tiền tố rgba[] – 'a' là viết tắt của alpha, kênh kiểm soát độ trong suốt – bạn có thể chèn giá trị thứ tư trong khoảng từ 0 đến 1, 0 cho hoàn toàn trong suốt và 1 cho hoàn toàn mờ đục [sử dụng giá trị thập phân cho các mức ở giữa]

HTML

Bản demo trên CodePen

Màu nền sử dụng các giá trị màu HSL

Ít phổ biến hơn nhưng không kém phần mạnh mẽ, các giá trị HSL hiện được nhiều trình duyệt hiện đại hỗ trợ. Nếu bạn không quen với HSL [viết tắt của Hue, Saturation và Lightness], hãy truy cập Wikipedia để biết lý do tại sao chúng lại tuyệt vời như vậy. Nếu bạn chỉ muốn sử dụng chúng cho màu nền HTML, hãy làm theo cú pháp tương tự như các giá trị RGB ở trên, nhưng thay vào đó sử dụng tiền tố hsl[]

HTML

Bản demo trên CodePen

Giống như những người anh em RGB của họ, HSL cũng có thể được chuyển qua kênh alpha để kiểm soát độ mờ. Sử dụng tiền tố hsla[] và chèn giá trị thứ tư trong khoảng từ 0 đến 1

Một trang web điển hình bao gồm các yếu tố khác nhau. Đây có thể là các nút gửi, hộp kiểm, nút đăng ký hoặc đăng nhập, tiện ích để cuộn mượt mà, biểu ngữ và băng chuyền, v.v.

Chúng tôi sử dụng các thuộc tính HTML và CSS để tạo kiểu cho tất cả các phần tử này. Nhưng ngay cả khi tất cả các yếu tố trông đẹp, thì vẫn cần phải có nền thích hợp cho trang. Đây có thể là một hình ảnh hoặc chỉ là một màu sắc

Đối với điều này, bạn cần chỉ định màu bạn muốn cho thẻ kiểu HTML. Hoặc, bạn có thể thêm màu nền mong muốn vào biểu định kiểu CSS

Trong bài viết này, chúng ta sẽ thảo luận về các khía cạnh khác nhau của việc đặt màu nền cho trang web và các yếu tố khác nhau của nó

Thêm màu nền vào nội dung trang bằng thuộc tính kiểu

Bạn có thể đặt màu nền cho nội dung trang HTML theo hai cách. Bạn có thể sử dụng thuộc tính bgcolor trong thẻ body. Phương pháp khác là sử dụng thuộc tính style. Trong quá trình này, thuộc tính style của thẻ body được sử dụng. Thuộc tính kiểu này có thuộc tính màu nền mà bạn sẽ sử dụng để đặt màu nền của trang web

Thuộc tính bgcolor đã được sử dụng trước đó, hiện đã bị xóa khỏi HTML 5

Đặt Màu nền của phần thân bằng thuộc tính bgcolor [không sử dụng CSS]

Background Color: body gbcolor


Background colour in HTML

Mã vận hành

Ghi chú. thuộc tính bgcolor bị xóa trong HTML 5

Đặt Màu nền của phần thân bằng thuộc tính kiểu [Inline CSS]

HTML Backgorund Color: Style Propertyr


HTML Backgorund Color
Using CSS style.

Mã vận hành

đầu ra

Nhưng bạn phải nhớ rằng thuộc tính kiểu được ưu tiên hơn bất kỳ kiểu nào khác được chỉ định cho trang web. Vì vậy, các thuộc tính được đề cập kiện thuộc tính kiểu sẽ ghi đè bất kỳ kiểu nào được đặt trong

Mã vận hành

Thêm màu nền cho phần tử HTML

Bây giờ chúng ta sẽ xem xét các cách khác nhau để thêm màu nền cho các phần tử HTML

Đặt màu nền thành Văn bản

Để đặt màu nền bắt buộc cho văn bản trên trang, bạn phải sử dụng thuộc tính color. Bạn có thể chỉ định màu mong muốn trong

công nghệ. com

Mã vận hành

Đặt màu nền thành ,,Thẻ

Trước đó, thuộc tính bgcolor được sử dụng để đặt màu cho bảng. Vì nó không được dùng trong HTML5, bạn sẽ phải sử dụng CSS. Đối với điều này, hãy sử dụng mã CSS sau

Backgorund Color table, td, th tags






Head
Head


Stechies
Stechies

Mã vận hành

Thuộc tính tương tự của màu nền có thể được sử dụng để đặt màu cho tiêu đề bảng, hàng hoặc ô trong bảng

đầu ra

Đặt màu nền thành

thẻ

Bạn có thể đặt màu bạn chọn cho các phần tử div và đoạn văn bằng cách sử dụng HTML hoặc CSS. Trong HTML, bạn có thể sử dụng

Màu nền cho Thẻ div

Mã vận hành

đầu ra

Đặt màu nền để tạo thành các phần tử như nút và hộp văn bản

Màu nền có thể được đặt để tạo thành các thành phần như nút và hộp văn bản bằng cách sử dụng thẻ kiểu trong HTML. Ví dụ,

Mã vận hành

đầu ra

Đặt màu nền để tạo các thành phần như nút và hộp văn bản bằng thuộc tính ID

Nếu bạn đang sử dụng CSS, bạn có thể đặt màu dễ dàng với sự trợ giúp của thuộc tính id. Bạn có thể đặt giá trị id của nút hoặc hộp văn bản thành bất kỳ thứ gì bạn thích. Id này sau đó có thể được tham chiếu khi viết mã CSS. Ví dụ: nếu nút có id=submit_button và hộp văn bản có id=text, mã CSS sau sẽ được áp dụng,

Backgorund Color Using id tag

Mã vận hành

Đặt màu nền để tạo thành các phần tử như nút và hộp văn bản bằng thuộc tính lớp

Bạn có thể sử dụng thuộc tính lớp giống như thuộc tính ID, nhưng điểm khác biệt chính giữa ID và thuộc tính Lớp là chúng ta có thể sử dụng nhiều lớp trong bất kỳ phần tử HTML nào, nhưng chúng ta chỉ có một phần tử HTML ID

HTML

Mã vận hành

Các cách khác nhau để xác định màu trong thuộc tính nền

Sử dụng mã màu Hex

Bạn có thể chỉ định màu nền thông qua mã màu thập lục phân. Bạn có thể đề cập đến điều này trong thẻ kiểu hoặc sử dụng thuộc tính màu nền CSS

Đối với HTML,

HTML

Điều này sẽ đặt màu nền thành Indigo

Sử dụng tên màu HTML

Bạn có thể chỉ định tên màu trong tài liệu HTML hoặc CSS cho trang web hoặc nền phần tử

Đối với HTML,

HTML

Sử dụng các giá trị màu RGB

Các giá trị RGB được sử dụng để xác định lượng màu đỏ, lục và lam bằng một số. Con số này nằm trong khoảng từ 0 đến 255

Đối với HTML,

HTML

Giá trị RGB[255,0,0] sẽ làm cho màu nền có màu đỏ. Điều này là do màu đỏ được đặt ở mức cao nhất và các màu khác được đặt thành 0

Sử dụng các giá trị màu HSL

Một cách khác để thêm màu nền là sử dụng các giá trị HSL trong HTML và CSS. Nó là viết tắt của màu sắc, độ bão hòa và độ sáng. Hue là mức độ cường độ trên bánh xe màu. Ở đây, 0 có nghĩa là màu đỏ, 240 là màu xanh dương và 120 là màu xanh lá cây. Mức độ bão hòa là tỷ lệ phần trăm trong đó 0 % là màu xám 100 % là màu đầy đủ

Giá trị phần trăm được sử dụng cho độ sáng xác định cường độ của màu. Ở đây, 0% là màu đen và 100% là màu trắng. 50% không sáng cũng không tối. Sử dụng mã bên dưới cho các giá trị HSL

Đối với HTML,

HTML

Tạo nền dốc

Bạn có thể tạo nền chuyển màu cho trang web bằng CSS. Có hai cách để đi về nó

Độ dốc tuyến tính màu nền

Trong phương pháp này, hướng của gradient được đề cập cùng với màu sắc. Có thể sử dụng các hướng như xuống dưới, lên trên, sang phải, sang trái hoặc xuống dưới cùng bên phải

Ví dụ,

HTML Backgorund Color: Style Propertyr


HTML Backgorund Color
Using CSS style.

Mã vận hành

Bạn cũng có thể sử dụng nhiều màu với nhau. Thay vì chỉ đường, bạn có thể sử dụng các góc như -90deg

đầu ra

Độ dốc xuyên tâm màu nền

Ở đây, gradient được xác định bởi tâm của nó. Bạn sẽ phải đề cập đến ít nhất hai màu

Cú pháp cơ bản như sau

hình nền. radial-gradient [kích thước hình dạng tại vị trí, màu bắt đầu,. , màu cuối cùng];

Ví dụ,

HTML Backgorund Color: Style Propertyr


HTML Backgorund Color
Using CSS style.

Mã vận hành

đầu ra

Phần kết luận

Các cách khác nhau để đặt màu nền được thảo luận. Bạn có thể đề cập đến các kiểu trong tài liệu HTML bằng cách sử dụng

Thẻ nền trong HTML là gì?

Làm cách nào để chèn nền trong HTML?