Kaskadowe arkusze stylów

Pod koniec 1990 roku pojawił się język HTML, opracowany przez 35-letniego wówczas Tima Berners-Lee, rewolucjonizując i demokratyzując Internet. Sir Timothy pozostaje do dziś jednym z najważniejszych animatorów światowej sieci, ale jego pierwotne dzieło jest stale rozwijane przez innych pionierów Internetu.

Pod koniec 1990 roku pojawił się język HTML, opracowany przez 35-letniego wówczas Tima Berners-Lee, rewolucjonizując i demokratyzując Internet. Sir Timothy pozostaje do dziś jednym z najważniejszych animatorów światowej sieci, ale jego pierwotne dzieło jest stale rozwijane przez innych pionierów Internetu.

Miano drugiej rewolucji przysługuje chyba koncepcji stylów, której wstępny szkic pojawił się w połowie 1995 roku, a pod koniec tego samego roku przybrał postać roboczego dokumentu World Wide Web Consortium - instytucji tworzącej sieciowe standardy. Rekomendacje W3C, czyli właściwie oficjalne specyfikacje, pojawiały się kolejno w grudniu 1996 roku (CSS1) i maju 1998 roku (CSS2). Obecnie jest wersja robocza CSS 2.1 z 2002 roku oraz urywki wersji 3.0, jakkolwiek ich wzajemna relacja jest niezupełnie jasna.

Koncepcja

Najłatwiej wytłumaczyć sens stylu, posługując się jego odpowiednikiem w edytorze Word. Styl to zespół kodów formatujących jakiś fragment dokumentu - przykładowo nagłówek poziomu 1. w Wordzie jest domyślnie formatowany pogrubioną czcionką Arial o wielkości 16 pkt. Ten zestaw cech zapisany pod jakąś nazwą jest właśnie stylem, dzięki któremu nie musimy tych cech nadawać oddzielnie wskazanemu tekstowi (Arial + bold + 16 pkt), lecz robimy to niejako hurtowo, przypisując po prostu gotowy styl.

Warto zwrócić uwagę na to, że język HTML zawierał od początku dwie cechy. Z jednej strony, za pomocą zawartych w nim poleceń budowano pewną strukturę dokumentu, z drugiej zaś poszczególne znaczniki zawierały od razu formatowanie (wizualizacji na ekranie dokonywały już przeglądarki internetowe, interpretując "po swojemu" znaczniki HTML) np. odmiennie wyglądało formatowanie nagłówków (lub inaczej tytułów), a inaczej formatowanie akapitów. Takie rozwiązanie, choć mało eleganckie z punktu widzenia konstrukcji, było praktycznym, przez wiele lat jedynym możliwym sposobem wyróżniania fragmentów dokumentu. Po pewnym czasie uznano jednak, że powinno się rozdzielić strukturę i wizualizację, a to wymagało z kolei opracowania systemu formatowania.

Arkusze stylów są próbą "powrotu do źródeł" (do idei leżącej u podstaw SGML, z którego wywodzi się HTML). Dzięki nim można rezygnować z formatowania bezpośrednio za pomocą HTML, przerzucając odpowiedzialność na style. W ten sposób HTML pozostanie w czystej, kanonicznej postaci i nie będzie już ryzyka niekontrolowanego rozbudowywania zestawu znaczników, które do pewnego momentu miały stanowić odpowiedź na rosnące potrzeby twórców stron internetowych, a nierzadko powodowały zamieszanie.

Bardzo wyraźnie widać tę ewolucję na przykładzie języka XML, który w ostatnich latach staje się podstawowym narzędziem do budowania strumieni informacji, wymienianych przede wszystkim między programami i maszynami. XML jest tak naprawdę językiem do tworzenia innych języków (aplikacji), które z kolei służą do wymiany informacji z jakiejś dziedziny wiedzy. MathML jest aplikacją XML do tworzenia dokumentów matematycznych, CheML obsługuje dokumenty o tematyce chemicznej, BizTalk jest narzędziem biznesowym itd. We wszystkich tych językach istotną funkcję spełniają arkusze stylów, które wizualizują ustrukturalizowane dane, mające w pierwotnej postaci charakter drzewa.

