Kurs HTML i CSS · Moduł 3: Podstawy CSS

Stylowanie tekstu i jednostki CSS

6 min czytania

Udostępnij

Jednymi z najważniejszych właściwości stylujących tekst są wielkość czcionki i wysokość linii.

CSS posiada kilka różnych jednostek do wyrażania długości. Wielkość czcionki składa się z liczby, a następnie jednostki długości, na przykład 10px.

Jednostką długości może być: px, pt, em, rem, vw, vh, vmin, vmax.

1h1 {
2  font-size: 28px;
3}

Piksel (px) to jednostka miary często stosowana w web designie, która wynosi około 0,26 mm. Jest to jednostka bezwzględna, co oznacza, że ma w CSS stałą wartość, choć przeglądarka skaluje ją przy powiększaniu strony. W życiu codziennym spotykamy się również z innymi jednostkami bezwzględnymi, takimi jak centymetry (cm) czy milimetry (mm).

Współcześnie, w projektowaniu stron internetowych coraz częściej stosuje się jednostki względne, które pozwalają na skalowanie elementów w zależności od innych właściwości długości. Dzięki temu elementy strony lepiej dostosowują się do różnych ekranów i rozdzielczości.

Najbardziej popularne jednostki względne to:

em - jednostka relatywna w stosunku do wartości font-size elementu (2em oznacza czcionkę o rozmiarze dwukrotnie większym niż bieżący rozmiar czcionki elementu).
rem - jednostka relatywna w stosunku do font-size głównego elementu (najczęściej elementu html).
vh - 1vh odpowiada 1% wysokości okna przeglądarki (viewportu).
vw - 1vw odpowiada 1% szerokości okna przeglądarki (viewportu).

Stosowanie jednostek względnych umożliwia tworzenie responsywnych i elastycznych układów, które dostosowują się do różnych urządzeń i rozmiarów ekranów, zapewniając lepsze doświadczenia dla użytkowników.

Właściwość line-height w CSS służy do określania wysokości linii tekstu, czyli odstępu pomiędzy kolejnymi wierszami tekstu w elemencie. Innymi słowy, jest to odstęp pomiędzy bazowymi liniami dwóch sąsiednich wierszy tekstu. Właściwość ta wpływa na czytelność tekstu, a także na ogólny wygląd bloku tekstu na stronie.

Wartość line-height może być określona jako:

Jednostka bezwzględna, np. piksele (px) lub punkty (pt).
Jednostka względna, np. em, rem czy procent (%).
Liczba bez jednostki, która określa stosunek między wysokością linii a rozmiarem czcionki. Na przykład, line-height: 1.5 oznacza, że wysokość linii będzie wynosić 1,5-krotność aktualnego rozmiaru czcionki.

Oto przykład użycia właściwości line-height:

1p {
2  font-size: 16px;
3  line-height: 1.5;
4}

Kod do tej lekcji: index.html

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>CSS - Jednostki i stylowanie tekstu</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Jednostki CSS</h1>
12
13        <div class="section">
14            <h2>Jednostki bezwzględne (px)</h2>
15            <p class="absolute">Ten tekst ma rozmiar 16px i line-height 24px.</p>
16            <p class="absolute-large">Ten tekst ma rozmiar 20px.</p>
17        </div>
18
19        <div class="section">
20            <h2>Jednostki względne (em)</h2>
21            <p class="relative-em">Ten tekst używa jednostek em (1.2em).</p>
22            <p class="relative-em-large">Ten tekst ma rozmiar 1.5em.</p>
23        </div>
24
25        <div class="section">
26            <h2>Jednostki względne (rem)</h2>
27            <p class="relative-rem">Ten tekst używa jednostek rem (1.1rem).</p>
28            <p class="relative-rem-large">Ten tekst ma rozmiar 1.4rem.</p>
29        </div>
30
31        <div class="section">
32            <h2>Jednostki viewport (vw, vh)</h2>
33            <p class="viewport">Ten tekst ma rozmiar 3vw (3% szerokości okna).</p>
34        </div>
35
36        <div class="section typography">
37            <h2>Właściwości typograficzne</h2>
38            <p class="bold">Pogrubiony tekst (font-weight: bold)</p>
39            <p class="italic">Kursywa (font-style: italic)</p>
40            <p class="uppercase">wielkie litery (text-transform: uppercase)</p>
41            <p class="letter-spacing">T e k s t   z   o d s t ę p a m i</p>
42            <p class="different-font">Inna czcionka (Georgia, serif)</p>
43        </div>
44    </div>
45</body>
46</html>

