Autorem strony jest Aktualizacja Powrót do pomocy programu
Paweł Wimmer
[e-poczta] pawel.wimmer@lupus.waw.pl
[klepsydra] 29-VII-1997 [Pajaczek 2.0] Pajaczek 2.0
[zielona kropka][zielona kropka][zielona kropka]

Style

Uwaga: Jeśli przykład nie odzwierciedla oznakowania, oznacza to, że przeglądarka nie akceptuje danego znacznika



[hand]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 (lipiec 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.

W tym miejscu znajduje się tabela pokazująca stopień zaimplementowania stylów (60 KB).

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:

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>.

Style to doskonałe narzędzie dla autora witryny

.

[hand]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.

Przykłady:

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

To jest czcionka Times

H1 {font-size: 40pt}
Selektorem jest H1, cechą - wielkość czcionki, wartością - 30 punktów.

To jest 30-punktowy tytuł stopnia pierwszego

UL {font-weight: bold}
Selektorem jest UL, cechą - waga czcionki, wartością - pogrubienie. H2 {color: #FF0000}
Selektorem jest H2, cechą - kolor, wartością - kolor czerwony.

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.

H3 {font-variant: small-caps; font-size: 15pt; color: yellow; font-family: Courier}

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


[hand]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 w najnowszych wersjach Netscape Navigatora (19 lipca - wersja 4.01a) i Internet Explorera (wersja 4.0 Preview 2). 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


[hand]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