CSS:Na początek:Jak działa CSS
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
Ta strona wyjaśnia, jak działa CSS w przeglądarce.
Przeanalizujesz przykładowy dokument, poznając szczegóły jego stylów.
[edytuj] 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:
- W pierwszym Mozilla zmienia język znaczników oraz CSS w DOM (Model Obiektowy Dokumentu). DOM jest reprezentacją dokumentu w pamięci komputera. Wiąże on treść dokumentu z jego stylem.
- W drugim etapie Mozilla wyświetla ten DOM.
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.
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.
[edytuj] 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.
| 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źć.
| 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. |
[edytuj] 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