Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

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.