aboutsummaryrefslogtreecommitdiff
path: root/files/pl/web/css/na_początek/media/index.html
blob: ef6c87f8cfc6f1811a93ef29a0ae646fe5170f1e (plain)
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
---
title: Media
slug: Web/CSS/Na_początek/Media
tags:
  - 'CSS:Na_początek'
translation_of: Web/Progressive_web_apps/Responsive/Media_types
---
<p>
</p><p>Wiele stron tego kursu skupiało się na własnościach i wartościach CSS, których możesz użyć do określania wyglądu dokumentu.
</p><p>Ta strona wraca do tematu przeznaczenia i struktury arkuszy stylów.
</p>
<h3 id="Informacja:_Media" name="Informacja:_Media"> Informacja: Media </h3>
<p>Przeznaczeniem CSS-u jest określanie jak dokumentu mają być prezentowane użytkownikowi.
Prezentacja może przyjąć wiele różnych form.
</p><p>Na przykład prawdopodobnie czytasz tę stronę na jakimś urządzeniu wyświetlającym. Ale możesz również chcieć wyświetlić ją na ekranie dla większego grona odbiorców lub wydrukować ją.
To są różne media o różnych charakterystykach.
CSS daje możliwość prezentowania dokumentu w różny sposób dla różnych mediów.
</p><p>Aby zdefiniować regułę, która będzie dotyczyła tylko określonego typu mediów, użyj <code>@media</code> z typem mediów oraz klamrami obejmującymi reguły, których ma to dotyczyć.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
<caption>Przykład
</caption><tbody><tr>
<td> Dokument na stronie WWW posiada pole nawigacyjne pozwalające użytkownikowi poruszać się po stronie.
<p>W języku znaczników element rodzica pola nawigacyjnego ma id <code>nav-area</code>.
</p><p>Kiedy dokument jest drukowany, pole nawigacyjne nie ma żadnego zastosowania, więc arkusz stylów usuwa je w całości:
</p>
<div style="width: 30em;">
<p>@media print {
</p>
<pre class="eval"> #nav-area {display: none;}
 }
