Kolory i tła — CSS

Możesz ustawić kolor tekstu, tło oraz obramowania.

Jak to działa?

Wartości kolorów zapisuje się m.in. w HEX, RGB i HSL. color dotyczy tekstu, a background tła elementu. Pamiętaj o wystarczającym kontraście.

Przykład 1 — poznaj zapis

.notice {
  color: #132238;
  background: #e8f3ff;
  border-left: 0.25rem solid #3478f6;
}

Element z klasą .notice otrzyma błękitne tło i lewą linię.

Przeczytaj kod linijka po linijce

.notice {Wybieramy elementy, które mają otrzymać podane style.
color: #132238;Nadajemy kolor lub wygląd tła.
background: #e8f3ff;Nadajemy kolor lub wygląd tła.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Blok notice ma jasnoniebieskie tło i kolorowy lewy brzeg.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

.box { background: linear-gradient(to right, gold, orange); }

Wynik drugiego przykładupo uruchomieniu przykładu

Złoto-pomarańczowy gradient.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Przygotuj wariant komunikatu błędu z czerwonym akcentem.