Wstęp

Rozszerzenia języka HTML dodają 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ść języka i możliwości autorów stron WWW.

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 tekstu. Style są obecnie (grudzień 1997) częściowo interpretowane przez przeglądarki Netscape Communicator 4 i Internet Explorer 3 i 4. Dopiero ostateczne wersje tych programów będą mogły pokazać, w jakim stopniu style są przez nie akceptowane. W tej chwili zaimplementowano nie więcej niż połowę stylów.

Autorom stron należy zalecać ostrożność i sprawdzanie postaci stron ze stylami w obu przeglądarkach, 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.

Niniejszy opis powstaje na podstawie HTML&Style Sheets Working Draft z marca 1997 (cytowane za CSS Reference firmy Web Design Group - WDG). Specyfikacja stylów, aczkolwiek już zbliżona do ostatecznej wersji, może się zmieniać w szczegółach do momentu ukończenia prac przez World Wide Web Consortium. Nasz opis będzie więc sukcesywnie aktualizowany.

Style mogą być umieszczane w dokumencie na kilka sposobów:

• Kody formatujące są umieszczane na początku strony i oddziałują na cały dokument.
• Kody formatujące są umieszczane w środku tekstu (in-line style) i dotyczą wybranego znacznika dokumentu.
• Kody formatujące są umieszczane w środku tekstu, obejmują większy fragment dokumentu i nie są związne z wybranymi znacznikami.
• Kody formatujące są umieszczane na wzorcowych stronach na serwerze, a w dokumentach wstawiamy odpowiednie odwołania do tych stron, co powoduje automatyczne zmiany sposobu formatowania. Są to odwołania do tzw. stylów zewnętrznych.
• Kody formatujące są importowane z innej strony za pomocą polecenia @import.

W tym miejscu należy zauważyć, że warto już teraz 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. Wytężona praca czeka także programistów, którzy powinni szybko wprowadzić do edytorów kreatory stylów (wizards), pozwalające w komfortowy sposób definiować wielkość i kolor czcionki, kolor odsyłaczy, tło tekstu czy marginesy tekstu. Osobom zainteresowanym projektowaniem stron polecam pilne śledzenie rozwoju edytorów, a i sam nie omieszkam sygnalizować ciekawszych dokonań. Warto wspomnieć, że własne edytory stylów posiadają HomeSite 2.x i polski Pajączek 2, aczkolwiek nie potrafią one jeszcze tworzyć całego bogactwa stylów, jakie niesie ze sobą nowa ich specyfikacja.

Na zakończenie tych krótkich uwag, aby nie być gołosłownym, już teraz pokażę 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>.

Budowa stylu

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.

P {font-family: Times}
Selektorem jest P, cechą - rodzina czcionek, wartością - Times.

To jest czcionka Times

To jest 30-punktowy tytuł stopnia pierwszego

• punkt pierwszy wykazu
• punkt drugi wykazu
• punkt trzeci wykazu

Czerwony tytuł stopnia drugiego

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.

Tytuł stopnia trzeciego, 15-punktowy, żółty, kapitaliki

Style w przykładach

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 (21 grudnia) w najnowszych wersjach Netscape Navigatora - wersja 4.04 i Internet Explorera - wersja 4.0 PL. Oba programy zaimplementowały tylko część stylów.

Własności czcionek * Kolor i tło * Własności tekstu * Marginesy i obramowania * Wyświetlanie * Pozycjonowanie * Jednostki miary * Kursory * Własności drukowania

Wstawianie stylów

Dołączanie do zewnętrznego arkusza * Zagnieżdżanie arkusza * Importowanie arkusza * Styl lokalny * Klasy * Identyfikatory ID * Rozciąganie stylu * Wydzielone bloki