From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../page_inspector/przewodnik_przez_ui/index.html" | 108 +++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 "files/pl/narz\304\231dzia/page_inspector/przewodnik_przez_ui/index.html" (limited to 'files/pl/narzędzia/page_inspector/przewodnik_przez_ui/index.html') diff --git "a/files/pl/narz\304\231dzia/page_inspector/przewodnik_przez_ui/index.html" "b/files/pl/narz\304\231dzia/page_inspector/przewodnik_przez_ui/index.html" new file mode 100644 index 0000000000..c3c2375155 --- /dev/null +++ "b/files/pl/narz\304\231dzia/page_inspector/przewodnik_przez_ui/index.html" @@ -0,0 +1,108 @@ +--- +title: Przewodnik przez UI +slug: Narzędzia/Page_Inspector/Przewodnik_przez_UI +tags: + - Inspektor + - Narzędzia + - Przewodnik +translation_of: Tools/Page_Inspector/UI_Tour +--- +

Ten artykuł jest szybkim wprowadzeniem do głównych sekcji Interfejsu Użytkownika (UI) Inspektora Stron.

+ +

Obejmuje on trzy komponenty najwyższego poziomu UI Inspektora:

+ + + +

Ten przewodnik jest celowo tak krótki, jak to możliwe. Odnosi się on do różnych innych przewodników How-To dla szczegółów, jak pracować z Inspektorem.

+ +

Przycisk "Zaznacz element"

+ +

Inspektor podaje Ci dokładne informacje o aktualnie zaznaczonym elemencie. Przycisk "Zaznacz element" jest jedną z możliwości, które pozwalają zaznaczyć element do sprawdzenia:

+ +

+ +

Pamiętaj, że jest to część tzw. main toolbox toolbar, więc przycisk ten jest dostępny z dowolnego narzędzia, nie tylko z Inspektora.

+ +

Aby dowiedzieć się, jak zaznaczyć element, zobacz przewodnik o zaznaczaniu elementu.

+ +

Sekcja HTML

+ +

Inspektor jest podzielony na dwie części. Lewa część Inspektora to sekcja HTML (na obrazku: HTML pane)

+ +

+ +

Aby dowiedzieć się więcej o budowie sekcji HTML, zobacz przewodnik o badaniu i edytowaniu HTML.

+ +

Sekcja CSS

+ +

Prawa część Inspektora to sekcja CSS (na obrazku: CSS pane):

+ +

Sekcja CSS jest podzielona 5 perspektyw:

+ + + +

Użyj zakładek w górnej części sekcji CSS, aby przełączać się pomiędzy różnymi widokami.

+ +

Widok Reguł

+ +

Widok Reguł wyświetla wszystkie reguły pasujące do zaznaczonego elementu, w kolejności od najbardziej do najmniej specyficznych:

+ +

+ +

Zobacz Badaj i edytuj CSS dla dalszych szczegółów.

+ +

Widok Wyliczony

+ +

Widok Wyliczony pokazuje całe wyliczone CSS dla zaznaczonego elementu.

+ +

+ +

Zobacz Badaj i edytuj CSS dla dalszych szczegółów.

+ +

Widok Czcionek

+ +
+

Zaczynając od Firefoksa 47, widok Czcionek jest domyślnie wyłączony. Pracujemy nad bardziej funkcjonalnym zamiennikiem.

+ +

Na tą chwilę, jeśli chcesz zobaczyć widok Czcionek, odwiedź about:config, znajdź preferencję devtools.fontinspector.enabled i ustaw ją na true.

+
+ +

Widok Czcionek pokazuje wszystkie czcionki na stronie wraz z przykładami ich użycia, które można edytować.

+ +

+ +

Odwiedź stronę Zobacz Czcionki dla dalszych szczegółów.

+ +

Widok Modelu Pudełkowego

+ +

Widok Modelu Pudełkowego pokazuje edytowalny widok modelu pudełkowego zaznaczonego elementu.

+ +

+ +

Zabacz Badaj i edytuj model pudełkowy dla dalszych szczegółów.

+ +

Widok Animacji

+ +

Widok Animacji pozwala zobaczyć szczegóły dowolnej animacji zastosowanej w zaznaczonym elemencie, oraz udostępnia kontroler do ich wstrzymania:

+ +

 

+ +

+ +

Zobacz Pracuj z animacjami dla dalszych szczegółów.

+ +

Pokaż/ukryj sekcję CSS

+ +

Począwszy od Firefoksa 40 w pasku narzędzi istnieje przycisk, za pomocą którego możesz pokazać lub ukryć sekcję CSS:

+ +

-- cgit v1.2.3-54-g00ecf