Przejdź na stronę publikacji Niezbędnika Nauczyciela

Kaskadowe arkusze stylów

Tym to sposobem dotarliśmy, do drugiego elementu, bez znajomości którego zbudowanie nowoczesnej strony WWW jest niemożliwe. Tym elementem są kaskadowe arkusze stylów - CSS (ang. Cascading Style Sheets). Podobnie, jak HTML, kaskadowe arkusze stylów są standaryzowane przez organizację W3C. CSS, to specjalny język opracowany tylko w jednym celu - aby umożliwić bardziej elastyczne zarządzanie formatowaniem (wyglądem) elementów znajdujących się w dokumentach HTML. CSS nie istnieje samodzielnie - jest ściśle powiązany z językiem HTML. Style dają możliwość globalnego zarządzania formą prezentacji całej witryny internetowej. Pomysł ten nie jest nowy. Style formatujące są wbudowane od dawna w praktycznie każdy bardziej zaawansowany edytor tekstu. Posiada je np. MS Word i Open Office.
Ponieważ znajomość i rozumienie CSS jest bardzo ważne, to najpierw wyjaśnijmy dokłanie pojęcie Kaskadowych Arkuszy Stylów.

Zanim jednak rozpoczniemy rozważania, przypomnij sobie obiektowy model dokumentu.

Pojęcie stylu

Styl obejmuje zbiór cech i przyporządkowanych im wartości. Spójrzmy na poniższy rysunek.

Przykład obiektu o określonych cechach
Rysunek 3_0_0_1. Przykład obiektu o określonych cechach

Załóżmy, że pokazany na rysunku prostokąt reprezentuje obiekt naszej strony, np div. Od razu możemy powiedzieć, że posiada on pewien zbiór cech i przypisanych im wartości:

  • kolor tła: jasnoniebieski;
  • kolor obramowania: czerwony;
  • grubość obramowania: 4 piksele;
  • styl obramowania: linia ciągła;
  • kolor czcionki: niebieski;
  • rozmiar czcionki: 18 pikseli;
  • nazwa czcionki: Arial;
  • ...

Wymieniliśmy tylko niektóre cechy - te które możemy określić nie mając pojęcia o stylach CSS. Niemniej jednak zdefiniowaliśmy styl. Formalny zapis poznamy w dalszym toku nauki, teraz chcę abyć zrozumiał na czym to wszystko polega. Raz zdefiniowany styl możemy "używać" wielokrotnie na różnych stronach witryny - wiele obiektów może posiadać ten sam styl. Wystarczy, że w kodzie HTML zaznaczymy, że dany obiekt posiada ten właśnie styl.

Dlaczego arkusze?

Tworząc witrynę, musimy definiować wiele stylów - w związku z tym gdzieś je trzeba zapisać. Służą do tego odzielne pliki tekstowe - arkusze stylów. Arkusze CSS posiadają rozszerzenie .css. Jak się później dowiemy, style można również definiować w dokumencie HTML, niemniej podstawą są zewnętrzne arkusze - im więcej stylów tam zdefiniujemy, tym prostszy, bardziej przejrzysty będzie kod HTML. Style umieszczone w nagłówku head dokumentu HTML, są nazywane arkuszami wewnętrznymi.

Dlaczego kaskadowe?

Ponieważ style zorganizowanie są stopniowo i hierarchicznie, tworząc kaskadę stylów:

  • style domyślne proponowane przez przeglądarę,
    • style definiowane w arkuszach zewnętrznych,
      • definicje stylów na nagłówku <head> dokumentu HTML
        • definicje bezpośrednio w znaczniku obiektu strony

Weźmy dla przykładu kolor czcionki akapitu:

  • domyślnie jest definiowany jako czarny, więc wszystkie akapity na wszystkich stronach serwisu będą pisane czcionką koloru czarnego, chyba że:
    • w arkuszu zdefiniujemy go jako niebieski i wtedy tekst wszystkich akapitów na wszystkich stronach witryny będzie wyświetlany w kolorze niebieskim, chyba że:
      • w nagłówku <head> dokumentu zdefiniujemy go jako zielony i wtedy wszystkie akapity danego dokumentu będą pisane czcionką zieloną (na innych stronach czcionką niebieską), chyba że:
        • zdefiniujemy w niektórych znacznikach <p> kolor jako czerwony i wtedy w tych akapitach czcionka będzie czerwona, w innych akapitach tego dokumentu, będzie zielona, natomiast na innych stronach witryny - niebieska.

Czy teraz widzisz stopniowanie i rozumiesz herarchiczność stylów? Jeżeli tak, to wiesz dlaczego nazywane są kaskadowymi. Zauważ że styl znajdujący się "bliżej" obiektu anuluje styl definiowany na wyższym poziomie.

Kaskadowe jest również dziedziczenie stylów, związane z miejscem danego obiektu w drzewie obiektów. Jeżeli na przykład zdefiniujemy w arkuszu zewnętrznym czcionkę obiektu body jako niebieską, to wszystkie teksty wszystkich obiektów na wszystkich stronach będą pisane czcionką niebieską, chyba że dany obiekt posiada swój własny styl a w nim czcionkę innego koloru.

Praca domowa

Wyjaśnij w zeszycie pojęcie i zastosowanie kaskadowych arkuszy stylów.