Samouczek dotyczący koloru tła HTML - jak zmienić kolor tła elementu Div, wyjaśniono na przykładach kodu

Jedną z najczęstszych rzeczy, które możesz wykonać jako programista stron internetowych, jest zmiana koloru tła elementu HTML. Ale może to być mylące, jeśli nie wiesz, jak używać background-colorwłaściwości CSS .

W artykule omawiamy

  • domyślna wartość koloru tła elementu HTML
  • jak zmienić kolor tła elementu div, który jest bardzo częstym elementem
  • na które części modelu pudełkowego CSS ma wpływ ta background-colorwłaściwość, i
  • różne wartości, które może przyjąć ta właściwość.

Domyślny kolor tła elementu

Domyślny kolor tła elementu div to transparent. Jeśli więc nie określisz koloru tła elementu div, wyświetli on kolor tła elementu nadrzędnego.

Zmiana koloru tła elementu Div

W tym przykładzie zmienimy kolory tła kolejnych elementów div.

 I love HTML I love CSS I love JavaScript 

Bez żadnej stylizacji przełoży się to wizualnie na następujące.

Zmieńmy kolor tła elementów div, dodając style do klas. Możesz śledzić dalej, próbując przykładów w pliku 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 

Spowoduje to:

Fajne! Pomyślnie zmieniliśmy kolor tła tego elementu div. Następnie dowiedzmy się więcej o tej nieruchomości. Zobaczmy, jak właściwość background-color wpływa na części modelu CSS-box.

Kolor tła i model pudełka CSS

Zgodnie z modelem pudełkowym CSS wszystkie elementy HTML można zamodelować jako prostokątne pudełka. Każde pudełko składa się z 4 części, jak pokazano na poniższym schemacie.

Możesz przeczytać o modelu pudełkowym, jeśli go nie znasz. Pytanie brzmi, na którą część modelu pudełka ma wpływ zmiana koloru tła elementu div? Prosta odpowiedź to obszar wypełnienia i obszar zawartości. Potwierdźmy to na przykładzie.

  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.

Spowoduje to:

Z powyższego przykładu widzimy, że na obszar marginesu i obszar obramowania nie ma wpływu zmiana koloru tła. Możemy zmienić kolor obramowania za pomocą właściwości border-color. Obszar marginesu pozostaje przezroczysty i odzwierciedla kolor tła kontenera nadrzędnego.

Na koniec omówmy wartości, jakie może przyjąć właściwość background-color.

Wartości koloru tła

Podobnie jak właściwość color, właściwość background-color może przyjmować sześć różnych wartości. Rozważmy na przykładzie trzy najczęstsze wartości. W tym przykładzie ustawiliśmy kolor tła elementu div na czerwony z różnymi wartościami.

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

Zauważ, że wszystkie mają ten sam kolor tła.

Inne wartości, które background-colormoże przyjąć właściwość, obejmują wartość HSL, specjalne wartości słów kluczowych i wartości globalne. Oto przykłady każdego z nich.

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

Możesz przeczytać więcej o każdej z tych wartości tutaj.

Dodatkowa uwaga

Podczas ustawiania koloru tła elementu należy upewnić się, że współczynnik kontrastu koloru tła i koloru zawartego w nim tekstu jest wystarczająco wysoki. Ma to na celu zapewnienie osobom niedowidzącym łatwego czytania tekstu.

Rozważ te dwa elementy div.

Kontrast między kolorem tła pierwszego elementu div a kolorem tekstu nie jest wystarczająco duży, aby wszyscy mogli go zobaczyć. Więc jeśli nie jesteś jedyną osobą korzystającą z budowanej przez siebie strony i masz bardzo dobry wzrok, powinieneś unikać takich kombinacji kolorystycznych.

Drugi element div ma znacznie lepszy współczynnik kontrastu między kolorem tła a kolorem tekstu. Dzięki temu jest bardziej przystępny i czytelny dla ludzi.

Wniosek

W tym artykule widzieliśmy, jak można zmienić kolor tła elementu div. Omówiliśmy również, na które części modelu CSS ma wpływ zmiana koloru tła. Na koniec omówiliśmy wartości, jakie może przyjąć właściwość background-color.

Mam nadzieję, że ten artykuł okazał się przydatny. Dziękuje za przeczytanie.