Wstęp do CSS

Czym jest CSS?

CSS, czyli Cascading Style Sheets (kaskadowe arkusze stylów), to język opisu wyglądu strony. Stanowi idealne uzupełnienie XHTML, który jak wiadomo nie pozwala na formatowanie elementów strony oraz ich swobodne rozmieszczanie. Można również używać CSS w dokumentach HTML i XML. CSS jest jednym z elementów realizujących założenie oddzielenie treści od wyglądu, przy czym umożliwia dużo swobodniejsze, wygodniejsze i dokładniejsze formatowanie, pozycjonowanie i upiększanie elementów strony niż formatowanie znane z HTML.

Istnieją aktualnie dwie wersje tego języka (CSS1, stworzony w 1996 roku i CSS2, stworzony w 1998 roku), a rozwijana jest jego trzecia, bardzo rozbudowana wersja CSS3. Mimo tego, że od powstania CSS2 minęło już prawie sześć lat, nadal niektóre przeglądarki radzą sobie raczej mizernie z tym standardem. Przykładem jest tu Internet Explorer, który nie potrafi dobrze zinterpretować pierwszej wersji tego języka, a co dopiero mówiąc o drugiej. Na szczęście podstawowe elementy języka są dla tej przeglądarki zrozumiałe, ale już bardziej skomplikowane elementy sprawiają jej nie lada trudności. CSS1 i CSS2 są najlepiej obsługiwane przez Mozillę oraz przeglądarki bazujące na jej silniku Gecko. CSS2 jest przez nią obsługiwany w niemalże 100% (ma problemy z tylko kilkoma elementami języka), a CSS1 w pełni. Całkiem dobrą znajomością tych języków może również się pochwalić norweska Opera, ale jeszcze daleko jej do Mozilli. Istnieją również niestandardowe rozszerzenia tego języka, które są obsługiwane przez konkretne przeglądarki. I tak na przykład kolorowe paski przewijania zostały wymyślone przez Microsoft i są jedną z części składowych tzw. (nieoficjalnie) MS CSS. Mozilla zaś obsługuje już znaczną część CSS3, przy pomocy własności z przedrostkiem -moz.

Trochę techniki

Cascading Style Sheets, kaskadowe arkusze stylów. To trochę tajemniczo brzmiąca nazwa. Może wyjaśnię co oznacza słowo "kaskadowe". Kaskadowość arkuszy to nic innego jak możliwość zagnieżdżania jednego arkusza w drugim. Na przykład jeden arkusz opisuje elementy blokowe, a drugi elementy liniowe strony. Trzeci arkusz je importuje i dodaje własne poprawki tworząc tym samym ostateczny arkusz. Ogólnie chodzi o to, że własności się mogą nakładać, a ostateczną własnością będzie ta, która zostałą zdefiniowana na końcu i nadpisze wcześniejsze. Czym są arkusze? Tutaj chyba nie muszę wyjaśniać. Tak samo ze stylami. Własności zazwyczaj są przechowywane w zewnętrznych plikach i są globalne dla całej strony. Jednak nie ma przeszkód technicznych, aby je umieścić wewnątrz dokumentu hipertekstowego.

CSS opiera się na dziedziczeniu. Czyli styl określony na przykład dla całej zawartości tagu <body> będzie obowiązywał także w tagach <p>, <table> oraz innych, które hierarchicznie podlegają pod tag <body>. Oczywiście jeżeli będą utworzone dla tych tagów własne style to zastąpią one "sporne" własności, które zostały odziedziczone po rodzicu. Nie należy się również martwić, że jeśli określimy dla <body> brak podkreślenia tekstu, to hiperłącza przestaną być podkreślone. Każda przeglądarka ma swoje własne arkusze stylów, które są przez nią domyślnie używane i służą jako podstawa kaskady z arkuszami strony.

Terminologia

W CSS istnieje kilka ważnych pojęć. Podstawowym pojęciem jest selektor, czyli nazwa elementu strony, którego styl określamy. Podczas stosowania CSS z dokumentami HTML i XHTML selektory to po prostu nazwy konkretnych tagów, czyli np. dla tagu <body> selektorem jest body. Istnieją również bardziej skomplikowane selektory, które konkretyzują elementy na stronie, czyli nie odnoszą się do wszystkich paragrafów, ale na przykład tylko do paragrafów następujących zaraz po nagłówkach.

Klasy to pewnego rodzaju selektor umożliwiający przypisanie konkretnych własności do niezwiązanych ze sobą niczym szczególnym elementów strony. Możemy określić ogólny styl dla kilku tagów, ale niektóre ich wystąpienia, które będą przypisane do klasy, będą miały nieco zmodyfikowany styl.

Pseudoklasy to kilka już zdefiniowanych klas odnoszących się do pewnego stanu obiektu. Na przykład pseudoklasa hover określa wygląd elementu jeśli jest nad nim umieszczony kursor myszy.

Pseudoelementy to zdefiniowane elementy konkretnych obiektów. Na przykład pierwsza litera akapitu to pseudoelement first-letter.

Używanie CSS z językami hipertekstowymi

Samo stworzenie arkusza stylów nic nie da jeśli w dokumencie hipertekstowym nie będzie wzmianki o jego użyciu. Sposobów "sprzęgnięcia" arkusza z dokumentem hipertekstowym jest kilka.

W XHTML:

<head>

<style type="text/css">
<![CDATA[
tutaj zawartość arkusza
]]>
</style>
</head>

lub:

<head>
<link rel="stylesheet" href="styl.css" type="text/css" />

</head>

ewentualnie przez importowanie, które jest sposobem na uniknięcie odczytania arkusza przez bardzo stare przeglądarki:

<head>
<style type="text/css">
<![CDATA[
@import url(styl.css);
]]>
</style>
</head>

Wykorzystanie drugiego rozwiązania (najpopularniejszego) wymaga dodatkowej, wymaganej przez XML linijki:

<head>
<link rel="stylesheet" href="styl.css" type="text/css" />

<?xml-stylesheet type="text/css" href="styl.css" ?>
</head>

Style można również umieszczać "inline", czyli w tagu, do którego się odnoszą. Jest to jednak rozwiązanie mało eleganckie i tym samym nie zalecane.

<p style="color: red;">Tekst</p>