1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
---
title: Style tekstowe
slug: Learn/CSS/Styling_text/Fundamentals
tags:
- CSS:Na_początek
translation_of: Learn/CSS/Styling_text/Fundamentals
translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
original_slug: Web/CSS/Na_początek/Style_tekstowe
---
<p>
</p><p>Na tej stronie znajdziesz więcej przykładów stylów tekstowych.
</p><p>Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma.
</p>
<h3 id="Informacja:_Style_tekstowe" name="Informacja:_Style_tekstowe"> Informacja: Style tekstowe </h3>
<p>CSS posiada kilka własności do określania stylu tekstu.
</p><p>Istnieje wygodna, krótka własność <code>font</code>, której można użyć do określenia kilku cech na raz — na przykład:
</p>
<ul><li>pogrubienia, ustawienia kursywy oraz małych znaków,
</li><li>rozmiaru,
</li><li>wysokości linii,
</li><li>typu fontu.
</li></ul>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td> <div style="width: 40em;">
<p>p {font: italic 75%/125% "Comic Sans MS", cursive;}
</p>
</div>
<p>Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą.
</p><p>Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni).
</p><p>Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo).
</p><p>Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na <code>normal</code>):
</p>
</td></tr></tbody></table>
<h4 id="Typy_font.C3.B3w" name="Typy_font.C3.B3w"> Typy fontów </h4>
<p>Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu.
Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych.
</p><p>Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> lub <code>monospace</code>, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki).
</p><p>Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty.
</p><p>Aby określić wyłącznie typ fontu, użyj własności <code>font-family</code>.
</p>
<h4 id="Rozmiary_font.C3.B3w" name="Rozmiary_font.C3.B3w"> Rozmiary fontów </h4>
<p>Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da.
</p><p>Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak <code>small</code>, <code>medium</code> czy <code>large</code>. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: <code>smaller</code>, <code>larger</code>, <code>150%</code> lub <code>1.5</code>.
</p><p>Jeżeli trzeba, możesz określić bezpośredni rozmiar: <code>12px</code> (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz.
</p><p>Aby określić sam rozmiary fontu, użyj własności <code>font-size</code>.
</p>
<h4 id="Wysoko.C5.9B.C4.87_linii" name="Wysoko.C5.9B.C4.87_linii"> Wysokość linii </h4>
<p>Wysokość linii określa odstępy między liniami.
Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe.
</p><p>Aby określić samą wysokość linii, użyj własności <code>line-height</code>.
</p>
<h4 id="Ozdobniki" name="Ozdobniki"> Ozdobniki </h4>
<p>Odrębna własność <code>text-decoration</code> może określać inne style, jak <code>underline</code> (podkreślenie) lub <code>line-through</code> (przekreślenie).
Ustawiając tę własność na <code>normal</code>, usuniesz wszystkie ozdobniki.
</p>
<h4 id="Inne_w.C5.82asno.C5.9Bci" name="Inne_w.C5.82asno.C5.9Bci"> Inne własności </h4>
<p>Aby ustawić kursywę, użyj <code>font-style: italic;</code><br>
Aby ustawić pogrubienie, użyj <code>font-weight: bold;</code><br>
Aby określić, że wszystkie litery mają być małymi literami, użyj <code>font-variant: small-caps;</code>
</p><p>Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na <code>normal</code> lub
<code>inherit</code> (dziedzicz).
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Możesz określić style tekstowe na kilka innych sposobów.
<p>Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć.
</p><p>W złożonym arkuszu stylów unikaj używania skrótowej własności <code>font</code>, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu).
</p><p>Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonty</a> w specyfikacji CSS.
Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Tutaj</a>.
</p>
</td></tr></tbody></table>
<h3 id="Zadanie:_Okre.C5.9Blanie_fontu" name="Zadanie:_Okre.C5.9Blanie_fontu"> Zadanie: Określanie fontu </h3>
<p>W prostych dokumentach możesz określić font elementu <small>BODY</small>, a reszta dokumentu będzie dziedziczyć jego ustawienia.
</p><p>Wyedytuj swój plik CSS.
Dodaj regułę, która zmieni font.
Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia:
</p>
<div style="width: 40em;">
<p>body {font: 16px "Comic Sans MS", cursive;}
</p>
</div>
<p>Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu.
</p><p>Odśwież okno przeglądarki, aby zobaczyć efekt.
Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii:
</p>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody><tr>
<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
</td></tr>
<tr>
<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
</td></tr></tbody></table>
<p>Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki:
<table>
<tbody><tr>
<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets
</td></tr>
<tr>
<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets
</td></tr></tbody></table>
</td></tr></tbody></table>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Twój przykładowy dokument korzysta już z kilku nazwanych kolorów.
Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne:
<b><a href="pl/CSS/Na_pocz%c4%85tek/Kolor">Kolor</a></b>
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "fr": "fr/CSS/Premiers_pas/Styles_de_texte", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }}
|
