Kolory i tekst w CSS

Teraz, gdy umiemy wybierać elementy selektorami, przyjrzyjmy się niektórym często używanym właściwościom CSS dotyczącym kolorów i tekstu.

Kolory w CSS

Kolory w CSS można definiować na kilka sposobów:

• Po nazwie koloru – jest zestaw predefiniowanych nazw (po angielsku) jak red, blue, green, black, white, gray itd. Przykład:

  color: red; /* ustawi kolor tekstu na czerwony */

• Za pomocą szesnastkowego kodu (HEX) – format #RRGGBB, gdzie RR, GG, BB to wartości składowych koloru (czerwonej, zielonej, niebieskiej) zapisane w systemie szesnastkowym (00 do FF). Przykłady: #000000 to czarny, #ffffff to biały, #ff0000 to czysty czerwony. Można też użyć skróconej formy #RGB jeśli każda para jest taka sama (np. #fff zamiast #ffffff).
• Za pomocą funkcji RGB – zapis rgb(R, G, B) gdzie R, G, B to wartości 0–255 określające natężenie składowych. Przykład: rgb(255, 0, 0) to czerwony. Istnieje też rgba(R, G, B, A) z czwartą wartością alfa (A) 0–1 określającą przezroczystość koloru.

Przykłady zastosowania kolorów:

/* Kolor tekstu elementu */
h1 {
    color: blue; /* nazwa koloru */
}
p {
    color: #ff6347; /* hex (tu kolor "tomato") */
}
.highlight {
    color: rgb(200, 50, 50); /* RGB (ciemnoczerwony odcień) */
}

W powyższym kodzie wszystkie <h1> będą niebieskie, paragrafy <p> w kolorze o kodzie #ff6347 (odcień pomidorowy), a elementy z klasą highlight w ciemnym czerwonym odcieniu (rgb(200,50,50)).

Tło (background)

Właściwość background-color ustawia kolor tła dowolnego elementu blokowego (a także inline – choć dla inline tylko obszar za tekstem się wypełni). Przykład:

body {
    background-color: #f0f0f0; /* jasnoszare tło dla całej strony */
}

Możemy również umieścić obrazek w tle za pomocą background-image. Przykład:

div.banner {
    background-image: url('naglowek.jpg');
}

Taki obrazek domyślnie będzie powtarzany (kafelkuje się) jeśli jest mniejszy niż obszar tła. Szczegóły dotyczące background-repeat, background-position czy background-size to bardziej zaawansowane tematy. Można też łączyć wiele właściwości tła w jedną skróconą właściwość background, ale na początek warto trzymać się osobnych deklaracji dla czytelności.

Podstawy typografii (czcionki i tekst)

Następujące właściwości pozwalają kontrolować wygląd tekstu:

• font-family – określa krój pisma (czcionkę). Możemy podać konkretne fonty zainstalowane na komputerze użytkownika (np. "Arial", "Times New Roman", "Courier New"), a na końcu warto dodać rodzinę ogólną jako fallback (serif, sans-serif, monospace). Przykład:

  p {
      font-family: "Arial", sans-serif;
  }

• font-size – wielkość tekstu. Można wyrazić w pikselach (px), punktach (pt), procentach (%) lub jednostkach względnych jak em, rem. Na początek najprościej używać pikseli, np.:

  h1 {
      font-size: 32px;
  }

  Domyślnie przeglądarki wyświetlają tekst około 16px dla zwykłego tekstu.
• font-weight – grubość (waga) pisma. Standardowe wartości to normal i bold, można też używać liczb 100–900 jeśli font to obsługuje. Przykład:

  p strong {
      font-weight: bold;
  }

• line-height – wysokość linii tekstu (odstęp pionowy między wierszami). Można podać wartość bez jednostki jako mnożnik, np. line-height: 1.5;.
• text-align – wyrównanie tekstu w poziomie: left, right, center, justify.

Przykładowe zastosowanie powyższych właściwości:

/* Ustawienia globalne dla body */
body {
    background-color: #ffffff; /* białe tło strony */
    color: #333333; /* kolor tekstu (ciemnoszary zamiast czarnego dla wygody czytania) */
    font-family: "Segoe UI", sans-serif; /* czcionka główna strony */
    font-size: 16px; /* bazowy rozmiar tekstu */
    line-height: 1.6; /* nieco większa wysokość linii dla czytelności */
}

/* Nagłówki wyrównane na środku, pogrubione domyślnie (elementy <h1>-<h6> są z natury bold) */
h1, h2, h3 {
    text-align: center;
}

/* Akapity wyjustowane */
p {
    text-align: justify;
}

/* Przykład klasy, która zmienia font i wagę */
.highlight {
    font-family: "Courier New", monospace;
    font-weight: bold;
    color: #d9534f; /* jakiś wyraźny kolor (czerwonawy) */
}

W powyższym kodzie zdefiniowaliśmy domyślny wygląd tekstu na stronie (dla body i ogólnie dla elementów typograficznych). Pokazuje to, jak CSS pozwala kontrolować wygląd czcionek i tekstu: od rodzaju fontu, przez rozmiar i grubość, po kolor i wyrównanie.