Hướng dẫn về màu nền HTML – Cách thay đổi màu nền của khối chia, được giải thích bằng các ví dụ về mã – màu nền thẻ div

Một trong những điều phổ biến nhất mà bạn có thể phải làm với tư cách là nhà phát triển web là thay đổi màu nền của phần tử HTML. Nhưng nó có thể gây nhầm lẫn nếu bạn không hiểu cách sử dụng thuộc tính background-color của CSS. Trong bài viết, chúng tôi thảo luận về

Bạn đang xem: màu nền thẻ div

Một trong những điều phổ biến nhất bạn có thể phải làm với tư cách là nhà phát triển web là thay đổi màu nền của một phần tử HTML. Nhưng có thể bạn sẽ khó hiểu nếu không hiểu cách sử dụng thuộc tính CSS background-color .

Trong bài viết này, chúng tôi thảo luận về

  • giá trị màu nền mặc định của một phần tử HTML
  • cách thay đổi màu nền của một div, là một phần tử rất phổ biến
  • phần nào của mô hình hộp CSS bị ảnh hưởng bởi thuộc tính background-color
  • các giá trị khác nhau mà thuộc tính này có thể nhận .

Màu nền mặc định của phần tử

Màu nền mặc định của div là trong suốt . Vì vậy, nếu bạn không chỉ định màu nền của một div, nó sẽ hiển thị màu của phần tử mẹ của nó.

Thay đổi nền Màu của một div

Trong ví dụ này, chúng tôi sẽ thay đổi màu nền của các div sau.

  & lt; div class = "div -1 "& gt; Tôi thích HTML & lt; / div & gt;
& lt; div class = "div-2" & gt; Tôi yêu thích CSS & lt; / div & gt;
& lt; div class = "div-3" & gt; Tôi thích JavaScript & lt; / div & gt;
 

Không có bất kỳ kiểu dáng nào, điều này sẽ chuyển sang dạng sau đây một cách trực quan.

Hãy thay đổi màu nền của các div bằng cách thêm kiểu vào các lớp. Bạn có thể làm theo bằng cách thử các ví dụ trong tệp HTML.

  & lt; style & gt;
    .div-1 {
        màu nền: #EBEBEB;
    }
    
    .div-2 {
    màu nền: #ABBAEA;
    }
    
    .div-3 {
    màu nền: # FBD603;
    }
& lt; / style & gt;

& lt; body & gt;
    & lt; div class = "div-1" & gt; Tôi thích HTML & lt; / div & gt;
    & lt; div class = "div-2" & gt; Tôi yêu thích CSS & lt; / div & gt;
    & lt; div class = "div-3" & gt; Tôi thích JavaScript & lt; / div & gt;
& lt; / body & gt;
 

Điều này sẽ dẫn đến kết quả sau:

Tuyệt vời! Chúng tôi đã thay đổi thành công màu nền của div này. Tiếp theo, chúng ta hãy tìm hiểu thêm về tài sản này. Hãy xem thuộc tính background-color ảnh hưởng như thế nào đến các phần của mô hình CSS-box.

Background Color và CSS Box Model

Theo mô hình hộp CSS, tất cả các phần tử HTML có thể được mô hình hóa dưới dạng hình hộp chữ nhật. Mỗi hộp bao gồm 4 phần như thể hiện trong sơ đồ bên dưới.

Mô hình hộp CSS

Bạn có thể đọc thêm mô hình hộp nếu bạn chưa quen với nó. Câu hỏi đặt ra là phần nào của mô hình hộp bị ảnh hưởng khi bạn thay đổi màu nền của một div? Câu trả lời đơn giản là vùng đệm và vùng nội dung. Hãy xác nhận điều này bằng cách sử dụng một ví dụ.

 
& lt; phong cách & gt;
    thân hình {
        màu nền: #ABBAEA;
    }
    div {
        chiều cao: 200px;
        lề: 20px;
        border: 5px solid;
        màu nền: # FBD603;
    }
