Style

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

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

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.
Przyk│adem nieostro┐nego pos│u┐enia siΩ poleceniem stylu by│a przez d│u┐szy czas witryna naszego wydawnictwa, na kt≤rej polecenie wstawienia g≤rnego marginesu ca│kowicie zrujnowa│o wy╢wietlanie kilku stron w przegl▒darce IE 3 (nie sprawdzili╢my zachowania tej wersji IE), m.in. strony "Co nowego?" - jak widaµ szewc potrafi tak┐e chodziµ bez but≤w :-)

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