Arkusze stylów w kilku przykładach
We wszystkich przykładach porównaj efekt wyświetlany w przeglądarce ze
źródłem strony wyświetlanym przez opcję "Pokaż źródło" lub podobną!
Co potrafią arkusze stylów? - najprostszy przykład
- Bardzo prosty plik HTML napisany z użyciem
kilku elementarnych znaczników (<h2>, <p>, <hr>,
<address>), bez użycia arkuszy stylów
- Ten sam plik z użyciem arkuszy stylów. Zauważ,
że kod HTML części <body> ani trochę się nie zmienił, natomiast
poszczególnym rodzajom wymienionych powyżej znaczników zostały przypisane w
nagłówku strony style.
Sposoby definiowania stylów
- W tym pliku pokazane są najczęściej spotykane
sposoby definiowania stylów: dla wszystkich znaczników danego rodzaju, dla
klas, dla identyfikatorów oraz przez bezpośrednie wpisywanie stylu w
atrybucie "style=" znacznika HTML. Plik demonstruje również, na czym polega
"kaskadowość" arkuszy stylów, ich dziedziczenie z elementów nadrzędnych i
"przykrywanie" stylów bardziej ogólnych przez bardziej szczegółowe.
- Style można umieszczać również w oddzielnym
pliku. Pod względem kodu HTML ten przykład jest identyczny z poprzednim,
tyle tylko, że cały arkusz stylów został "wyjęty" do osobnego pliku styl.css, "podłączonego" do strony znacznikiem
<link> w nagłówku. Jest to rozwiązanie bardzo często stosowane
wówczas, gdy tworzymy jednolite style dla wszystkich stron w obrębie całego
serwisu.
CSS + Javascript = DHTML !
DHTML, czyli dynamiczny HTML - oznacza to najkrócej mówiąc manipulowanie
stylami dokumentu HTML-owego przez funkcje w Javascripcie. Jednym z
najpopularniejszych zastosowań DHTML-a było i jest wyświetlanie bądź
ukrywanie określonego fragmentu strony, w zależności od tego, co zrobi
użytkownik:
- Ta wersja, wbrew napisowi w
nagłówku strony, działa nie tylko w Internet Explorerze, ale we wszystkich
współczesnych przeglądarkach, które obsługują Obiektowy Model Dokumentu
(DOM) - w Firefoksie czy Operze także
- W starym Netscape 4.x
natomiast pewne elementy DHTML-a były realizowane zupełnie inaczej. Ta
strona zadziała tylko w tej przeglądarce (na dobrą sprawę nikt już jej nie
używa, mozna o niej zapomnieć).
- Można oczywiście zrobić wersję
uniwersalną, wykorzystując rozpoznawanie przeglądarki.
W powyższych przykładach funkcje pokaz() i chowaj()
umożliwiały wyświetlanie i chowanie dowolnego elementu HTML-owego, którego
identyfikator był przekazany jako parametr do tych funkcji. Oczywiście
jeżeli na całej stronie chcemy pokazywać bądź ukrywać tylko jeden konkretny
element, możemy zrezygnować z parametru i wpisać identyfikator tego elementu
bezpośrednio w treść tych funkcji. Taki przykład (we wszystkich trzech
wersjach analogicznie jak powyżej) jest tutaj.