</pre>
</div>
</td></tr></tbody></table>
<p>Niektóre z popularnych typów mediów:
</p>
<table style="margin-left: 2em;">
<tbody><tr>
<td><code>screen</code></td><td>Kolorowy wyświetlacz komputera
</td></tr>
<tr>
<td><code>print</code></td><td>Wyświetlanie na stronach
</td></tr>
<tr>
<td style="padding-right: 1em;"><code>projection</code></td><td>Wyświetlane podczas projekcji
</td></tr>
<tr>
<td><code>all</code></td><td>Wszystkie media (domyślne)
</td></tr></tbody></table>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Istnieją też inne sposoby określenia docelowych mediów.
<p>Język znaczników dokumentu może pozwalać na określenie typu mediów w odnośniku wiążącym arkusz stylów z dokumentem. Na przykład w HTML-u możesz opcjonalnie określić typ mediów w atrybucie <code>media</code> w znaczniku <code>LINK</code>.
</p><p>W CSS możesz użyć <code>@import</code> na początku arkusza stylów, aby zaimportować inny arkusz stylów z podanego adresu URL, opcjonalnie podając też typ mediów.
</p><p>Dzięki wykorzystaniu tych technik możesz rozdzielić reguły stylów dla różnych typów mediów do różnych plików. Może to być czasem przydane do ułożenia struktury Twojego dokumentu.
</p><p>Aby dowiedzieć się więcej na temat typów mediów, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> w specyfikacji CSS.
</p><p>Istnieje więcej przykładów wykorzystania własności <code>display</code> na dalszej stronie kursu: <a href="pl/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a>.
</p>
</td></tr></tbody></table>
<h4 id="Drukowanie" name="Drukowanie"> Drukowanie </h4>
<p>CSS posiada specyficzne własności przeznaczone dla mediów stronicowych.
</p><p>Reguła <code>@page</code> może ustawiać marginesy strony.
Aby ustawić drukowanie dwustronne, możesz określić marginesy osobno dla <code>@page:left</code> oraz <code>@page:right</code>.
</p><p>Dla mediów stronicowych zazwyczaj należy używać odpowiednich jednostek długości takich jak cale (<code>in</code>), punkty (<code>pt</code>) = 1/72 cala), centymetry (<code>cm</code>) lub milimetry (<code>mm</code>). Równie dobrze możesz używać ems (<code>em</code>), aby dopasować się do rozmiaru czcionki, oraz procentów (<code>%</code>).
</p><p>Możesz kontrolować, jak zawartość dokumentu jest przełamywana na strony, przy użyciu własności <code>page-break-before</code>, <code>page-break-after</code> i <code>page-break-inside</code>.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
<caption>Przykład
</caption><tbody><tr>
<td> Ta reguła ustawia margines strony na jeden cal dla każdej strony:
<div style="width: 30em;">
<p>@page {margin: 1in;}
</p>
</div>
<p>Ta reguła zapewnia, że każdy element <small>H!</small> zaczyna się na nowej stronie:
</p>
<div style="width: 30em;">
<p>h1 {page-break-before: always;}
</p>
</div>
</td></tr></tbody></table>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Aby dowiedzieć się więcej o obsłudze mediów stronicowych, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Media stronicowe</a> w specyfikacji CSS.
<p>Drukowanie, podobnie jak inne funkcje CSS, zależy od Twojej przeglądarki i jej ustawień.
Na przykład przeglądarka Mozilla ustawia domyślne marginesy, nagłówki i stopkę podczas druku.
Raczej nie będziesz w stanie przewidzieć ustawień przeglądarek innych użytkowników drukujących Twój dokument &amp;mbdash; nie masz możliwości w pełni kontrolować wyniku.
</p>
</td></tr></tbody></table>
<h4 id="Interfejsy_u.C5.BCytkownika" name="Interfejsy_u.C5.BCytkownika"> Interfejsy użytkownika </h4>
<p>CSS ma pewne specjalne własności przeznaczone dla urządzeń obsługujących interfejs użytkownika, takich jak wyświetlacz komputera. To sprawia, że widok dokumentu zmienia się dynamicznie w trakcie pracy użytkownika z interfejsem.
</p><p>Nie istnieje osobny typ mediów dla urządzeń z interfejsem użytkownika.
</p><p>Istnieje pięć specjalnych selektorów:
</p>
<table style="margin-left: 2em;">
<tbody><tr>
<td style="width: 10em;"><strong>Selektor</strong></td><td><strong>Wybiera</strong>
</td></tr>
<tr>
<td><code>E:hover</code></td><td>Dowolny element E, nad którym znajduje się wskaźnik
</td></tr>
<tr>
<td><code>E:focus</code></td><td>Dowolny element E, który jest w danym momencie aktywny dla interfejsu
</td></tr>
<tr>
<td><code>E:active</code></td><td>Element E, który jest wykorzystywany w aktualnie wykonywanej akcji użytkownika
</td></tr>
<tr>
<td><code>E:link</code></td><td>Dowolny element E, który jest odnośnikiem do strony której użytkownik <i>nie</i> odwiedzał ostatnio
</td></tr>
<tr>
<td><code>E:visited</code></td><td>Dowolny element E, który jest odnośnikiem do adresu URL, który użytkownik <i>odwiedził</i> niedawno
</td></tr></tbody></table>
<p>Własność <code>cursor</code> określa kształt wskaźnika; niektóre z podstawowych kształtów podane są poniżej. Umieść kursor myszy nad elementami na tej liście, aby zobaczyć jak wygląda podany kursor:
</p>
<table style="margin-left: 2em;">
<tbody><tr>
<td style="width: 10em;"><strong>Selektor</strong></td><td><strong>Wybiera</strong>
</td></tr>
<tr style="cursor: pointer;">
<td><code>pointer</code></td><td>Wskazuje odnośnik
</td></tr>
<tr style="cursor: wait;">
<td><code>wait</code></td><td>Wskazuje, że program nie może przyjmować danych
</td></tr>
<tr style="cursor: progress;">
<td><code>progress</code></td><td>Wskazuje, że program w tej chwili pracuje, ale może przyjmować dane od użytkownika
</td></tr>
<tr style="cursor: default;">
<td><code>default</code></td><td>Domyślny (zazwyczaj strzałka)
</td></tr></tbody></table>
<p>Własność <code>outline</code> tworzy zewnętrzną linię, która zazwyczaj jest używana do oznaczenia pola aktywnego dla klawiatury.
Jej wartości są podobne do własności <code>border</code>, poza tym, że nie możesz określać osobno wartości dla poszczególnych boków.
</p><p>Kilka innych funkcji interfejsu użytkownika zostało zaimplementowanych przy użyciu atrybutów w tradycyjny sposób. Na przykład elementy, które są nieaktywne albo w trybie tylko do odczytu posiadają atrybut <code>disabled</code> lub <code>readonly</code>.
Selektory mogą określać takie atrybuty podobnie jak każde inne — poprzez użycie prostokątnych nawiasów: <code>{{ mediawiki.external('disabled') }}</code> lub <code>{{ mediawiki.external('readonly') }}</code>.
</p><p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
<caption>Przykład
</caption><tbody><tr>
<td> Te reguły określają style dla przycisku, który zmienia się dynamicznie, kiedy użytkownik na nim operuje:
<div style="width: 30em;"><pre>
.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  }
</pre></div>
<p>To wiki nie obsługuje interfejsu użytkownika na tej stronie, zatem przyciski nie mogą być *klikalne*. Poniżej znajdują się statyczne obrazki ilustrujące ideę:
</p>
<table style="border: 2px outset #36b; padding: 1em; background-color: #fff;">
<tbody><tr>
<td>
<table>
<tbody><tr>
<td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Click Me</span>
</td><td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Click Me</span>
</td><td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Click Me</span>
</td></tr>
<tr style="line-height: 25%;">
<td>
</td></tr>
<tr style="font-style: italic;">
<td>disabled</td><td>normal</td><td>active
</td></tr></tbody></table>
</td></tr></tbody></table>
<p>W pełni funkcjonalny przycisk posiada dodatkowo ciemną linię wokół całego przycisku, kiedy jest on domyślny, oraz kropkowaną linię na przycisku, kiedy jest on aktywny dla klawiatury. Może także posiadać efekt aktywizacji, kiedy wskaźnik znajduje się nad nim.
</p>
</td></tr></tbody></table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Aby dowiedzieć się więcej o interfejsach użytkownika w CSS, zobacz stronę <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> w specyfikacji CSS.
<p>Istnieje też przykład napisany w języku znaczników Mozilli, XUL-u, w drugiej części tego kursu.
</p>
</td></tr></tbody></table>
<h3 id="Zadanie:_Drukowanie_dokumentu" name="Zadanie:_Drukowanie_dokumentu"> Zadanie: Drukowanie dokumentu </h3>
<p>Stwórz nowy dokument HTML, <code>doc4.html</code>.
Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
</p>
<div style="width: 48em; height: 12em; overflow: auto;"><pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;

