Підручник з кольором тла HTML - Як змінити колір тла Div, пояснюється прикладами коду

Однією з найпоширеніших речей, яку вам, можливо, доведеться зробити як веб-розробнику, є зміна кольору фону елемента HTML. Але це може заплутати, якщо ви не розумієте, як використовувати background-colorвластивість CSS .

У статті ми обговорюємо

  • значення кольору фону за замовчуванням для елемента HTML
  • як змінити колір тла div, який є дуже поширеним елементом
  • на які частини моделі коробки CSS впливає background-colorвластивість, та
  • різні значення, які може приймати ця властивість.

Колір фону за замовчуванням для елемента

Коліром фону за замовчуванням div є transparent. Отже, якщо ви не вказали колір фону div, він відображатиме колір його батьківського елемента.

Зміна кольору тла Div

У цьому прикладі ми змінимо кольори тла наступних div.

 I love HTML I love CSS I love JavaScript 

Без будь-якого стилю це візуально переведеться на наступне.

Давайте змінимо колір фону div, додавши стилі до класів. Ви можете піти далі, спробувавши приклади у файлі HTML.

 .div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript 

Це призведе до наступного:

Класно! Ми успішно змінили колір тла цього div. Далі давайте дізнаємось більше про цю властивість. Давайте подивимося, як властивість background-color впливає на частини моделі CSS-box.

Колір фону та модель CSS Box

Відповідно до моделі коробки CSS, всі елементи HTML можуть бути змодельовані як прямокутні ящики. Кожна коробка складається з 4 частин, як показано на схемі нижче.

Ви можете ознайомитися з коробкою моделі, якщо ви з нею не знайомі. Питання в тому, на яку частину моделі коробки впливає, коли ви змінюєте колір фону div? Проста відповідь - область заповнення та область вмісту. Підтвердимо це на прикладі.

  body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } 

This is the parent div which contains the div we are testing

This example shows that changing the background color of a div does not affect the border and margin of the div.

Це призведе до:

З наведеного вище прикладу ми бачимо, що на область поля та прикордонну область не впливає зміна кольору тла. Ми можемо змінити колір межі, використовуючи властивість border-color. Область поля залишається прозорою і відображає колір тла батьківського контейнера.

Нарешті, давайте обговоримо значення, які може мати властивість background-color.

Значення кольору фону

Як і властивість color, властивість background-color може приймати шість різних значень. Давайте розглянемо три найпоширеніші значення на прикладі. У цьому прикладі ми встановили колір фону div на червоний з різними значеннями.

 /* 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); } 

The background property can take six different values.

The background property can take six different values.

The background property can take six different values.

Зверніть увагу, що всі вони мають однаковий колір фону.

Інші значення, які background-colorможе приймати властивість, включають значення HSL, спеціальні значення ключових слів та глобальні значення. Ось приклади кожного з них.

/* 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; 

Ви можете прочитати більше про кожне з цих значень тут.

Додаткова примітка

При встановленні кольору фону елемента важливо переконатися, що коефіцієнт контрастності кольору фону та кольору тексту, який він містить, є достатньо високим. Це для того, щоб люди зі слабким зором могли легко читати текст.

Розглянемо ці два div.

Контраст між кольором тла першого div та кольором тексту недостатньо високий, щоб його бачили всі. Отже, якщо ви єдиний користуєтесь веб-сайтом, який ви створюєте, і у вас дуже хороший зір, вам слід уникати таких поєднань кольорів.

Другий div має набагато кращий коефіцієнт контрастності між кольором тла та кольором тексту. Таким чином, це доступніше та зрозуміліше для читання.

Висновок

У цій статті ми побачили, як можна змінити колір фону div. Ми також обговорили, на які частини моделі коробки CSS впливає зміна кольору фону. Нарешті, ми обговорили значення, які може мати властивість background-color.

Сподіваюся, ця стаття виявилася вам корисною. Дякуємо за читання.