W powyższym przykładzie, wysokość linii dla elementów paragrafu zostaje ustawiona na 1,5-krotność rozmiaru czcionki (16px). W rezultacie, odstęp między wierszami wyniesie 24px (16px * 1.5).

Dobrze dobrana wartość line-height może znacząco wpłynąć na komfort czytania tekstu przez użytkowników, dlatego warto eksperymentować z różnymi wartościami, aby osiągnąć optymalny efekt.

Stylowanie tekstu

Stylizacja tekstu w CSS obejmuje różne właściwości, które można dostosować:

Czcionka: Właściwość font-family pozwala określić, jakiej czcionki użyć.
Rozmiar czcionki: font-size określa, jak duży powinien być tekst.
Styl czcionki: font-style kontroluje, czy tekst powinien być kursywą czy nie.
Grubość czcionki: font-weight ustawia grubość słowem (normal, bold) albo liczbą od 100 do 900: 400 to zwykły tekst, a 700 - standardowe pogrubienie, czyli to samo co bold.
Kolor tekstu: color pozwala określić kolor tekstu.
Wyrównanie tekstu: text-align kontroluje wyrównanie tekstu do lewej, prawej, środka lub do obu stron.
Odstępy między znakami: letter-spacing pozwala na kontrolę przestrzeni między literami.
Odstępy między liniami: line-height pozwala na kontrolę przestrzeni między liniami tekstu.
Transformacje tekstu: text-transform może być używane do sterowania kapitalizacją, taką jak wielkie litery, małe litery lub początkowe litery wielkie.

Kilka właściwości czcionki zapiszesz naraz skrótem font. Styl i grubość podajesz na początku, w dowolnej kolejności, potem rozmiar, a na końcu krój - rozmiar i krój są obowiązkowe:

1p {
2  font: italic bold 16px serif;
3}

Ten akapit będzie pochylony, pogrubiony, będzie miał 16px i krój szeryfowy - jedna linia zamiast czterech deklaracji.

Ćwiczenie: Stylowanie tekstu i jednostki CSS

W tym ćwiczeniu nauczysz się, jak stylować tekst za pomocą różnych jednostek CSS oraz jak stosować właściwość line-height do kontrolowania wysokości linii tekstu.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Stylowanie tekstu</title>
7</head>
8<body>
9    <main>
10        <!-- Tutaj umieścisz zawartość strony -->
11    </main>
12</body>
13</html>

Krok 2: Dodaj nagłówek i paragraf

Dodaj nagłówek i paragraf tekstu, które będziesz stylizować.

1<main>
2    <h1>Stylowanie tekstu w CSS</h1>
3    <p>Właściwość <code>line-height</code> w CSS służy do określania wysokości linii tekstu, czyli odstępu pomiędzy kolejnymi wierszami tekstu w elemencie. Właściwość ta wpływa na czytelność tekstu, a także na ogólny wygląd bloku tekstu na stronie.</p>
4</main>

Krok 3: Dodaj style CSS

Dodaj wewnętrzny arkusz stylów w sekcji <head> i zacznij od ustawienia podstawowych stylów dla nagłówka i paragrafu.

1<head>
2    <style>
3        body {
4            font-family: Arial, sans-serif;
5        }
6        h1 {
7            font-size: 28px;
8            color: darkblue;
9        }
10        p {
11            font-size: 16px;
12            line-height: 1.5;
13        }
14    </style>
15</head>

Krok 4: Eksperymentuj z różnymi jednostkami

Spróbuj zastosować różne jednostki do właściwości font-size i line-height, aby zobaczyć, jak zmieniają się wielkość i odstępy tekstu.

1<head>
2    <style>
3        body {
4            font-family: Arial, sans-serif;
5        }
6        h1 {
7            font-size: 2em; /* Zmienione na jednostkę em */
8            color: darkblue;
9        }
10        p {
11            font-size: 1rem; /* Zmienione na jednostkę rem */
12            line-height: 1.8; /* Zwiększona wysokość linii */
13        }
14    </style>
15</head>

