selektor.klasa {cecha: wartość} |
Klasa to wartość atrybutu class="..." nadanego selektorowi z poziomu języka (X)HTML. "cecha" oraz "wartość" określają atrybuty element.
Selektorem może być potem dowolny znacznik:
np.
Nazwą może być dowolny pojedyńczy wyraz, nie może on zawierać:
Deklaracja klasy jest przydatna szczególnie, jeśli na wielu stronach serwisu znajdują się elementy mające takie samo formatowanie, a
dodatkowo nie można dla nich posłużyć się selektorem typu, ponieważ na stronie znajdują się inne znaczniki tego samego rodzaju
co wybrany element, ale nie chcemy, aby i one otrzymały takie samo formatowanie.
Jeśli chcemy do pojedyńczego elementu przypisać kilka różnych klas.
<selektor class="klasa1 klasa2 klasa3...">...</selektor> |
Istnieje możliwość określenia tzw. podzbioru klas, czy podania, jakie klasy musi mieć jednocześnie przypisane element, aby wybrana reguła CSS miała do niego zastosowanie. Na przykład po wpisaniu:
selektor.klasa1.klasa3 {cecha:wartość} |
zmieniony zostanie sposób formatowania elementu:
<selektor class="klasa1 klasa2 klasa3...">...</selektor> |
Jeśli jakiś element, o specyficznym rodzaju formatowania, występuje przynajmniej raz na niektórych stronach Twojego serwisu,
jest to znak, że dobrze byłoby umieścić w zewnętrznym arkuszu stylów deklarację jego klasy. Dzięki temu, jeśli później zdecydujemy się
zmienić jego formatowanie, nie będziemy musieli modyfikować każdej ze stron, a jedynie zewnętrzny arkusz.
Już na początkowym etapie projektowania serwisu, dobrze jest dokładnie obmyślić, jakie klasy mogą okazać się użyteczne.
Im więcej deklaracji klas - odnoszączych się do powtarzalnych elementów - umieścisz w zewnętrznym arkuszu stylów,
tym szybciej przebiegnie późniejsza ewentualna modyfikacja stron.
Dobrym pomysłem jest również wstawianie komentarza przed każdą deklaracją klasy w arkuszu (znaki: /*...*/), w którym opisuje się
jej przeznaczenie. Po jakimś czasie w Twoim arkuszu może znaleźć się tyle klas, że zapomnisz, do jakich elementów się one odnosiły.
Wtedy właśnie bardzo przydatny może się okazać wpisany wcześniej komentarz.
definicja arkusza styli
p.przyklad_klasa {color: red}
wywołanie
<p class="przyklad_klasa">To jest akapit</p>
Podobnie jak w przypadku identyfikatora, tak zdefiniowana klasa może ostać użyta tylko w tym selektorze, do którego została przypisana, np.:
definicja arkusza styli
p.moja {
color: green;
font-size: 14pt;
}
wywołanie
Powinna zostać wywołana w znaczniku <p></p> w następujący sposób:
<p class="moja">Treść akapitu</p>
W przypadku stosowania klas, często podczas ich definiowania, nie wiemy jeszcze, w stosunku do jakich znaczników będziemy chcieli ich
poźniej użyć. Wtedy przydatny okazuje się selektor uniwersalny, który pozwala przypisać własności klasy do wszystkich elementów, którym
zostania ona nadana, bez względu na typ znacznika, czyli użycie jest możliwe w różnych znacznikach.
*.przyklad_uniwersalna {color: red}
Każdy element, któremu nadamy klasę przyklad_uniwersalna, będzie miał kolor czerwony.
W tym przypadku gwiazdkę (*) w regule stylu można pominąć:
.przyklad_uniwersalna {font-size: 12pt, color: red}
Zwróć uwagę na fakt występowania kropki po selektorze lub przed nazwą klasy. Jest to element obowiązkowy i bez tego dalsza praca nie miałaby sensu.
Jak widać na powyższym przykładzie, klasa jest wywołana w dokumencie za pomocą atrybutu class, który może zostać umieszczony niemal w dowolnym znaczniku kodu HTML.
definicja arkusza styli
.moja {
color: red;
font-size: 12pt;
font-style: italic;
}
wywołanie
Wywołanie tak określanej klasy odbywa się za pomocą atrybutu class.
<p class="moja">Przykład akapitu z określoną klasą</p>
<h1 class="moja">Przykład nagłówka z określoną klasą</h1>