&lt;HEAD&gt;
&lt;TITLE&gt;Print sample&lt;/TITLE&gt;
&lt;LINK rel="stylesheet" type="text/css" href="style4.css"&gt;&lt;/strong&gt;
&lt;/HEAD&gt;

&lt;BODY&gt;
&lt;H1&gt;Section A&lt;/H1&gt;
&lt;P&gt;This is the first section...&lt;/P&gt;

&lt;H1&gt;Section B&lt;/H1&gt;
&lt;P&gt;This is the second section...&lt;/P&gt;

&lt;DIV id="print-head"&gt;
Heading for paged media
&lt;/DIV&gt;

&lt;DIV id="print-foot"&gt;
Page:
&lt;/DIV&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
</pre></div>
<p>Stwórz nowy arkusz stylów, <code>style4.css</code>.
Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
</p>
<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
  display: none;
  }

/* print only */
@media print {

h1 {
  page-break-before: always;
  padding-top: 2em;
  }

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
  }

#print-head {
  display: block;
  position: fixed;
  top: 0pt;
  left:0pt;
  right: 0pt;

  font-size: 200%;
  text-align: center;
  }

#print-foot {
  display: block;
  position: fixed;
  bottom: 0pt;
  right: 0pt;

  font-size: 200%;
  }

#print-foot:after {
  content: counter(page);
  counter-increment: page;
  }

} /* end print only */
</pre></div>
<p>Kiedy oglądasz ten dokument w swojej przeglądarce, używa on domyślnego stylu przeglądarki.
</p><p>Kiedy drukujesz go (lub oglądasz podgląd wydruku), arkusz stylów umieszcza każdą sekcję na osobnej stronie oraz dodaje nagłówek i stopkę do każdej strony. Jeżeli Twoja przeglądarka obsługuje także liczniki, dodaje numer strony w stopce.
</p>
<table>
<tbody><tr>
<td>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody><tr>
<td>
<table style="width: 15em; margin-right: 2em;">
<tbody><tr>
<td><div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Heading</div>
<div style="font-size: 150%; font-weight: bold;">Section A</div>
<div style="font-size: 75%;">This is the first section...</div>
<div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td><td>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody><tr>
<td>
<table style="width: 15em; margin-right: 2em;">
<tbody><tr>
<td><div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Heading</div>
<div style="font-size: 150%; font-weight: bold;">Section B</div>
<div style="font-size: 75%;">This is the second section...</div>
<div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> Przesuń reguły stylu dotyczące drukowania do osobnego pliku CSS.
<p>Użyj wcześniejszych odnośników na tej stronie, aby znaleźć informacje w specyfikacji CSS. Znajdź szczegóły na temat, jak importować nowy plik CSS do swojego arkusza stylów.
</p><p>Spraw, aby nagłówek stawał się niebieski, kiedy kursor myszy znajdzie się nad nim.
</p>
</td></tr></tbody></table>
<p><br>
</p>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.
</p><p>Na razie wszystkie reguły stylów w tym kursie znajdowały się w plikach. Reguły i ich wartości są stałe. Następna strona opisuje, jak można modyfikować reguły dynamicznie, używając języka programowania: <b><a href="pl/CSS/Na_pocz%c4%85tek/JavaScript">JavaScript</a></b>
</p>{{ languages( { "en": "en/CSS/Getting_Started/Media", "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }}