mozilla
Wyniki wyszukiwania

    Jak działa CSS

    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:

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

    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 │ ├╴#textSTRONG │ │

    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

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Anonymous, Takenbot, Marcoos, Ruby, teoli, Verruckt, Zibek, Ptak82, gandalf, Mgjbot, Witia, Dria
    Ostatnia aktualizacja: teoli,