Właściwości tekstu: czcionki, kolory, wyrównanie

W tej lekcji dowiesz się, jak kontrolować wygląd tekstu na stronie za pomocą CSS. Omówimy czcionki, kolory oraz wyrównanie tekstu. Dzięki temu będziesz mógł tworzyć strony o profesjonalnym i atrakcyjnym wyglądzie, które będą przyjazne dla użytkowników.

Dlaczego właściwości tekstu są ważne?

Czytelność: Odpowiednie czcionki i kolory zwiększają komfort czytania.
Estetyka: Styl tekstu wpływa na ogólny wygląd strony i jej odbiór przez użytkownika.
Branding: Dobór czcionek i kolorów pomaga w budowaniu rozpoznawalności marki.
Dostępność: Kontrast między tekstem a tłem jest kluczowy dla osób z problemami wzroku.

Czcionki

1. Rodziny czcionek (font-family)

font-family określa rodzaj czcionki używanej do wyświetlania tekstu.

Przykład:

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

Wyjaśnienie: Jeśli pierwsza czcionka (Arial) nie jest dostępna, przeglądarka użyje kolejnej z listy. Ostatecznie zastosuje dowolną czcionkę bezszeryfową (sans-serif).

Popularne rodziny czcionek:

Serif (szeryfowe): Times New Roman, Georgia
Sans-serif (bezszeryfowe): Arial, Helvetica, Verdana
Monospace (stałopozycyjne): Courier New, Lucida Console

2. Rozmiar czcionki (font-size)

font-size kontroluje wielkość tekstu.

Przykład:

h1 {
  font-size: 36px;
}

p {
  font-size: 16px;
}

Jednostki miary:
- piksele (px): jednostka absolutna
- em: jednostka względna względem rodzica
- rem: jednostka względna względem elementu root (zwykle <html>)
- procenty (%): względem elementu rodzica

Przykład z jednostką em:

p {
  font-size: 1em; /* Równe rozmiarowi czcionki rodzica */
}

small {
  font-size: 0.8em; /* 80% rozmiaru czcionki rodzica */
}

3. Styl czcionki (font-style)

font-style pozwala na ustawienie kursywy.

Wartości:

normal – tekst normalny
italic – tekst pochylony
oblique – tekst nachylony

Przykład:

em {
  font-style: italic;
}

4. Grubość czcionki (font-weight)

font-weight kontroluje grubość tekstu.

Wartości:

normal – normalna grubość
bold – pogrubienie
Liczby: 100 (najcieńsza) do 900 (najgrubsza)

Przykład:

strong {
  font-weight: bold;
}

h1 {
  font-weight: 700;
}

5. Wysokość linii (line-height)

line-height określa odstęp między liniami tekstu.

Przykład:

p {
  line-height: 1.5; /* 1.5 razy wysokość czcionki */
}

6. Skrócona składnia font

Można łączyć kilka właściwości czcionki w jednej deklaracji.

Składnia:

selector {
  font: font-style font-variant font-weight font-size/line-height font-family;
}

Przykład:

p {
  font: normal normal 400 16px/1.5 "Open Sans", sans-serif;
}

Kolory

1. Właściwość color

color określa kolor tekstu.

Przykłady wartości:

Nazwy kolorów: red, blue, green
Sześciocyfrowe kody szesnastkowe: #FF0000, #00FF00, #0000FF
Trzycyfrowe kody szesnastkowe: #F00, #0F0, #00F
RGB: rgb(255, 0, 0)
RGBA (z przezroczystością): rgba(255, 0, 0, 0.5)
HSL: hsl(0, 100%, 50%)
HSLA: hsla(0, 100%, 50%, 0.5)

Przykład:

h1 {
  color: #333333;
}

p {
  color: rgb(85, 85, 85);
}

a {
  color: hsl(210, 100%, 40%);
}

2. Właściwość background-color

background-color ustawia kolor tła elementu.

Przykład:

.highlight {
  background-color: yellow;
}

3. Kontrast kolorów

Dla czytelności ważne jest, aby kolor tekstu kontrastował z kolorem tła.

Dobre praktyki:

Jasny tekst na ciemnym tle lub odwrotnie.
Unikaj kombinacji kolorów, które mogą być trudne do odczytania dla osób z daltonizmem (np. czerwony na zielonym).

Wyrównanie tekstu

1. Właściwość text-align

text-align określa poziome wyrównanie tekstu.

Wartości:

left – wyrównanie do lewej (domyślne)
right – wyrównanie do prawej
center – wyśrodkowanie
justify – wyrównanie do obu marginesów (justowanie)

Przykład:

p {
  text-align: justify;
}

h1 {
  text-align: center;
}

2. Właściwość text-decoration

text-decoration dodaje dekoracje do tekstu.

Wartości:

none – brak dekoracji
underline – podkreślenie
overline – linia nad tekstem
line-through – przekreślenie
blink – migotanie (niezalecane, nieobsługiwane przez większość przeglądarek)

Przykład:

a {
  text-decoration: none;
}

.del {
  text-decoration: line-through;
}

3. Właściwość text-transform

