class="..." nadanego selektorowi z poziomu języka (X)HTML.Jako klasa należy podać dowolny pojedynczy wyraz, który nie może zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. Może natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie używać polskich liter. Nie może się on również rozpoczynać cyfrą ani myślnikiem. Jeśli koniecznie chcemy użyć "zakazanych" znaków, należy w deklaracji klasy poprzedzić je odwróconym ukośnikiem "\", np. reguła: selektor.B\&W\? { cecha: wartość } odpowiada klasie: class="B&W?".
Zdefiniowanie klasy selektorów w części arkuszu stylów, pozwala później się do niej odnosić już we właściwej treści dokumentu. Dzięki temu możemy np. ustalić określone atrybuty dla danego elementu (selektora) na całej stronie, a jednocześnie zmienić wygląd tylko niektórych, bezpośrednio przy nich. Nie musimy już wtedy za każdym razem wpisywać stylu inline, którego zapis czasem może być dosyć długi, ale wystarczy odwołać się do nazwy klasy z arkusza.
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. Wtedy np. w zewnętrznym arkuszu stylów umieszczamy deklarację klasy, a następnie na stronach wstawiamy atrybut class="klasa" tylko dla wybranych znaczników. Dzięki temu inne znaczniki tego samego typu zachowają swoje oryginalne formatowanie.
Jeśli chcemy do pojedynczego elementu przypisać kilka różnych klas, należy posłużyć się poleceniem:
<selektor class="klasa1 klasa2 klasa3...">...</selektor>
przy czym klasy: klasa1, klasa2, klasa3 muszą być zdeklarowane w wewnętrznym, zewnętrznym lub importowanym arkuszu stylów.
Kolejność wpisywania nazw klas w wartości atrybutu class="..." nie ma znaczenia na ostateczny sposób formatowania elementu. Jeżeli kilka przypisanych klas odnosi się do tej samej własności, o wyniku decyduje zasada kaskadowości.
(interpretuje: Internet Explorer 7.0, Firefox, Opera, Chrome)
Istnieje możliwość określenia tzw. podzbioru klas, czyli 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>
Deklaracja taka nie zostanie jednak przypisana w następującym przypadku:
<selektor class="klasa1 klasa2">...</selektor>
Kolejność podawania klas - zarówno w regule CSS, jak i w wartości atrybutu class="..." - nie ma znaczenia.
UWAGA! Microsoft Internet Explorer 6 błędnie interpretuje podzbiory klas, nadając formatowanie elementom, które posiadają przynajmniej ostatnią z klas podanych w regule postaci: selektor.klasa1.klasa3 { cecha: wartość }. W MSIE 7.0 wszystko jest w porządku.
Czyli w tym przypadku w MSIE 6 formatowanie otrzymałyby elementy:
Poprawnie w MSIE 6: <selektor class="klasa1 klasa2 klasa3">...</selektor> <selektor class="klasa1 klasa3">...</selektor> Niepoprawnie w MSIE 6: <selektor class="klasa2 klasa3">...</selektor> <selektor class="klasa3 klasa2">...</selektor> <selektor class="klasa3">...</selektor>
Możliwość definiowania klasy selektorów, jest bardzo ważną i przydatną własnością stylów. Pozwala nam ona zaoszczędzić mnóstwo czasu, który stracilibyśmy, na wpisywanie stylu inline (zwłaszcza w przypadku bardziej skomplikowanych deklaracji). Dlatego warto używać tej własności!
Jeśli jakiś element, o specyficznym rodzaju formatowania, wstępuje przynajmniej raz na niektórych stronach Twojego serwisu (może to być np. główny tytuł strony), 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ących 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 stylów 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.
Przykład:
Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:p.przyklad_klasa { color: red }to jeśli teraz w dowolnym miejscu wpiszemy:<p class="przyklad_klasa">To jest akapit.</p>na ekranie zobaczymy tekst napisany czcionką koloru czerwonego:
To jest akapit.
Dla porównania, to też jest akapit, ale bez podania klasy i dlatego nie jest czerwony.
W przypadku stosowanie klas, często podczas ich definiowania, nie wiemy jeszcze, w stosunku do jakich znaczników będziemy chcieli je później użyć. Wtedy przydatny okazuje się selektor uniwersalny, który pozwala przypisać własności klasy do wszystkich elementów, którym zostanie ona nadana, bez względu na typ znacznika.
Przykład:
Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:*.przyklad_uniwersalna { color: red }Dlatego teraz każdy element, któremu nadamy klasę przyklad_uniwersalna, będzie miał kolor czerwony:To jest akapit, któremu została przypisana klasa class="przyklad_uniwersalna".
To jest pogrubienie, któremu została nadana klasa class="przyklad_uniwersalna".
W tym przypadku gwiazdkę (*) w regule stylu można pominąć:
.przyklad_uniwersalna { color: red }selektor#identyfikator { cecha: wartość }id="..." nadanego selektorowi z poziomu języka (X)HTML.Jako identyfikator należy podać dowolny pojedynczy wyraz, który nie może zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. Może natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie używać polskich liter. Nie może się on również rozpoczynać cyfrą ani myślnikiem. Jeśli koniecznie chcemy użyć "zakazanych" znaków, należy w deklaracji poprzedzić je odwróconym ukośnikiem "\", np. deklaracja: selektor#B\&W\? { cecha: wartość } odpowiada identyfikatorowi: id="B&W?".
Identyfikator może wystąpić tylko raz w hierarchii drzewa dokumentu, czyli w pojedynczym dokumencie nie mogą się znaleźć dwa elementy z takimi samymi identyfikatorami!
Polecenie to pozwala, na nadanie określonych atrybutów formatowania dla elementu, który ma jednoznaczny identyfikator (ID), czyli występuje tylko raz w drzewie dokumentu (w odróżnieniu od klasy).
Przykład:
Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:p#przyklad_identyfikator { color: red }to akapit o podanym identyfikatorze ID:<p id="przyklad_identyfikator">To jest akapit.</p>zostanie wyświetlony w kolorze czerwonym:
To jest akapit.
Dla porównania, to też jest akapit, ale bez podania identyfikatora i dlatego nie jest czerwony.
Użycie selektora uniwersalnego pozwala przypisać styl do dowolnego znacznika z określonym identyfikatorem:
*#przyklad_uniwersalny { color: red }To jest pogrubienie, któremu został nadany identyfikator id="przyklad_uniwersalny".
W tym przypadku gwiazdkę (*) w regule stylu można pominąć:
#przyklad_uniwersalny { color: red }