Krok 5: Dodaj dodatkowe paragrafy

Dodaj kilka dodatkowych paragrafów, aby lepiej zobaczyć efekt działania właściwości line-height.

1<main>
2    <h1>Stylowanie tekstu w CSS</h1>
3    <p>Właściwość <code>line-height</code> w CSS służy do określania wysokości linii tekstu, czyli odstępu pomiędzy kolejnymi wierszami tekstu w elemencie. Właściwość ta wpływa na czytelność tekstu, a także na ogólny wygląd bloku tekstu na stronie.</p>
4    <p>Wartość <code>line-height</code> może być określona jako jednostka bezwzględna, jednostka względna lub liczba bez jednostki, która określa stosunek między wysokością linii a rozmiarem czcionki.</p>
5    <p>Dobrze dobrana wartość <code>line-height</code> może znacząco wpłynąć na komfort czytania tekstu przez użytkowników, dlatego warto eksperymentować z różnymi wartościami, aby osiągnąć optymalny efekt.</p>
6</main>

Krok 6: Dodaj dodatkowe właściwości stylizujące tekst

Dodaj więcej właściwości stylizujących tekst, takich jak kolor, wyrównanie, odstępy między literami i transformacje tekstu.

1<head>
2    <style>
3        body {
4            font-family: Arial, sans-serif;
5        }
6        h1 {
7            font-size: 2em;
8            color: darkblue;
9            text-align: center; /* Wyrównanie do środka */
10        }
11        p {
12            font-size: 1rem;
13            line-height: 1.8;
14            color: #595959; /* Kolor tekstu */
15            letter-spacing: 0.05em; /* Odstępy między literami */
16            text-transform: capitalize; /* Kapitalizacja */
17        }
18    </style>
19</head>

Wynik

Po wykonaniu wszystkich kroków twój plik HTML powinien wyglądać następująco:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Stylowanie tekstu</title>
7    <style>
8        body {
9            font-family: Arial, sans-serif;
10        }
11        h1 {
12            font-size: 2em;
13            color: darkblue;
14            text-align: center;
15        }
16        p {
17            font-size: 1rem;
18            line-height: 1.8;
19            color: #595959;
20            letter-spacing: 0.05em;
21            text-transform: capitalize;
22        }
23    </style>
24</head>
25<body>
26    <main>
27        <h1>Stylowanie tekstu w CSS</h1>
28        <p>Właściwość <code>line-height</code> w CSS służy do określania wysokości linii tekstu, czyli odstępu pomiędzy kolejnymi wierszami tekstu w elemencie. Właściwość ta wpływa na czytelność tekstu, a także na ogólny wygląd bloku tekstu na stronie.</p>
29        <p>Wartość <code>line-height</code> może być określona jako jednostka bezwzględna, jednostka względna lub liczba bez jednostki, która określa stosunek między wysokością linii a rozmiarem czcionki.</p>
30        <p>Dobrze dobrana wartość <code>line-height</code> może znacząco wpłynąć na komfort czytania tekstu przez użytkowników, dlatego warto eksperymentować z różnymi wartościami, aby osiągnąć optymalny efekt.</p>
31    </main>
32</body>
33</html>

Teraz masz kompletną stronę internetową z tekstem stylizowanym przy użyciu różnych jednostek CSS i właściwości line-height. Możesz dalej eksperymentować, dodając więcej stylów i zmieniając wartości, aby lepiej poznać działanie CSS.

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

1. Która właściwość CSS służy do zmiany rozmiaru czcionki?
2. Który zapis koloru CSS podaje wprost liczby od 0 do 255 dla kanałów czerwonego, zielonego i niebieskiego?

To 2 z 3 pytań do tej lekcji. Pozostałe rozwiążesz w grze.

Zadania praktyczne w grze

Edytor kodu
Stwórz egipską hierarchię tekstu: <h1> dla Faraona (font-size: 48px, font-weight: bold, color: #8B6914, text-align: center), <h2> dla Kapłana (font-size: 32px, font-family: serif), <h3> dla Skryby (font-size: 24px, font-style: italic). Dodaj <p> z normalnym tekstem (font-size: 16px, line-height: 1.6).
Układanie w poziomie
Ułóż skrócony zapis właściwości font w CSS: