Arkusze Styli Kaskadowych

Tomasz Ostrowski

Wstęp

Opublikowana na początku 1997 roku specyfikacja języka HTML 3.2 miała kilka poważnych wad. Jedną z nich było brak możliwości rozdzielenia treści dokumentu od informacji o sposobie jej wyświetlania.

Standard SGML, z którym są zgodne dokumenty HTML, został stworzony do zapamiętywania struktury i treści dokumentu a nie jego formatowania. Informacje na temat rodzaju i wielkości czcionki, wielkości marginesów itp. nie należą do treści dokumentu. Jednak możliwość ich wyboru była potrzebna w HTML-u ze względu na jego główne przeznaczenie, czyli publikowanie dokumentów w internecie. Więc w specyfikacji HTML 3.x znalazły się elementy pozwalające je określić. Umieszczone są one jednak trochę "na siłę" i sposób ich zapisywania powodował całą serię problemów:

Nie było możliwości ustalenia spójnego formatowania dla całego dokumentu. Powodowało to, że czasem formatowanie np. cytatu na początku dokumentu miało niewiele wspólnego z formatowaniem cytatu dalej w dokumencie.
Nie było możliwości ustalenia formatowania wspólnego dla całej witryny. Często dokumenty tej samej witryny nie pasowały wyglądem do siebie.
Zmiana wyglądu witryny, np. powiększenie użytej czcionki, wymagała zmiany każdego dokumentu wchodzącego w jej skład.

Do czwartej werji języka HTML dodano więc mechanizm Arkuszy Styli Kaskadowych (ang. Cascading Style Sheets, CSS).

Podstawy

Treść dokumentu w HTML-u ma strukturę drzewiastą. W korzeniu drzewa jest element <BODY>, którego dziećmi są elementy blokowe, jak <P>, <H1>, <TABLE> itp.. One z kolei też mogą mieć dzieci, np. <TH> dla <TABLE>.

Format definicji stylu to:

selector { property:value }

selector określa do jakiej części drzewa odnosi się styl.
property mówi jaki atrybut jest definiowany, np. rodzaj czcionki, wielkość czcionki, kolor tła itp.
value określa wartość atrybutu.

Wszelkie zdefiniowane cechy są dziedziczne, czyli jeśli jakaś ma zdefiniowaną wartość w korzeniu jakiegoś poddrzewa dokumentu to dotyczy całego poddrzewa o ile nie jest przedefiniowana w którymś z jego potomków. Pozwala to w łatwy sposób ustalić wartości atrybutów standardowe dla całego dokumentu ustawiając je dla korzenia, czyli elementu <BODY>.

Dla ułatwienia pisania definicji styli wprowadzono możliwość określania na raz wielu cech dla wielu elementów:

selector1, selector2, selector3 { property1:value1; property2:value2; property3:value3 }

Selektory

Selektor odpowiada za miejsce w drzewie dokumentu, do którego cechy są definiowane.

Istnieje kilka typów selektorów. Najczęstsze są tzw. selektory proste, czyli po prostu tagi HTML-a do których odnosić się będzie definicja stylu, np.:

H1 { color:blue }
oznacza, że nagłówki pierszego stopnia w HTML mają być wyświetlane na niebiesko

TD { font-family:monospace }
oznacza, że w tabeli ma być użyta czcionka o stałej szerokości znaków

Jest też specjalny selektor uniwersalny do oznaczania wszystkich tagów:

* { font-family:monospace; font-size:smaller }
oznacza, że cała strona ma być wyświetlana za pomocą czcionki o stałej szerokości i nieco mniejszej niż domyślna (bardzo zły zwyczaj)

Jeśli selektory proste nie wystarczają można użyć selektorów klas:

*.title { text-align: center }
oznacza, że każdy tekst wewnątrz elementu ze zdefiniowaną klasą title, czyli np. <H1 class=title>Tytuł</H1> będzie wycentrowany.

Oprócz tego isnieją selektory dziecka:

H1 STRONG { font-style: italic }
oznacza, że każdy tekst tekst wyróżniony wewnątrz nagłówka pierwszego stopnia będzie pochylony (bo np. wyróżnienie przez pogrubienie nie jest najlepiej widoczne w tekście z dużą czcionką)

I kilka innych tego typu.

Istnieją też tzw. selektory pseudoklas, np:

A:visited { color: blue }
oznacza, że odwiedziony link będzie oznaczany na niebiesko

Oraz selektory pseudoelementów, np:

P:first-line { margin-left: 1cm }
oznacza, że pierwsza linia akapitu będzie wcięta 1cm

Umieszczanie

Jest kilka sposobów na umieszczanie definicji styli w dokumencie HTML-owym.

W zewnętrznym dokumencie:

<HEAD> <TITLE>Tytuł</TITLE> <LINK REL=stylesheet HREF="article.css" TYPE="text/css"> </HEAD>

W nagłówku strony (w komentarzach aby ukryć tekst przed przeglądarkami nie obsługującymi styli):

<HEAD> <TITLE>Tytuł</TITLE> <STYLE TYPE="text/css">  </STYLE> </HEAD>

Albo lokalnie w dokumencie (bez selektora):

<P style="text-align: right">Jan Kowalski

Kaskadowość styli polega na nadpisywaniu konfliktowych atrybutów przez bardziej specyficzne definicje, czyli styl z pliku jest przedefiniowywany przez styl w nagłówku, a on z kolei przez styl lokalny.

Linki

Cascading Style Sheets home page World Wide Web Consortium

Cascading Style Sheets, level 1 World Wide Web Consortium

Cascading Style Sheets, level 2 World Wide Web Consortium

CSS Validator World Wide Web Consortium

Kurs języka HTML - poradnik webmastera Pawła Wimmera