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 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 này, chúng tôi thảo luận về

Bạn đang xem: màu nền trên 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. Tuy nhiên, việc làm này 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 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:

Xem Thêm  Mảng chuỗi trong Java - cách tạo một mảng chuỗi trong java

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 về 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 màu, thuộc tính màu nền 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 yếu 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 trên div

how to Change div background text color on every few seconds javascript

  • Tác giả: Haritha Computers & Technology
  • Ngày đăng: 2019-03-16
  • Đánh giá: 4 ⭐ ( 3008 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: divbackgroundcolor textcolorchange divchangecolor

    change background and text color of the div automatically on every few seconds using javascript

Thiết lập hình nền trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 7952 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập hình nền trong CSS như màu sắc, hình ảnh, cách sử dụng các thuộc tính của hình nền như có lặp không, vị trí ảnh, viết css ngắn cho hình nền …

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

  • Tác giả: viettuts.vn
  • Đánh giá: 5 ⭐ ( 5764 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

Tạo background và đường viền cho thẻ HTML

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 1567 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này mình sẽ hướng dẫn cách tạo background cho các thẻ HTML, qua đó bạn sẽ biết cách sử dụng một số thuộc tính CSS về background và border cho thẻ.

Cách để Thiết lập màu nền trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 3822 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Thiết lập màu nền trong HTML

9 cách sử dụng background (nền) trong CSS

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

Web888 chia sẻ kiến thức lập trình, kinh doanh, mmo

  • Tác giả: web888.vn
  • Đánh giá: 3 ⭐ ( 2510 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

By ads_php