: Home / HTML / CSS / kurs CSS / Klasy

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/52-klasy.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Klasy
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 03:03

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 w '/* */' można usunąć, to komentarze
* - 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ć.

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież