Kolory i jednostki w CSS
1. Kolory w CSS
CSS pozwala na definiowanie kolorów na wiele sposobów. Dzięki temu możemy precyzyjnie kontrolować wygląd tekstów, tła, obramowań czy innych elementów.
a) Nazwy kolorów
CSS obsługuje zestaw 147 predefiniowanych nazw kolorów (np. red, blue, green, black, white, lightgray).
Przykład:
✅ Proste w użyciu, ale ograniczone do gotowych nazw.
b) HEX (system szesnastkowy)
Kolory zapisane w postaci sześciu znaków (#RRGGBB), gdzie każda para odpowiada wartości czerwonego (R), zielonego (G) i niebieskiego (B) w skali 0–255 (00–FF w hex).
Przykład:
- Skrócona wersja:
#rgb→ np.#f00=#ff0000. - Można też używać formatu z przezroczystością (
#RRGGBBAA).
c) RGB (Red, Green, Blue)
Kolor opisany wartościami liczbowymi w przedziale 0–255 albo procentowo.
Można również używać kanału alfa (RGBA) – dla przezroczystości:
d) HSL (Hue, Saturation, Lightness)
System bardziej intuicyjny:
- Hue (odcień) – kąt w kole barw (0–360 stopni),
- Saturation (nasycenie) – procent nasycenia (0% = szary, 100% = pełny kolor),
- Lightness (jasność) – procent jasności (0% = czarny, 50% = normalny, 100% = biały).
Przykład:
Można też użyć kanału alfa (HSLA):
2. Jednostki w CSS
Jednostki w CSS określają rozmiary (czcionki, odstępy, szerokości, wysokości). Dzielimy je na bezwzględne i względne.
a) Jednostki bezwzględne
px– piksele, najczęściej używana jednostka.
✅ Precyzyjna, ale nie skaluje się dobrze w responsywnym designie.
b) Jednostki procentowe (%)
Określają wartość względem elementu nadrzędnego (np. szerokość, wysokość, marginesy).
c) Jednostki oparte na czcionce
em– wielokrotność rozmiaru czcionki elementu rodzica.
rem– wielokrotność rozmiaru czcionki elementu (root).
✅ rem zapewnia większą spójność w projekcie niż em.
d) Jednostki oparte na widoku (viewport units)
vw– procent szerokości okna przeglądarki (1vw = 1% szerokości).vh– procent wysokości okna (1vh = 1% wysokości).vmin– mniejsza wartość zvwivh.vmax– większa wartość zvwivh.
Przykład:
✅ Świetne do projektów responsywnych.
3. Zmienne CSS (Custom Properties)
Od CSS3 możemy korzystać z własnych zmiennych, które ułatwiają zarządzanie kolorami, rozmiarami i innymi wartościami.
a) Definiowanie zmiennych
Zmienna CSS jest definiowana w selektorze (najczęściej w :root → odpowiada całemu dokumentowi):
b) Używanie zmiennych
Aby odwołać się do zmiennej, stosujemy funkcję var():
c) Zmienna z wartością domyślną
Jeśli zmienna nie istnieje, można podać wartość zapasową:
d) Dziedziczenie zmiennych
Zmienne są dziedziczone, dlatego możemy definiować inne wartości w różnych częściach dokumentu:
W trybie .dark-mode tekst akapitów zmieni się automatycznie na biały.