Klasy

Klasy są kolejnym podstawowym pojęciem w kaskadowych arkuszach stylów. Budowa klasy ma następującą postać:

selektor.nazwaklasy
{
font-size:12 pt;
color:green;
}

Zwróć uwagę na fakt występowania kropki po selektorze lub przed nazwą klasy. Jest to element obowiązkowy i bez niego dalsza praca nie miałaby większego sensu.

Podobnie jak w przypadku identyfikatora, tak zdefiniowana klasa może zostać użyta tylko w tym selektorze, do którego została przypisana, np.:

p.moja
{
color:green;
font-size:14pt;
}

Powinna zostać wywołana w znaczniku <p></p> w następujący sposób:

<p class=”moja”>Treść akapitu</p>

Jak widać na powyższym przykładzie, klasa jest wywoływana w dokumencie za pomocą atrybutu class, który może zostać umieszczony niemal w dowolnym znaczniku kodu HTML.

Specyfikacja CSS przewiduje możliwość zdefiniowana takiej klasy, której użycie jest możliwe w różnych znacznikach. Odpowiednia konstrukcja może mieć następującą postać:

.moja
{
color:red;
font-size:12pt;
font-style:italic;
}

Wywołanie tak określonej klasy również odbywa się za pomocą atrybutu class.

<p closs=“moja”>Przykład akapitu z określoną klasą</p>
<h1 class=”moja”>Przykład nagłówka z określoną klasą</h1>

Dokładniejsza analiza uniwersalnych definicji klas oraz identyfikatorów prowadzi do wniosku, że w działaniu niczym się one nie różnią. Jednak specyfikacja zakłada, iż dany identyfikator może wystąpić w całym dokumencie tylko raz, natomiast klasę można powielać do woli. Oczywiście najczęściej używane przeglądarki nie są w tym przypadku do końca zgodne ze specyfikacją, dlatego identyfikatorów, podobnie jak klas, możemy używać tyle razy, ile uznamy to za konieczne.

Poniżej znajduje się prosty przykład, w którym wyraźnie widać zasadę działania klas w dokumencie XHTML/HTML.

p
{
font-size:14pt;
color:green;
}
.moja
{
font-style:italic;
font-size:20pt;
color:red;
}

Przykładowy kod strony:

<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>
<p class=”moja”>Blok tekstu, w którym użyłem klasy o nazwie .moja</p> <p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>
<ol class=”moja”>
<li >lista, w której użyłem klasy o nazwie .moja</li>
<li >lista, w której użyłem klasy o nazwie .moja</li>