DHTML0030

Rozdział 1.

Definiowanie selektorów klas

Definiowanie selektorów klas

Użycie selektorów klas daje możliwość stworzenia niezależnych stylów, które mogą być wykorzystywane w dowolnych znacznikach.

W odróżnieniu od selektorów' HTML-owych działających automatycznie, definicje określające klasę zostaną użyte jedynie wtedy, gdy klasa ta zostanie podana w' znaczniku HTML-owym. Składnia selektora klas została przedstawiona na rysunku 1.7.

Aby zdefiniować selektor klas

1.    .ogromna

Podaj znak kropki oraz nazw'ę klasy, następnie rozpocznij listę definicji wpisując znak otwierającego nawiasu klamrowego {. Nazwa klasy może mieć dowolną postać, pod warunkiem że będzie się składać wyłącznie z liter i cyfr. Listing 1.2 przedstawia klasę o nazwie ogromna.

Ogromna jest klasą niezależną, co oznacza, że może zostać użyta w dowolnym znaczniku HTML-owym - z jednym zastrzeżeniem: Właściwości podane w klasie

1TU157Ą odpowiadać typowi znacznika, w którym klasa będzie użyta.

2.    font-size: 42pt

Podaj definicję klasy. W tym wypadku zdecydowałem, że wielkość czcionki (właściwość font-size) będzie wynosiła 42 punkty.

3.    };

Zakończ regułę wpisując średnik oraz zamykający nawias klamrowy}.

Listing 1.2. Użycie klas. Pierwsza klasa. extra. jest skojarzona z etykietą <B>, co oznacza, te jest ona klasą zależną. Natomiast klasa „ ogromna " jest klasą niezależną i dlatego może być wykorzystana w dowolnym znaczniku

B.enzrg { font-style: itaiic; for.k-size: 18pt; • ■ ogrortr.a ( font-size: 4~pt; )

Listing 1.3. Te klasy muszą być umieszczone w znaczniku HTML-owym. aby zostały użyte; dodatkowo klasa extra może być użyta wyłącznie w znaczniku <B>

<bcdy>

Patrz, to jnst <b>naprawdę</b>,

<B class="extra">nuprawde</b>,

<BIG class="ogromna">naprawdę</BIG> ważne.

</body>

kmpka    definicja CSS

ń    i-¹-1

.nazwaKlasy { właściwość : wartość; )

-1-¹

nazwa selektora klasy

Rysunek 1.7. Ogólna składnia niezależnej klasy

30