Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory



Wstęp | Budowa stylów | Style w przykładach | Wstawianie stylów

Style

[Uwaga: strona jest w trakcie rekonstrukcji, która potrwa kilka tygodni - PW, styczeń '98]


[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. 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 CSS 2 jest bardzo poważnym krokiem do przodu w stosunku do CSS 1.

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 (styczeń 1998) 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 10 procent.

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 specyfikacji stylów poziomu drugiego (CSS2), zaprezentowanej w czerwcu 1998 roku przez World Wide Web Consortium.

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. 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. Osobom zainteresowanym projektowaniem stron polecam pilne śledzenie rozwoju edytorów. Warto wspomnieć, że własne edytory stylów zawierają m.in. HomeSite i polskie Pajączek 2000 i Tiger98, zaś pierwszym programem, który zaimplementował CSS 2 jest Balthisar Cascade - dedykowany edytor stylów. Można go pobrać ze strony Narzędzi internetowych w witrynie PCkuriera.

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



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.



[hand]Kaskadowość i dziedziczenie

Kaskadowość i dziedziczenie



[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 (grudzień 1998) w najnowszych wersjach Netscape Navigatora (wersja 4.5) i Internet Explorera (wersja 5.0 beta 2). Oba programy zaimplementowały już większość stylów, ale ciągle pozostają poważne opóźnienia, zwłaszcza w przypadku Navigatora.


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


[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