diff options
Diffstat (limited to 'files/pl/web/progressive_web_apps')
-rw-r--r-- | files/pl/web/progressive_web_apps/responsive/media_types/index.html | 318 |
1 files changed, 318 insertions, 0 deletions
diff --git a/files/pl/web/progressive_web_apps/responsive/media_types/index.html b/files/pl/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..ef6c87f8cf --- /dev/null +++ b/files/pl/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,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 &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><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Print sample</TITLE> +<LINK rel="stylesheet" type="text/css" href="style4.css"></strong> +</HEAD> + +<BODY> +<H1>Section A</H1> +<P>This is the first section...</P> + +<H1>Section B</H1> +<P>This is the second section...</P> + +<DIV id="print-head"> +Heading for paged media +</DIV> + +<DIV id="print-foot"> +Page: +</DIV> + +</BODY> +</HTML> +</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" } ) }} |