From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../jak_dzia\305\202a_css/index.html" | 113 +++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 "files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" (limited to 'files/pl/web/css/na_początek/jak_działa_css') diff --git "a/files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" "b/files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" new file mode 100644 index 0000000000..f660589f31 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_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 +--- +

+

Ta strona wyjaśnia, jak działa CSS w przeglądarce. +Przeanalizujesz przykładowy dokument, poznając szczegóły jego stylów. +

+

Informacja: Jak działa CSS

+

Kiedy Mozilla wyświetla dokument, musi połączyć treść dokumentu z jego informacjami o stylu. Tak więc dzieli ona proces na dwa etapy: +

+ + +

Język znaczników używa znaczników do opisywania struktury dokumentu. Znacznik może być kontenerem, zawierającym inne znaczniki. +

DOM posiada strukturę drzewiastą. Każdy znacznik i fragment tekstowy w języku znaczników staje się węzłem w strukturze drzewiastej. Węzły DOM nie są kontenerami. W zamian za to mogą posiadać węzły rodziców i dzieci. +

Węzły, które odpowiadają znacznikom, znane są także jako elementy. +

+ + +
Przykład +
W Twoim przykładowym dokumencie znacznik <P> i jego znacznik </P> tworzą kontener: +
+
<P>
+  <STRONG>C</STRONG>ascading
+  <STRONG>S</STRONG>tyle
+  <STRONG>S</STRONG>heets
+</P>
+
+
+

W DOM odpowiadający węzeł P jest rodzicem. +Jego dzieci to węzły STRONG oraz węzły tekstowe. +Węzły STRONG same są rodzicami posiadającymi węzły tekstowe jako swoje dzieci: +

+
+

P +├─STRONG +│ │ +│ └─"C" +│ +├─"ascading" +│ +├─STRONG +│ │ +│ └─"S" +│ +├─"tyle" +│ +├─STRONG +│ │ +│ └─"S" +│ +└─"heets" +

+
+
+

Zrozumienie DOM pomaga w tworzeniu, debugowaniu i zarządzaniu CSS, ponieważ DOM jest punktem, w którym łączona jest treść dokumentu ze stylami CSS. +

+

Zadanie: Analiza DOM

+

Do analizy DOM potrzebny jest specjalny program. +Służy do tego na przykład Inspektor DOM Mozilli. +

Użyj przeglądarki Mozilla do otworzenia przykładowego dokumentu. +

Z paska menu przeglądarki wybierz Narzędzia – Inspektor DOM lub Narzędzia – Programowanie WWW – Inspektor DOM. +

+ + +
Więcej szczegółów +
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. +

DevmoPL: Możesz też zainstalować DOMi jako rozszerzenie +

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

+
+

W Inspektorze DOM rozwiń węzły dokumentu, klikając na strzałki. +

Notka:  Formatowanie spacjami dokumentu HTML spowoduje, że pojawią się puste węzły, które możesz zignorować. +

Część wyniku może wyglądać tak: +

+ + +
+

│ +▼╴P +│ │ +│ ▼╴STRONG +│ │ └#text +│ ├╴#text +│ ▶╴STRONG +│ │ +

+
+
+

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

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źć. +

+ + +
Wyzwanie +
W Inspektorze DOM wybierz węzeł STRONG. +

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

+
+


+

+

Co dalej?

+

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

Jeżeli podjąłeś(podjęłaś) wyzwanie, widzisz, że informacje o stylu z wielu miejsc wiążą się, tworząc końcowy styl elementu. +

Następna strona wyjaśnia więcej na temat tych interakcji: +Kaskadowość i dziedziczenie +

{{ 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" } ) }} -- cgit v1.2.3-54-g00ecf