Podkreślmy jednak od razu, ze prawdopodobnie język HTML nigdy nie straci do końca znaczenia jako narzędzie formatowania - chyba mało kto stosuje style do wyróżnienia tekstu pogrubionego czy kursywy, mogąc użyć prostego polecenia &# czy $.

Tak więc idea stylów polegała na zbudowaniu systemu, za pomocą którego można by przypisywać rozmaite cechy wybranym fragmentom dokumentu - atrybuty czcionki, kolor, położenie w wierszu lub na stronie, grubość obramowania, marginesy, rozmiary elementów, odstępy itd. Cechy te można przypisywać w sposób niemal kombinatoryczny, dając autorowi strony nieporównanie większą swobodę w kształtowaniu ostatecznej postaci dokumentu. Za pomocą stylów można całkowicie przemodelować wygląd strony, nawet jeśli jej elementy pozostają bez zmiany.

Koncepcja stylu zawiera kilka aspektów, które przedstawimy pokrótce. Są to:

  • techniki budowy stylu

  • sposoby wstawiania stylu do dokumentu

  • pojęcie dziedziczenia stylów

  • pojęcie kaskadowego oddziaływania hierarchii stylów.
Budowa stylu

Przykład rozbudowanego stylu nadanego tytułowi stopnia trzeciego.

Przykład rozbudowanego stylu nadanego tytułowi stopnia trzeciego.

Ogólne polecenie stylu ma postać: selektor { cecha: wartość } - w jęz. angielskim selector { property: va!ue }. Selektorem jest polecenie języka, np. P, LI, TD, BODY itd., a cechą pewna własność danego znacznika, np. wielkość i styl czcionki akapitu. Wartość konkretyzuje cechę, np. 12 pkt czy pogrubienie w wypadku czcionki. Zawartość nawiasów klamrowych, czyli cechę i wartość, określamy także mianem deklaracji stylu. Dwa przykłady:

P {font-family: Times}

Selektorem jest P, cechą - rodzina czcionek, wartością - Times.

UL {font-weight: bold}

Selektorem jest UL, cechą - waga czcionki, wartością - pogrubienie. Możemy, oczywiście, łączyć różne cechy i wartości, zgodnie ze schematem:

Selektor { cecha1: wartośc1; cecha2: wartość2 }

Pary cech-wartości są rozdzielane średnikiem, np.:

H3 {font-variant: small-caps; font-size: 25pt; color: red; font-family: font-we-ight: bold; Courier New; background: yellow}

Skoro jednemu selektorowi możemy przypisać kilka par cech-wartości, to nietrudno się domyślić, że także jedną parę cecha-wartość możemy przypisać kilku selektorom jednocześnie. Jest to tzw. grupowanie selektorów - wyliczamy po prostu ich listę przed deklaracją własności i wartości, rozdzielając selektory przecinkami. Chcąc na przykład przypisać taką samą czcionkę i kolor tytułom stopnia pierwszego, drugiego i trzeciego, zamiast definiować każdy tytuł z osobna, możemy napisać:

H1, H2, H3 {font-family: Helvetica; color:blue}

Podane wyżej przykłady dotyczą tzw. selektorów prostych, gdzie podajemy explicite konkretne polecenie języka HTML. Ideę tę można rozszerzyć, stosując tzw. selektory uniwersalne, np. selektor o postaci

* {color:#FF0000; font-weight:bold}

spowoduje, że cały tekst (w akapitach, wykazach, tabelach itd.) będzie wyświetlany jako pogrubiony i w czerwonym kolorze. Z kolei selektor

*.klasa1 {font-family: Verdana}

spowoduje, że wszystkie elementy opatrzone nazwą klasa 1 <czcionka?> będą wyświetlane czcionką Verdana.


Zobacz również