text-transform kontroluje wielkość liter w tekście.

Wartości:

none – bez zmian (domyślne)
capitalize – pierwsza litera każdego słowa wielka
uppercase – wszystkie litery wielkie
lowercase – wszystkie litery małe

Przykład:

h2 {
  text-transform: uppercase;
}

p.intro {
  text-transform: capitalize;
}

4. Odstępy między literami i słowami

letter-spacing – kontroluje odstęp między literami.

Przykład:

h1 {
  letter-spacing: 2px;
}

word-spacing – kontroluje odstęp między słowami.

Przykład:

p {
  word-spacing: 5px;
}

Praktyczne przykłady

1. Stylizacja nagłówków

CSS:

h1 {
  font-family: 'Georgia', serif;
  font-size: 48px;
  color: #2c3e50;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}

HTML:

<h1>Witamy na naszej stronie</h1>

2. Stylizacja akapitów

CSS:

p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #34495e;
  text-align: justify;
}

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.</p>

3. Linki nawigacyjne

CSS:

nav a {
  font-weight: bold;
  color: #2980b9;
  text-decoration: none;
}

nav a:hover {
  color: #3498db;
  text-decoration: underline;
}

HTML:

<nav>
  <a href="index.html">Strona główna</a>
  <a href="o-nas.html">O nas</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

Dobre praktyki

Spójność: Używaj jednolitego stylu dla podobnych elementów (np. wszystkie nagłówki h2 w tym samym stylu).
Czytelność: Wybieraj czcionki i kolory, które są łatwe do czytania.
Dostępność: Dbaj o odpowiedni kontrast między tekstem a tłem.
Web-safe fonts: Jeśli nie używasz czcionek webowych (np. Google Fonts), wybieraj czcionki dostępne na większości urządzeń.
Minimalizm: Unikaj nadużywania różnych stylów i efektów w jednym miejscu.

Częste błędy i jak ich unikać

Brak jednostek miary: Pamiętaj o podawaniu jednostek przy wartościach liczbowych (np. font-size: 16px;).

Niepoprawnie:

p {
  font-size: 16;
}

Poprawnie:

p {
  font-size: 16px;
}

Niewłaściwe stosowanie czcionek: Używanie zbyt wielu różnych czcionek może sprawić, że strona będzie wyglądać nieprofesjonalnie.
Niedostosowanie stylów do różnych urządzeń: Sprawdź, jak tekst wygląda na różnych ekranach i przeglądarkach.
Brak kopii zapasowej czcionek: Jeśli używasz niestandardowej czcionki, podaj alternatywy.

Przykład:

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

Niewystarczający kontrast: Upewnij się, że kolor tekstu i tła zapewnia dobrą czytelność.

Podsumowanie

W tej lekcji nauczyliśmy się:

Jak kontrolować czcionki na stronie za pomocą właściwości font-family, font-size, font-style, font-weight i line-height.
Jak ustawiać kolory tekstu i tła, korzystając z różnych formatów kolorów.
Jak wyrównywać tekst oraz stosować dekoracje i transformacje za pomocą text-align, text-decoration, text-transform.
Jak poprawić czytelność poprzez kontrolę odstępów między literami i słowami.
Dobre praktyki w stylizacji tekstu, aby strona była estetyczna i dostępna dla wszystkich użytkowników.

Opanowanie właściwości tekstu w CSS pozwoli Ci tworzyć strony, które nie tylko wyglądają profesjonalnie, ale także są przyjazne dla użytkowników.

Zadania do samodzielnego wykonania

Stwórz stronę z artykułem:
- Użyj różnych nagłówków (h1-h3), akapitów i cytatów.
- Wystylizuj tekst, stosując różne czcionki, rozmiary i kolory.
- Zadbaj o spójność i czytelność.
Zaprojektuj menu nawigacyjne:
- Użyj listy poziomej do stworzenia menu.
- Stylizuj linki, dodając efekty najechania (:hover).
- Wykorzystaj text-transform i letter-spacing do nadania unikalnego stylu.
Eksperymentuj z właściwościami tekstu:
- Stwórz stronę demonstracyjną, na której przetestujesz różne wartości font-weight, font-style, text-decoration.
- Obserwuj, jak zmiany wpływają na wygląd tekstu.
- Kontrast kolorów: Narzędzia online do sprawdzania kontrastu, np. WebAIM Contrast Checker.

Ciekawostka

Czy wiesz, że najpopularniejszą czcionką na świecie jest Helvetica? Została stworzona w 1957 roku przez szwajcarskiego projektanta Maksa Miedingera i do dziś jest szeroko stosowana w logotypach, znakach drogowych i materiałach reklamowych. Jej prosty i czytelny styl sprawia, że jest chętnie wybierana przez projektantów na całym świecie.

Testy przypięte do lekcji
Aby uzyskać dostęp do testów i ćwiczeń interaktywnych - Zaloguj się

Aby widzieć ocenę lekcji - Zaloguj się

Następna lekcja: Modele kolorów: RGB, HEX, HSL →

← Poprzednia lekcja: Czym jest strona internetowa i jak działa?