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:
Czasemi 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 zdefiniowej klasy postępujemy identycznie jak w przypadku, gdybyśmy nie użyli pseudoklasy (patrz wyżej).
Myśle, ż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ć. |