& lt; / style & gt;
& lt; body & gt;
    & lt; div & gt;
        & lt; p & gt; Đây là div mẹ chứa div mà chúng tôi đang kiểm tra & lt; / p & gt;

        & lt; div & gt;
            & lt; p & gt; Ví dụ này cho thấy rằng việc thay đổi màu nền của một div không ảnh hưởng đến đường viền và lề của div. & lt; / p & gt;
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / body & gt;


 

Điều này sẽ dẫn đến:

Từ ví dụ trên, chúng ta có thể thấy rằng vùng lề và vùng viền không bị ảnh hưởng bởi sự thay đổi màu nền. Chúng ta có thể thay đổi màu của đường viền bằng cách sử dụng thuộc tính border-color. Vùng lề vẫn trong suốt và phản ánh màu nền của vùng chứa mẹ.

Cuối cùng, hãy thảo luận về các giá trị mà thuộc tính background-color có thể nhận.

Giá trị màu nền

Giống như thuộc tính color, thuộc tính background-color có thể nhận sáu giá trị khác nhau. Hãy xem xét ba giá trị phổ biến nhất với một ví dụ. Trong ví dụ này, chúng tôi đặt màu nền của div thành màu đỏ với các giá trị khác nhau.

 & lt; style & gt;
    / * Giá trị từ khóa / tên màu * /
    .div-1 {
        background-color: đỏ;
    }
    
    / * Giá trị thập lục phân * /
    .div-2 {
       màu nền: # FF0000;
    }
    
    / * Giá trị RGB * /
    .div-3 {
    background-color: rgb (255,0,0);
    }
    
& lt; / style & gt;

& lt; body & gt;
    & lt; div class = "div-1" & gt;
        & lt; p & gt; Thuộc tính nền có thể nhận sáu giá trị khác nhau. & lt; / p & gt;
    & lt; / div & gt;

    & lt; div class = "div-2" & gt;
        & lt; p & gt; Thuộc tính nền có thể nhận sáu giá trị khác nhau. & lt; / p & gt;
    & lt; / div & gt;

    & lt; div class = "div-3" & gt;
        & lt; p & gt; Thuộc tính nền có thể nhận sáu giá trị khác nhau. & lt; / p & gt;
    & lt; / div & gt;
& lt; / body & gt;
 

Lưu ý rằng tất cả chúng đều có cùng màu nền.

Các giá trị khác mà thuộc tính background-color có thể nhận bao gồm giá trị HSL, giá trị từ khóa đặc biệt và giá trị chung. Dưới đây là các ví dụ về từng loại.

  / * Giá trị HSL * /
