Klasy i pseudoklasy

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-15

szukaj: klasy css pseudoklasy css selektory kurs css

Do czego służą klasy

Klasy stworzone są po to, by móc obiektom tego samego typu w treści jednej strony przypisywać inne właściwości. Dodatkowo dzięki klasom można zaoszczędzić sporo miejsca, gdyż właściwości konkretnego znacznika opisujemy tylko raz, a potem jedynie się do niego odnosimy.

Przykład:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<style type="text/css">

p.klasa1 {color:red; text-decoration:overline;} // 1
p.klasa2 {color:blue; text-decoration:underline;} // 2

</style>
</head>
<body>
Oto wyniki:
<p class="klasa1">To jest tekst określony klasą pierwszą</p>
<p class="klasa2">To jest tekst określony klasą drugą</p>
</body>
</html>

Opis:

* - cyfry umieszczone za '//' należy usunąć, gdyż mogą powodować nieprawidłowe działanie strony
* - selektor HTMLa przypomina znacznik HTML, z tą różnicą, że zapisuje się go bez ostrych nawiasów '< >'.
* - selektor klas to nazwa klasy [w dalszej części będziemy używać 'nazwa klasy', gdyż wyklucza to możliwość pomyłki z selektorem HTML]
1 - Określam pierwszą klasę. Ma to być akapit 'p' nazwa klasy to 'klasa1' selektor, od klasy oddziela kropka.
2 - Określam drugą klasę. Tu sytuacja jest analogiczna jak wyżej.

A wię już widzisz, że klasy tworzone są zawsze tak samo wg schematu:

selektor.nazwaklasy {właściwość : wartość;}

a żeby na stronie odwołać się do klasy należy obok selectora [czyli wewnątrz tagu] wpisać wg schematu:

<selektor class="nazwaklasy">xxx</selektor>

czyli przykładowo:

<p class="klasa1">Text</p>

Jak widzisz używanie klas nie jest wcale trudne. Wręcz przeciwnie to prościzna. Postępując według schematu praktycznie nie ma szans by się pomylić. W tej chwili może jeszcze za bardzo nie rozumiesz właściwości, których używałem w przykładach, ale się nie przejmuj. Na tej lekcji miałeś się nauczyć tworzyć klasy, nie je rozumieć.:-)

Pseudoklasy

Czasami istnieje potrzeba, aby jakiś element strony reagował na zachowanie użytkownika, lub był inny w zależności od swojego umiejscowienia itp. Za idealny przykład mogą tu posłużyć linki - po najechaniu, kliknięciu, odwiedzeniu, zmieniają swój wygląd. Do tego służą właśnie pseudoklasy. Trzymajmy się dalej naszego przykładu linków. Odnośniki mają kilka właściwości, które mogą być opisywane jako osobne znaczniki i wywoływane stosownie do akcji wywołanej przez internautę.

Przykład:

A:active {color:blue;} // 1
A:link {color:black;} // 2
A:visited {color:green;} // 3
A:hover {color:red; text-decoration:underline;} // 4

Opis:

1 - :active oznacza link odwiedzany (aktywny, czyli strona aktualnie jest wczytana)
2 - :link oznacza link nieaktywny, czyli czekający na kliknięcie
3 - :visited oznacza link odwiedzony. Uwaga! w pamięci niektórych przeglądarek może zostać wiadomość o odwiedzeniu jakieś strony i wtedy zawsze, nawet przy starcie link będzie uznany za 'visited'.
4 - :hover link gotowy do kliknięcia - kursor nad napisem (chyba najczęściej używany)

Oczywiście nie trzeba Używać wszystkich pseudoklas zawsze i wszędzie, możemy użyć tylko dwóch np. link i hover, czy link i visited itp.

Aby móc stworzyć kilka różnych wzorców hiperłączy na stronie możemy użyć klas i pseudoklas wg schematu i umieścić w miejscu, w którym opisujemy style (o tym gdzie można opisywać style na następnej lekcji):

selektor.nazwaklasy:pseudoklasa {właściwość: wartość;}

czyli przykładowo:

a.nazwaklasy:hover { color:silver;}

Aby się odwołać do tak zdefiniowanej klasy postępujemy identycznie jak w przypadku, gdybyśmy nie użyli pseudoklasy (patrz wyżej).

Myślę, że takie wytłumaczenia starczą w zupełności aby zrozumieć zasadę działania klas i pseudoklas. Nawet jeśli w tej chwili nie za bardzo rozumiesz o co tak właściwie chodzi, to idź dalej. W dalszej części kursu powinieneś to zrozumieć.

Patryk 'yarpo' Jar

szukaj: klasy css pseudoklasy css selektory kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!