Stylowanie tekstu i jednostki CSS
Jednymi z najważniejszych właściwości stylujących tekst jest wielkość czcionki i wysokość linii.
CSS posiada kilka różnych jednostek do wyrażania długości. Wielkość czcionki składa się z liczby 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 jej wartość jest stała i wygląd elementu wyrażonego w pikselach będzie zawsze taki sam. 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}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 pozwala na kontrolę grubości tekstu, np. pogrubiony.
- 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.
Ć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>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-sizeline-height1<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-height1<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: darkgray; /* 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: darkgray;
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.