màu nền: hsl (0, 100%, 25%;

/ * Giá trị từ khóa đặc biệt * /
background-color: màu hiện tại;
background-color: trong suốt;

/ * Giá trị toàn cầu * /
background-color: kế thừa;
background-color: ban đầu;
background-color: unset;
 

Bạn có thể đọc thêm về từng giá trị này tại đây .

Lưu ý bổ sung

Khi đặt màu nền của một phần tử, điều quan trọng là phải đảm bảo rằng tỷ lệ tương phản của màu nền và màu của văn bản trong đó đủ cao. Điều này nhằm đảm bảo rằng những người có thị lực kém có thể dễ dàng đọc văn bản.

Hãy xem xét hai div này.

Độ tương phản giữa màu nền của div đầu tiên và màu của văn bản không đủ cao để mọi người có thể nhìn thấy. Vì vậy, trừ khi bạn là người duy nhất sử dụng trang web bạn đang xây dựng và bạn có thị lực rất tốt, bạn nên tránh kết hợp màu sắc như vậy.

div thứ hai có tỷ lệ tương phản tốt hơn nhiều giữa màu nền và màu của văn bản. Do đó, mọi người dễ đọc hơn và rõ ràng hơn.

Kết luận

Trong bài viết này, chúng tôi đã thấy cách bạn có thể thay đổi màu nền của một div . Chúng tôi cũng đã thảo luận về những phần nào của mô hình hộp CSS bị ảnh hưởng bởi sự thay đổi màu nền. Cuối cùng, chúng ta đã thảo luận về các giá trị mà thuộc tính background-color có thể nhận.

Tôi hy vọng bạn thấy bài viết này hữu ích. Cảm ơn vì đã đọc.


Xem thêm những thông tin liên quan đến chủ đề màu nền thẻ div

How To Add Background Image In Div In HTML Using CSS | ProgrammingGeek

  • Tác giả: ProgrammingGeek
  • Ngày đăng: 2020-10-08
  • Đánh giá: 4 ⭐ ( 8429 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: if you want to add background image in div tag in html using CSS this tutorial for you. This video teach you how to set background image in div or how to add background image in div tag with html using CSS step by step.
    You must conscious about your image resolution(Width X Height) that is div tags resolution(Width X Height) should be equal with image resolution(Width X Height).
    after adding background image you can add any object or tag in div tag. I have shown heading tag and input text.

    This tutorial I have used In-Line CSS but you can also use In-Line, Internal or external CSS.
    If your image is in another folder you should put folder location in background url. If your image is in the same location of html file then just put image name only in background url attribute.

    ——
    This channel covers all the programming tutorial related with .Net- C, linq, VB, SQL, Android, HTML, CSS, jQuery, Crystal Report and Microsoft Report.
    So, Please subscribe and keep in touch.
    https://www.youtube.com/channel/UCyc31q0rUGp-s07Ebn1x65g

    Visit my page in Facebook
    https://www.facebook.com/programminggeek7
    ——
    More Tags
    HowToAddBackgroundImageInDivInHTML SetBackgroundImageInDivTag ProgrammingGeek

    programminggeek, how to set background image in div html, set background image in html and css,add background image in div tag, background image in div tag in html, background image in div,html, how to add background image in div in html css, background image in div css, background image in div html, how to set background image in div,how to put background image in div tag in html, how to, html div background image

Div là gì? Cách dùng thẻ div trong HTML từ A đến Z – Blog

  • Tác giả: vn.got-it.ai
  • Đánh giá: 5 ⭐ ( 5786 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ div là một thẻ được dùng nhiều trong HTML. Cụ thể khái niệm thẻ div là gì, nhiệm vụ của thẻ div và những lưu ý đặc biệt khi sử dụng thẻ div trong HTML là gì? Cùng tìm hiểu sau đây.

Thẻ div, màu nền, hình nền, khung trong CSS

  • Tác giả: www.quocbuugroup.com
  • Đánh giá: 4 ⭐ ( 6173 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu thẻ div, màu nền, hình nền, khung trong CSS, bài giảng được biên soạn và đăng tải trên website quocbuugroup.com có kèm video hướng dẫn tiếng Việt, học viên có thể tham khảo thêm nhiều video hướng dẫn lập trinh web trên kênh youtube của Quốc Bửu Group để bổ sung kiến thức.

Màu chữ và màu nền trong CSS

  • Tác giả: lamvt.vn
  • Đánh giá: 3 ⭐ ( 2993 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

màu nền div, để thay đổi onhover

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 3398 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Theo a:hovernghĩa đen, “” cho trình duyệt thay đổi các thuộc tính cho -tag, khi con…

Thiết lập màu nền (background) trong HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 3418 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Màu nền (background) trong HTML của trang web mặc định là màu trắng. Bạn không thích màu này và muốn thiết lập một màu nền khác cho trang của bạn. HTML cung cấp cho bạn hai cách sau để cài đặt nền cho trang web của bạn

Hướng dẫn cơ bản về cách sử dụng thẻ DIV trong thiết kế giao diện Web

  • Tác giả: www.dammio.com
  • Đánh giá: 5 ⭐ ( 9762 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Thanh tiến trình HTML5 đơn giản - thanh tiến trình html đơn giản