initial commit

1 files changed, 113 insertions, 0 deletions

diff --git a/files/pl/web/css/na_początek/jak_działa_css/index.html b/files/pl/web/css/na_początek/jak_działa_css/index.html
new file mode 100644
index 0000000000..f660589f31
--- /dev/null
+++ b/files/pl/web/css/na_początek/jak_działa_css/index.html
@@ -0,0 +1,113 @@
+---
+title: Jak działa CSS
+slug: Web/CSS/Na_początek/Jak_działa_CSS
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>
+</p><p>Ta strona wyjaśnia, jak działa CSS w przeglądarce.
+Przeanalizujesz przykładowy dokument, poznając szczegóły jego stylów.
+</p>
+<h3 id="Informacja:_Jak_dzia.C5.82a_CSS" name="Informacja:_Jak_dzia.C5.82a_CSS"> Informacja: Jak działa CSS </h3>
+<p>Kiedy Mozilla wyświetla dokument, musi połączyć treść dokumentu z jego informacjami o stylu. Tak więc dzieli ona proces na dwa etapy:
+</p>
+<ul><li> W pierwszym Mozilla zmienia język znaczników oraz CSS w <i>DOM</i> (Model Obiektowy Dokumentu). DOM jest reprezentacją dokumentu w pamięci komputera. Wiąże on treść dokumentu z jego stylem.
+</li></ul>
+<ul><li> W drugim etapie Mozilla wyświetla ten DOM.
+</li></ul>
+<p>Język znaczników używa znaczników do opisywania struktury dokumentu. Znacznik może być kontenerem, zawierającym inne znaczniki.
+</p><p>DOM posiada strukturę drzewiastą. Każdy znacznik i fragment tekstowy w języku znaczników staje się <i>węzłem</i> w strukturze drzewiastej. Węzły DOM nie są kontenerami. W zamian za to mogą posiadać węzły rodziców i dzieci.
+</p><p>Węzły, które odpowiadają znacznikom, znane są także jako <i>elementy</i>.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> W Twoim przykładowym dokumencie znacznik <code>&lt;P&gt;</code> i jego znacznik <code>&lt;/P&gt;</code> tworzą kontener:
+<div style="width: 24em;">
+<pre class="eval">&lt;P&gt;
+  &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
+  &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
+  &lt;STRONG&gt;S&lt;/STRONG&gt;heets
+&lt;/P&gt;
+</pre>
+</div>
+<p>W DOM odpowiadający węzeł P jest rodzicem.
+Jego dzieci to węzły <small>STRONG</small> oraz węzły tekstowe.
+Węzły <small>STRONG</small> same są rodzicami posiadającymi węzły tekstowe jako swoje dzieci:
+</p>
+<div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;">
+<p><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ │
+│ └─"<span style="color: black;">C</span>"
+│
+├─"<span style="color: black;">ascading</span>"
+│
+├─<span style="color: black;">STRONG</span>
+│ │
+│ └─"<span style="color: black;">S</span>"
+│
+├─"<span style="color: black;">tyle</span>"
+│
+├─<span style="color: black;">STRONG</span>
+│ │
+│ └─"<span style="color: black;">S</span>"
+│
+└─"<span style="color: black;">heets</span>"
+</p>
+</div>
+</td></tr></tbody></table>
+<p>Zrozumienie DOM pomaga w tworzeniu, debugowaniu i zarządzaniu CSS, ponieważ DOM jest punktem, w którym łączona jest treść dokumentu ze stylami CSS.
+</p>
+<h3 id="Zadanie:_Analiza_DOM" name="Zadanie:_Analiza_DOM"> Zadanie: Analiza DOM </h3>
+<p>Do analizy DOM potrzebny jest specjalny program.
+Służy do tego na przykład <a href="pl/Inspektor_DOM">Inspektor DOM</a> Mozilli.
+</p><p>Użyj przeglądarki Mozilla do otworzenia przykładowego dokumentu.
+</p><p>Z paska menu przeglądarki wybierz Narzędzia – Inspektor DOM lub Narzędzia – Programowanie WWW – Inspektor DOM.
+</p>
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Jeżeli Twoja przeglądarka Mozilli nie posiada Inspektora DOM, możesz zainstalować przeglądarkę ponownie, zaznaczając przy instalacji komponent narzędzi programistycznych. Potem wróć do tego kursu.
+<p><small><b>DevmoPL</b>: Możesz też zainstalować DOMi jako rozszerzenie</small>
+</p><p>Jeżeli nie chcesz instalować Inspektora DOM, możesz pominąć ten rozdział i przejść do następnej strony. Pominięcie tej sekcji nie wpłynie na resztę kursu.
+</p>
+</td></tr></tbody></table>
+<p>W Inspektorze DOM rozwiń węzły dokumentu, klikając na strzałki.
+</p><p><b>Notka: </b> Formatowanie spacjami dokumentu HTML spowoduje, że pojawią się puste węzły, które możesz zignorować.
+</p><p>Część wyniku może wyglądać tak:
+</p>
+<table style="border: 2px outset #36b; padding: 0 0 0 2em;">
+<tbody><tr>
+<td><div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;">
+<p>│
+<span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span>
+│ │
+│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span>
+│ │
+</p>
+</div>
+</td></tr></tbody></table>
+<p>Kiedy wybierasz jakikolwiek węzeł, możesz dowiedzieć się o nim więcej, używając prawej kolumny Inspektora DOM.
+Na przykład po wybraniu węzła tekstowego Inspektor DOM pokazuje jego zawartość w prawej kolumnie.
+</p><p>Kiedy zaznaczasz węzeł elementu, Inspektor DOM analizuje go i podaje w prawym panelu ogromną liczbę informacji. Informacje o stylu są tylko częścią informacji, jakie można tam znaleźć.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> W Inspektorze DOM wybierz węzeł <small>STRONG</small>.
+<p>Skorzystaj z prawego panelu Inspektora, aby dowiedzieć się, gdzie kolor węzła ustawiony został na czerwony i gdzie jego wygląd jest ustawiany na grubszy niż normalny tekst.
+</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>Jeżeli podjąłeś(podjęłaś) wyzwanie, widzisz, że informacje o stylu z wielu miejsc wiążą się, tworząc końcowy styl elementu.
+</p><p>Następna strona wyjaśnia więcej na temat tych interakcji:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Kaskadowo%c5%9b%c4%87_i_dziedziczenie">Kaskadowość i dziedziczenie</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "it": "it/Conoscere_i_CSS/Come_funzionano_i_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha", "zh-cn": "cn/CSS/Getting_Started/How_CSS_works" } ) }}