Style











Autorem strony jest
Aktualizacja
Strona utworzona za pomocą


Paweł Wimmer [e-mail]
29-VII-1997
HomeSite 2.5





Style

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




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



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:

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

Style to doskonałe narzędzie dla autora witryny.


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.

punkt pierwszy wykazu
punkt drugi wykazu
punkt trzeci wykazu

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




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



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