webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 1

Klasy i pseudoklasy

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

szukaj: klasy css klasy css pseudoklasy css pseudoklasy css selektory selektory kurs css 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:

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:

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

Zagadnienia poruszane w tej części kursu:

Szukasz profesjonalnej firmy?
Tworzenie stron www.
Odwiedź naszą stronę!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org