From df821208c608de1b7cdc6fe69ae28724ac1f01a0 Mon Sep 17 00:00:00 2001 From: MDN Date: Thu, 14 Oct 2021 00:47:38 +0000 Subject: [CRON] sync translated content --- .../responsive/media_types/index.html | 319 --------------------- 1 file changed, 319 deletions(-) delete mode 100644 files/pl/web/progressive_web_apps/responsive/media_types/index.html (limited to 'files/pl/web/progressive_web_apps') 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 deleted file mode 100644 index 2314709ef4..0000000000 --- a/files/pl/web/progressive_web_apps/responsive/media_types/index.html +++ /dev/null @@ -1,319 +0,0 @@ ---- -title: Media -slug: Web/Progressive_web_apps/Responsive/Media_types -tags: - - CSS:Na_początek -translation_of: Web/Progressive_web_apps/Responsive/Media_types -original_slug: Web/CSS/Na_początek/Media ---- -

-

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. -

Ta strona wraca do tematu przeznaczenia i struktury arkuszy stylów. -

-

Informacja: Media

-

Przeznaczeniem CSS-u jest określanie jak dokumentu mają być prezentowane użytkownikowi. -Prezentacja może przyjąć wiele różnych form. -

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. -

Aby zdefiniować regułę, która będzie dotyczyła tylko określonego typu mediów, użyj @media z typem mediów oraz klamrami obejmującymi reguły, których ma to dotyczyć. -

- - -
Przykład -
Dokument na stronie WWW posiada pole nawigacyjne pozwalające użytkownikowi poruszać się po stronie. -

W języku znaczników element rodzica pola nawigacyjnego ma id nav-area. -

Kiedy dokument jest drukowany, pole nawigacyjne nie ma żadnego zastosowania, więc arkusz stylów usuwa je w całości: -

-
-

@media print { -

-
 #nav-area {display: none;}
- }
-
-
-
-

Niektóre z popularnych typów mediów: -

- - - - - - - - -
screenKolorowy wyświetlacz komputera -
printWyświetlanie na stronach -
projectionWyświetlane podczas projekcji -
allWszystkie media (domyślne) -
-


-

- - -
Więcej szczegółów -
Istnieją też inne sposoby określenia docelowych mediów. -

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 media w znaczniku LINK. -

W CSS możesz użyć @import na początku arkusza stylów, aby zaimportować inny arkusz stylów z podanego adresu URL, opcjonalnie podając też typ mediów. -

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. -

Aby dowiedzieć się więcej na temat typów mediów, zajrzyj na stronę Media w specyfikacji CSS. -

Istnieje więcej przykładów wykorzystania własności display na dalszej stronie kursu: Dane XML. -

-
-

Drukowanie

-

CSS posiada specyficzne własności przeznaczone dla mediów stronicowych. -

Reguła @page może ustawiać marginesy strony. -Aby ustawić drukowanie dwustronne, możesz określić marginesy osobno dla @page:left oraz @page:right. -

Dla mediów stronicowych zazwyczaj należy używać odpowiednich jednostek długości takich jak cale (in), punkty (pt) = 1/72 cala), centymetry (cm) lub milimetry (mm). Równie dobrze możesz używać ems (em), aby dopasować się do rozmiaru czcionki, oraz procentów (%). -

Możesz kontrolować, jak zawartość dokumentu jest przełamywana na strony, przy użyciu własności page-break-before, page-break-after i page-break-inside. -

- - -
Przykład -
Ta reguła ustawia margines strony na jeden cal dla każdej strony: -
-

@page {margin: 1in;} -

-
-

Ta reguła zapewnia, że każdy element H! zaczyna się na nowej stronie: -

-
-

h1 {page-break-before: always;} -

-
-
-


-

- - -
Więcej szczegółów -
Aby dowiedzieć się więcej o obsłudze mediów stronicowych, zajrzyj na stronę Media stronicowe w specyfikacji CSS. -

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. -

-
-

Interfejsy użytkownika

-

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. -

Nie istnieje osobny typ mediów dla urządzeń z interfejsem użytkownika. -

Istnieje pięć specjalnych selektorów: -

- - - - - - - - - - - - -
SelektorWybiera -
E:hoverDowolny element E, nad którym znajduje się wskaźnik -
E:focusDowolny element E, który jest w danym momencie aktywny dla interfejsu -
E:activeElement E, który jest wykorzystywany w aktualnie wykonywanej akcji użytkownika -
E:linkDowolny element E, który jest odnośnikiem do strony której użytkownik nie odwiedzał ostatnio -
E:visitedDowolny element E, który jest odnośnikiem do adresu URL, który użytkownik odwiedził niedawno -
-

Własność cursor 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: -

- - - - - - - - - - -
SelektorWybiera -
pointerWskazuje odnośnik -
waitWskazuje, że program nie może przyjmować danych -
progressWskazuje, że program w tej chwili pracuje, ale może przyjmować dane od użytkownika -
defaultDomyślny (zazwyczaj strzałka) -
-

Własność outline 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 border, poza tym, że nie możesz określać osobno wartości dla poszczególnych boków. -

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 disabled lub readonly. -Selektory mogą określać takie atrybuty podobnie jak każde inne — poprzez użycie prostokątnych nawiasów: {{ mediawiki.external('disabled') }} lub {{ mediawiki.external('readonly') }}. -


-

- - -
Przykład -
Te reguły określają style dla przycisku, który zmienia się dynamicznie, kiedy użytkownik na nim operuje: -
-.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;
-  }
-
-

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ę: -

- - -
- - - - - - -
Click Me -Click Me -Click Me -
-
disablednormalactive -
-
-

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. -

-
- - -
Więcej szczegółów -
Aby dowiedzieć się więcej o interfejsach użytkownika w CSS, zobacz stronę User interface w specyfikacji CSS. -

Istnieje też przykład napisany w języku znaczników Mozilli, XUL-u, w drugiej części tego kursu. -

-
-

Zadanie: Drukowanie dokumentu

-

Stwórz nowy dokument HTML, doc4.html. -Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
<!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>
-
-

Stwórz nowy arkusz stylów, style4.css. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
/*** 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 */
-
-

Kiedy oglądasz ten dokument w swojej przeglądarce, używa on domyślnego stylu przeglądarki. -

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. -

- - -
- - -
- - -
Heading
-
Section A
-
This is the first section...
-
Page: 1
-
-
-		 - - -
- - -
Heading
-
Section B
-
This is the second section...
-
Page: 2
-
-
-
-


-

- - -
Wyzwanie -
Przesuń reguły stylu dotyczące drukowania do osobnego pliku CSS. -

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. -

Spraw, aby nagłówek stawał się niebieski, kiedy kursor myszy znajdzie się nad nim. -

-
-


-

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

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: JavaScript -

{{ languages( { "en": "en/CSS/Getting_Started/Media", "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }} -- cgit v1.2.3-54-g00ecf