Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Kaskadowość i dziedziczenie

Email Drukuj PDF

W Cascading Style Sheets istnieją dwa istotne pojęcia, o których należy pamiętać przy konstruowaniu stylów - dziedziczenie stylów i ich kaskadowy charakter.

Dziedziczenie polega na tym, że elementy niższe w hierarchii drzewa dokumentu (pojęcie drzewa jest wyjaśnione w rozdziale Selektory) dziedziczą formatowanie elementów leżących wyżej w hierarchii, chyba że wyraźnie nadamy im inne formatowanie. Przykładowo, jeśli ustalimy, że tekst w jakiejś tabeli ma być przedstawiony za pomocą pogrubionej czcionki Helvetica, to wszystkie komórki tabeli będą w ten sposób formatowane, gdyż komórka <td> leży niżej w hierarchii (drzewie dokumentu) niż tabela <table>. Jeśli natomiast nadamy odrębne formatowanie wybranej komórce (utworzymy wyjątek), to oczywiście wygląd czcionki w tej komórce zmieni się, gdyż bezpośrednie zdefiniowanie czcionki w wybranym miejscu ma pierwszeństwo przed ogólniejszym formatowaniem tabeli (na wyższym szczeblu). Taka jest właśnie ogólna zasada - jeśli wyraźnie nie zdefiniujemy formatowania dla jakiegoś elementu, dziedziczy on własności po swoich "przodkach", czyli elementach wyższych w hierarchii.

Niestety, zdarzają się czasem, chociaż coraz rzadsze, odstępstwa interpretacyjne od tej zasady - należy się liczyć z tego typu uchybieniami i sprawdzać wygląd strony w głównych przeglądarkach. No i czekać na pełną implementację CSS2.

Zasada dziedziczenia stylów jest bardzo wygodna, gdyż oszczędza autorowi strony czaso- i pracochłonnego wprowadzania mnóstwa informacji dla każdego elementu z osobna. Możemy na przykład ustalić pewne ogólne cechy dla całej strony, a dodać nieco konkretyzującej informacji dla niższych w hierarchii akapitów czy wykazów - połączą one wtedy w sobie "dziedziczoną" informację z wyższego szczebla i konkretyzującą informację ich samych. Dziedziczenie jest zresztą bardzo intuicyjnym i łatwo zrozumiałym pojęciem, jeśli ma się w sobie nieco kultury logicznej.

Kaskadowość, od której wzięły nazwę style, polega z kolei na ustaleniu hierarchii źródeł stylów. Jak Czytelnik będzie się mógł przekonać w rozdziałach o wstawianiu stylów, style mogą być wprowadzane w nagłówku strony (head), bezpośrednio w ciele dokumentu, mogą też pochodzić z zewnętrznych źródeł, np. arkuszy wzorcowych. Konieczne jest więc ustalenie hierarchii ważności w przypadku konfliktu stylów. Może się bowiem zdarzyć, że zewnętrzny arkusz definiuje akapit za pomocą czcionki Times 12pt, w nagłówku strony akapit jest reprezentowany przez czcionkę Helvetica 11pt, a w samym dokumencie pojawia się akapit zdefiniowany za pomocą czcionki Times 11pt. Problem więc w tym, która definicja ma pierwszeństwo i jaka jest ich hierarchia.

Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w części nagłówkowej dokumentu, to zaś może być modyfikowane przez style zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane "bliżej" konkretnego elementu. Schematycznie ujmując, przeglądarka sprawdza więc najpierw, czy istnieją jakieś arkusze zewnętrzne i stosownie do ich definicji formatuje stronę. Następnie sprawdza, jakie są definicje stylów w nagłówku strony i modyfikuje wygląd zgodnie z ich ustaleniami. Następnie sprawdza style w samym dokumencie i ponownie modyfikuje fizyczną postać strony. To oczywiście model działania, ale pokazuje on, jak działa taka kaskada stylów. Między stylami z różnych źródeł nie muszą zresztą wcale występować żadne konflikty - wszystkie style uzupełnią się, tworząc jeden wielki, "wirtualny" styl.

Ta zasada pozwala też, co szczególnie ważne, wygodnie manipulować postacią całych kompleksów stron. Można na przykład ustalić pewne ogólne cechy całej witryny firmy i zawrzeć je w zewnętrznym arkuszu stylów. Następnie można zbudować odrębne arkusze dla wydziałów firmy i zawrzeć w nich bardziej konkretyzującą informację. Po ustaleniu hierarchii arkuszy można łatwo definiować style dla dziesiątek i setek stron, a jedna drobna zmiana w arkuszu powoduje zmiany we wszystkich objętych nimi dokumentach.

Jak z tego widać, kaskadowość i dziedziczenie uzupełniają się, tworząc zwarty system ogólnych zasad sterujących działaniem stylów. Kaskadowość ustala hierarchię różnych źródeł stylów, a dziedziczenie wpływa na wygląd strony z punktu widzenia hierarchii elementów w danym dokumencie (drzewie dokumentu).

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V