![[hand]](../grafika/hand.gif){kind=small}
Wstęp[Uwaga: strona jest rekonstruowana, ale zakończenia można się spodziewać w sierpniu-wrześniu. Już teraz można się zapoznać z tłumaczonym sukcesywnie Przewodnikiem po stylach CSS2 - PW, czerwiec 1999]
Języki służące do budowy stron WWW zostały uzupełnione o potężne narzędzie do formatowania dokumentów internetowych - style (CSS - Cascading Style Sheets). Jest to rewolucyjna idea, w zasadniczy sposób zwiększająca elastyczność narzędzi i możliwości autorów stron. Warto zauważyć, że style leżą także u podstaw dynamicznego HTML (z technicznego punktu widzenia jest to połączenie stylów z językami skryptowymi, np. JavaScript) , który zdobywa sobie powoli prawo obywatelstwa na bardziej zaawansowanych stronach WWW. Style są niezbyt skomplikowane w konstrukcji, dając zarazem zaawansowane możliwości manipulowania postacią dokumentów, jakich brakowało w tradycyjnym języku HTML. Umiejętne stosowanie stylów pozwala całkowicie odmienić wygląd strony, nie szkodząc zarazem przeglądarkom, które stylów nie interpretują. Podkreślmy też wyraźnie, że CSS2 jest bardzo poważnym krokiem do przodu w stosunku do CSS1.
Jest to naturalny etap rozwoju języka, którego pojawienie się było łatwe do przewidzenia dla osób interesujących się głębiej edytorami tekstów, w których style zajmują bardzo eksponowane miejsce. Styl, będący zespołem kodów formatujących (jednego czy kilku), pozwala obecnie globalnie lub lokalnie zmieniać sposób formatowania wybranego fragmentu dokumentu. Style są obecnie (lato 1999) w znacznej mierze interpretowane przez przeglądarki Netscape Communicator 4.x i Internet Explorer 4 i 5. Wersja 3 programu Microsoftu interpretuje je szczątkowo i w pewnej mierze odmiennie od obowiązujących obecnie zasad. Na szczęście ta przestarzała wersja jest już "wymierająca", a jej udział w rynku nie przekracza 6-8 procent. Peryferyjna ciągle norweska Opera interpretuje CSS w wersji 1.
Zwróćmy też od razu uwagę na pewien istotny motyw powstania stylów. Język SGML, którego HTML jest pochodną, zajmuje się strukturą dokumentów i ich stroną semantyczną. Nie zajmuje się natomiast ich stroną wizualną, formatowaniem. HTML przekroczył tę barierę i z czysto praktycznych przyczyn od początku zaczął się rozszerzać o polecenia formatujące, dzięki którym dokumenty HTML są wizualnie dość różnorodne. Jednak ubocznym skutkiem tej sytuacji stał się "dziki wyścig" firm mających największy wpływ na rynku oprogramowania - Netscape i Microsoft, pewne swej silnej pozycji i roszcząc sobie prawo do swoistego ustawodawstwa zaczęły narzucać rozmaite rozszerzenia, interpretowane tylko przez ich przeglądarki, jak np. migotanie tekstu (NC) czy animacja Marquee (IE). Niektóre z tych rozszerzeń okazały się trafne i były sankcjonowane przez kolejne specyfikacje HTML, inne okazały się ślepym zaułkiem. Dobrym przykładem jest znacznik <font face>, który sterował czcionkami w dokumencie - w HTML 4 jest on określony jako przestarzały i odradza się jego stosowanie, zalecając przenoszenie informacji o czcionkach do stylów.
Arkusze stylów są próbą "powrotu do źródeł". Dzięki nim będzie można stopniowo rezygnować z formatowania bezpośrednio za pomocą HTML, przerzucając odpowiedzialność na style. W ten sposób HTML pozostanie w swej czystej, kanonicznej postaci i nie będzie już ryzyka niekontrolowanego rozbudowywania zestawu znaczników. Specyfikacja CSS2 jest narzędziem mocnym i wszechstronnym - problem jedynie w tym, aby ważniejsze przeglądarki poprawnie interpretowały wszystkie polecenia.
Na marginesie uwaga: jest niemal pewne, że podstawowe sposoby formatowania na zawsze pozostaną w HTML, i to z paru powodów. Po pierwsze, należy się liczyć z faktem, że niektóre egzotyczne przeglądarki nie będą sobie mogły poradzić z interpretacją stylów, po drugie zaś, miliony dokumentów w WWW są formatowane za pomocą klasycznego HTML i konieczne by było ich przetworzenie, zgodnie ze specyfikacją stylów - raczej nie jest to możliwe, więc konieczność zgodności "w dół" spowoduje, że te zaszłości będą zawsze honorowane przez przeglądarki.
Niniejszy opis powstaje na podstawie specyfikacji stylów poziomu drugiego (CSS2), zaprezentowanej w czerwcu 1998 roku przez World Wide Web Consortium. Organizacja skupia obecnie ok. 150 firm, wśród których znalazły się takie kompanie, jak Microsoft czy Netscape, deklarujące od pewnego czasu chęć respektowania ustaleń W3C, co jest szczególnie istotne, gdy przypomnimy sobie ich próby narzucania własnych rozwiązań. Za specyfikacje CSS odpowiada "czterech wspaniałych": Håkon Lie i Bert Bos (CSS1) oraz Håkon Lie, Bert Bos, Chris Lilley i Ian Jacobs (CSS2).
Style można oczywiście konstruować ręcznie, gdyż jest to zwykły tekst. Jednak lepiej jest się posługiwać narzędziami wspomagającymi, które ułatwiają i przyspieszają ich tworzenie, zmniejszając zarazem ryzyko popełniania błędów składniowych - zachodzi tutaj pełna analogia z językiem HTML i edytorami.
Programiści wprowadzają do edytorów HTML kreatory stylów (wizards), pozwalające w komfortowy sposób definiować wielkość i kolor czcionki, kolor odsyłaczy, tło czy marginesy tekstu. Warto podkreślić, że własne edytory stylów zawierają m.in. HomeSite i polskie Pajączek 2000 i Tiger98, zaś pierwszym programem, który zaimplementował CSS2 jest Balthisar Cascade - dedykowany edytor stylów. Można go pobrać ze strony Narzędzi internetowych (programy) w witrynie PCkuriera. Warto też wykorzystywać spotykane coraz częściej w edytorach HTML funkcje definiowania własnych znaczników (custom tags), gdzie można zdefiniować ciekawe style i doraźnie przywoływać je w trakcie formatowania dokumentu.
W maju 1999 ukazał się najlepszy, jak dotąd, dedykowany edytor stylów. Jego autorem jest Nick Bradbury, znany doskonale jako autor HomeSite'a - Bradbury odszedł z firmy Allaire i założył Bradbury Software, tworząc od razu program TopStyle Editor - jego wersję testową można pobrać ze strony http://www.bradsoft.com. Opis wersji beta 1 można znaleźć w Narzędziach internetowych, w witrynie PCkuriera - http://www.pckurier.pl/inetools/topstyle.html. TopStyle Editor współpracuje też bezpośrednio z HomeSite'em, zastępując jego wbudowany edytor stylów.
Pokażmy od razu przykład stylu, obejmującego wybrany fragment tekstu. Jest to jeden z dwóch sposobów wstawiania stylu in-line.
<P STYLE="font-size: 20pt; font-weight: bold; background: yellow; color: red">Style to doskonałe narzędzie dla autora witryny</P>.
Style to doskonałe narzędzie dla autora witryny
.Ogólne polecenie stylu ma postać selektor { cecha: wartość } (w jęz. angielskim selector { property: value }). Selektorem jest po prostu polecenie języka, np. P, LI, TD, BODY itd. Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki. Zawartość nawiasów klamrowych, czyli cechę i wartość, określamy także mianem deklaracji stylu.
Przykłady:
P {font-family: Times}
Selektorem jest P, cechą - rodzina czcionek, wartością - Times.
To jest czcionka Times
H1 {font-size: 30pt}Możemy oczywiście łączyć ze sobą różne cechy i wartości, zgodnie ze schematem:
Selektor { cecha1: wartość1; cecha2: wartość2 }
Proszę zwrócić uwagę na średnik rozdzielający pary cech-wartości.
H3 {font-variant: small-caps; font-size: 15pt; color: yellow; font-family: Courier}| UWAGA: Ze względu na fakt, że przeglądarki interpretują jedynie część stylów, a ponadto Navigator i Internet Explorer robią to niekiedy "po swojemu", zaleca się ostrożne wykorzystywane stylów. Należy uważnie sprawdzić zachowanie obu głównych przeglądarek, zanim poślemy naszą stronę na serwer, gdyż interpretacje są niekiedy odmienne i poprawnie skonstruowana strona może być bez kłopotu wyświetlana w jednej z nich, a całkowicie błędnie w drugiej - zaskakujące bywają niekiedy interakcje stylów. |
W punkcie Budowa stylu powiedzieliśmy o ogólnej konstrukcji stylu, wprowadzając m.in. kluczowe pojęcie selektora. W tym miejscu odsyłamy do strony Selektory, w której znacznie rozszerzymy tę problematykę.
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ę odstępstwa interpretacyjne od tej zasady - przykładowo, zdefiniowanie czcionki w BODY (a więc na szczycie hierarchii) nie wpływa na postać czcionki w komórkach tabeli, jeśli stronę oglądamy w Netscape Communicatorze. Należy się liczyć z tego typu uchybieniami i sprawdzać wygląd strony przynajmniej w dwóch 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 następnym punkcie, style mogą być wprowadzane w nagłówku strony (HEAD), bezpośrednio w dokumencie, 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 nagłówku 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. 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).
Style mogą być umieszczane w dokumencie na kilka sposobów:
Styl lokalny * Rozciąganie stylu * Wydzielone bloki * Zagnieżdżanie arkusza * Dołączanie do zewnętrznego arkusza * Importowanie arkusza
Poniższe odsyłacze prowadzą do stron zawierających przykłady stylów, które mogą być pojedynczo lub w grupach aplikowane rozmaitym elementom dokumentu WWW. Przykłady są sprawdzane w najnowszych wersjach Netscape Navigatora (4.6) i Internet Explorera (5.0). Oba programy zaimplementowały już większość stylów, ale ciągle pozostają poważne opóźnienia, zwłaszcza w przypadku Navigatora. Próby z nowym "engine'em" Mozilli, czyli Gecko, także wypadają dość skromnie - ten, w zamierzeniu, superszybki i znacznie udoskonalony mechanizm renderingu stron, w rzeczywistości jest okrutnie powolny i ma mnóstwo dziur w interpretacji elementów stylów. Dlatego na razie nie odwołujemy się do Gecko, czekając, aż "silnik" zostanie ostatecznie wbudowany do Navigatora. Może będzie to rewolucja, a może nie - zobaczymy.
Dział w rekonstrukcji...
Własności czcionek * Własności tekstu * Kolor i tło * Marginesy * Obramowania * Obrys * Wykazy * Tabele * Klasyfikacje * Rozmiary * Pozycjonowanie * Zawartość dynamiczna * Zawartość generowana * Własności międzynarodowe * Jednostki miary * Kursory * Własności drukowania * Dźwięk