Hướng dẫn div background color html - màu nền div html

Question

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ể khó hiểu nếu bạn không hiểu cách sử dụng thuộc tính CSS background-color.

Nội dung chính Show

Màu nền mặc định của một phần tử
Thay đổi màu nền của một div
Màu nền và mô hình hộp CSS
Giá trị màu nền
Sự kết luận

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

giá trị màu nền mặc định của phần tử HTML
Cách thay đổi màu nền của một div, là một yếu 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 và
Các giá trị khác nhau thuộc tính này có thể lấy.

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

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

Thay đổi màu nền 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.

<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>

Không có bất kỳ kiểu dáng, điều này sẽ chuyển thành trực quan sau.

Hãy thay đổi màu nền của các div bằng cách thêm các 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.

<style>
    .div-1 {
        background-color: #EBEBEB;
    }
    
    .div-2 {
    	background-color: #ABBAEA;
    }
    
    .div-3 {
    	background-color: #FBD603;
    }
</style>

<body>
    <div class="div-1"> I love HTML </div>
    <div class="div-2"> I love CSS </div>
    <div class="div-3"> I love JavaScript </div>
</body>

Điều này sẽ dẫn đến những điều sau đây:

Mát mẻ! 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 biết thêm về tài sản này. Hãy xem thuộc tính màu nền ảnh hưởng đến các phần của mô hình hộp CSS như thế nào.

Màu nền và mô hình hộp CSS

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

Mô hình hộp CSS

Bạn có thể đọc trên mô hình hộp nếu bạn không quen thuộc 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 div? Câu trả lời đơn giản là khu vực đệm và khu vực nội dung. Hãy xác nhận điều này bằng cách sử dụng một ví dụ.


<style>
    body {
        background-color: #ABBAEA;
    }
    div {
        height: 200px;
        margin: 20px;
        border: 5px solid;
        background-color: #FBD603;
    }
</style>
<body>
    <div>
        <p>This is the parent div which contains the div we are testing</p>

        <div>
            <p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
        </div>
    </div>
</body>

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

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

Cuối cùng, chúng ta hãy thảo luận về các giá trị mà thuộc tính màu nền có thể lấy.

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ể lấy 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ụ, 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.

<style>
    /* Keyword value/name of color */
    .div-1 {
        background-color: red;
    }
    
    /* Hexadecimal value */
    .div-2 {
       background-color: #FF0000;	 
    }
    
    /* RGB value */
    .div-3 {
    	background-color: rgb(255,0,0);
    }
    
</style>

<body>
    <div class="div-1">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-2">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-3">
        <p>The background property can take six different values.</p>
    </div>
</body>

Lưu ý rằng tất cả đều kết quả với cùng một màu nền.

Các giá trị khác thuộc tính background-color có thể lấy bao gồm giá trị HSL, giá trị từ khóa đặc biệt và giá trị toàn cầu. Dưới đây là ví dụ của mỗi người trong số họ.

/* HSL value */
background-color: hsl(0, 100%, 25%;

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

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

Khi đặt màu nền của một phần tử, điều quan trọng là đả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 nó chứa đủ cao. Điều này là để đảm bảo rằng những người có tầm nhìn thấp 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 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 các kết hợp màu 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. Vì vậy, nó dễ tiếp cận và rõ ràng hơn cho mọi người đọc.

Sự 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ề 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 tôi đã thảo luận về các giá trị mà thuộc tính màu nền có thể lấy.

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

Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu