CSS (Cascading Style Sheet)

/ kaskadowe arkusze stylów /

Mechanizm pozwalający przypisywać style elementom definiowanym przy pomocy języków opisu dokumentu - przede wszystkim HTML i XML.

Styl opisuje sposób prezentacji elementu przez urządzenie odbiorcze (najczęściej przeglądarkę WWW). Arkusz styli to swoisty szablon dokumentu HTML - jego działanie zbliżone jest to działania szablonu edytora tekstu. Oba zawierają reguły formatowania określające wygląd poszczególnych elementów dokumentu. Z pomocą arkuszy webmaster może w łatwy sposób nadawać rozbudowanym serwisom jednolity układ i wygląd. Z kolei kaskadowa (hierarchiczna) natura arkuszy styli pozwala utrzymać jednolity wygląd całej witryny i równocześnie kontrolować wybrane elementy przy pomocy styli położonych niżej w hierarchii. Ogromną zaletą CSS jest możliwość łatwej modyfikacji wszystkich stron korzystających z tego samego arkusza styli. Zmiana wyglądu sprowadza się wówczas do modyfikacji pojedynczego wzorca.

CSS + HTML

CSS umożliwia przypisanie dowolnemu elementowi dokumentu HTML (np. akapitowi, komórce tabeli, poziomej linii) określonego stylu. Przeniesienie opisów formatowania elementów do arkuszy styli i pozostawienie w dokumencie wyłącznie „czystych” »znaczników HTML (bez ustawiania wartości atrybutów) pozwala oddzielić strukturę dokumentu i jego treść od formy przekazu. Sam kod HTML staje się przez to mniejszy i bardziej przejrzysty a witryny ładują się znacznie szybciej.
Style pozwalają kontrolować takie atrybuty jak:

rodzaj, rozmiar i kolor czcionki
wyrównywanie
wielkość marginesów
głębokość wcięcia akapitu
kolor i grafikę tła
odstępy między elementami
wzajemne położenie elementu i otaczającego go tekstu

.. i wiele innych. Co istotne, style pozwalają uzyskać znacznie więcej niż oferuje zwykły HTML. Umiejętne ich stosowanie pozwala całkowicie odmienić wygląd strony.
Prawidłowo napisany dokument łączący HTML i CSS powinien być także czytelny w starszych przeglądarkach, które nie interpretują arkuszy styli. Będzie jedynie pozbawiony określonych w nich efektów formatowania.

Składnia stylu

Definicja stylu składa się z dwóch części – selektorów określających elementy HTML, do których będzie odnosić się styl oraz deklaracji stylu. Definicję umieszcza się w znaczniku STYLE lub w zewnętrznym pliku (arkuszu styli) z zachowaniem następującej składni:

selektor1, selektor2, ... , selektorn
{
własność1: wartość1;
własność2: wartość2;
...
}

Na deklarację stylu składa się lista par własność: wartość oddzielonych średnikiem i ograniczonych nawiasami klamrowymi. Własność to atrybut znacznika HTML, który podlega specyfikacji CSS (np. wielkość czcionki dla akapitu), wartość – dookreślenie własności (np. 12px).

Przykłady:

P { text-indent: 10pt } - wcięcie akapitu o głębokości 10 punktów
H1, H2 { font-style: bold } – wytłuszczona czcionka dla nagłówków typu H1 i H2
A { color: red; text-decoration: none } - odsyłacz w kolorze czerwonym, bez podkreślenia

Kaskadowość stylów

To fundamentalne dla CSS pojęcie oznacza hierarchię źródeł styli. Informacja o stylu może być bowiem zapisana w oddzielnym pliku bądź w samym dokumencie HTML. Właśnie od lokalizacji stylu zależy zasięg jego oddziaływania.

Przyjrzyjmy się rodzajom arkuszy styli zaczynając od najbardziej ogólnych:

Importowany arkusz styli (imported style sheet). Zewnętrzny arkusz styli, który został importowany (dołączony) do innego arkusza.
Zewnętrzny arkusz styli (external style sheet). Zwykły plik tekstowy z rozszerzeniem .css zawierający definicje styli. Odwołania do zewnętrznego arkusza styli znajdować się mogą w dowolnym dokumencie HTML.
Styl osadzony (embedded style). Styl o zasięgu lokalnym - jego oddziaływanie ograniczone jest do dokumentu, w którym został umieszczony.
Styl wpisany (in-line style). Styl o zasięgu lokalnym, dołączany do określonego znacznika HTML i określający sposób wyświetlania tylko tego elementu.

Kaskadowość styli objawia się w przypadku korzystania z przynajmniej dwóch z wymienionych wcześniej rodzajów arkuszy. W przypadku konfliktu (gdy jakiś element znajduje się w zasięgu więcej niż jednego stylu), obowiązuje zasada, że styl znajdujący się „bliżej” formatowanego elementu znosi działanie stylu „odległego”. Najwyższy priorytet ma wówczas styl wpisany, drugim w kolejności jest styl osadzony, następnie zewnętrzny, a na końcu importowany.

Przykładowo, styl wprowadzony w nagłówku HEAD dokumentu HTML (styl osadzony) będzie miał pierwszeństwo przed stylem pochodzącym z pliku arkusza (zewnętrznym). Sam jednak zostanie „zneutralizowany” przez styl umieszczony w obrębie znacznika formatowanego elementu - np. H1 (styl wpisany).

CSS1 i CSS2

Kaskadowe arkusze styli stworzone zostały w ramach prac w konsorcjum »W3C. Od 1994 roku W3C intensywnie promuje tą technikę zalecając stosowanie jej w dokumentach. Grupa Style Sheets Activity opublikowała dotychczas dwie rekomendacje styli – CSS1 (Cascading Style Sheets, level 1) i CSS2 (Cascading Style Sheets, level 2). CSS1 jest już szeroko (choć nie w pełni) zaimplementowana w przeglądarkach. Pierwszą przeglądarką, która generowała strony opisane przez kaskadowe arkusze styli był Internet Explorer 3.0; funkcje obsługujące CSS1 wbudowane są też w nowsze wersje Netscape Navigatora (4.x) i Operę (3.5).

W maju 1998 przyjęta została specyfikacja nowej wersji standardu - CSS2 (Cascading Style Sheets, level 2). Wniosła ona wiele istotnych innowacji. Rozszerzenia dotyczą m.in. pozycjonowania elementów w dokumentach, dynamicznych czcionek, automatycznych spisów treści oraz ułatwień związanych z obsługą urządzeń końcowych (rzutniki, syntezatory mowy, odbiorniki TV, etc.). CSS2 posiada częściową implementację w wersji 5.0 Internet Explorera oraz szczątkową i niekiedy błędną w wersjach 4.x Netscape Navigatora. Na dodatek niektóre elementy styli interpretowane są nieco odmiennie w tych dwóch najważniejszych przeglądarkach. Zaleca się więc ostrożne wykorzystywanie i dokładne testowanie dokumentów opartych na arkuszach styli.
Obecnie trwają prace nad trzecią wersją "styli" - CSS3 (Cascading Style Sheets, level 3).