W tym rozdziale dowiesz się...

Używanie selektorów specjalnych (klas) w arkuszach CSS.

• 
  Klasy selektorów <... class>

  W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania? Jak przypisać kilka klas CSS do jednego elementu? Co to są podzbiory klas CSS?

• 
  Selektor identyfikatora <... id>

  W jaki sposób określić specjalny wygląd pojedynczego elementu na stronie WWW?

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

Klasy selektorów <... class>

W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania? Jak przypisać kilka klas CSS do jednego elementu? Co to są podzbiory klas CSS?

Klasy selektorów <... class>

selektor.klasa { cecha: wartość }

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.

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.

Na 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:

W tym przypadku gwiazdkę (*) w regule stylu można pominąć:

.przyklad_uniwersalna { color: red }

Lista klas

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.

Podzbiory klas

(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>

Pytania i odpowiedzi

Co to są klasy w CSS?

Klasy w CSS to nazwy, które w postaci atrybutu class="..." przypisuje się elementom HTML w celu zastosowania do nich określonych stylów. Klasy pozwalają na definiowanie zbioru elementów, które mają być stylizowane w ten sam sposób. Przykład: .klasa { color: blue; }.

Jak wywołać klasę w CSS?

Aby wywołać klasę w CSS, używa się kropki przed nazwą klasy. Następnie, w elemencie HTML, który ma zostać stylizowany, dodaje się atrybut class="..." z nazwą klasy. Przykład: .klasa { color: blue; } i <div class="klasa">Treść</div>.

Jak nazywać klasy w CSS?

Klasy w CSS mogą być nazwane dowolnie, ale dobrze jest stosować opisowe i zrozumiałe nazwy, które odzwierciedlają funkcję lub rolę elementów. Na przykład, zamiast .a lepiej użyć .naglowek, co ułatwia zrozumienie kodu i stylów.

Czym się różni CLASS od ID?

Różnica między CLASS a ID polega na tym, że atrybut class="..." może być używany wielokrotnie na stronie dla wielu elementów, podczas gdy id="..." powinno być unikalne i używane tylko raz dla danego elementu w tym samym pliku HTML. Klasy pozwalają na grupowanie elementów o podobnych właściwościach i stosowanie do nich tych samych stylów, natomiast ID identyfikuje unikalny element na stronie.

Selektor identyfikatora <... id>

W jaki sposób określić specjalny wygląd pojedynczego elementu na stronie WWW?

selektor#identyfikator { cecha: wartość }

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 }

W tym przypadku gwiazdkę (*) w regule stylu można pominąć:

#przyklad_uniwersalny { color: red }

Pytania i odpowiedzi

Co to identyfikator CSS?

Identyfikator CSS to nazwa, która jest przypisana do konkretnego elementu HTML na stronie. Jest to unikalny identyfikator, który może być używany do stylizacji lub manipulacji tym konkretnym elementem za pomocą CSS lub JavaScript.

Jak zdefiniować identyfikator w elemencie DIV?

Aby zdefiniować identyfikator w elemencie <div>, używamy atrybutu id="...". Na przykład: <div id="moje-id">Treść</div>.

Jak odnieść się do ID w CSS?

Aby odnieść się do atrubutu id="..." w CSS, używa się znaku krzyżyka (#) przed nazwą identyfikatora. Na przykład: #moje-id { color: red; }.

Kiedy stosuje się selektor identyfikatora?

Selektor identyfikatora stosuje się, gdy chcemy przypisać style do konkretnego, unikalnego elementu na stronie. Nazwy identyfikatorów nie mogą się powtarzać w tym samym pliku HTML, więc selektor identyfikatora jest używany, gdy chcemy zastosować style tylko do jednego określonego elementu.

Jak wybrać element o identyfikatorze id="demo"?

Aby wybrać element o identyfikatorze id="demo" w CSS, używa się selektora identyfikatora. Na przykład: #demo { font-weight: bold; }.

Kiedy CLASS a kiedy ID?

Klasy (class="...") stosuje się, gdy chcemy zastosować te same style do wielu elementów o podobnych właściwościach. Natomiast identyfikatory (id="...") stosuje się, gdy chcemy zastosować unikalne style lub manipulacje do jednego konkretnego elementu na stronie.

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania? Jak przypisać kilka klas CSS do jednego elementu? Co to są podzbiory klas CSS?

selektor.klasa { cecha: wartość }

<selektor class="klasa1 klasa2 klasa3...">...</selektor>

selektor.klasa1.klasa3 { cecha: wartość }

Zobacz więcej...

W jaki sposób określić specjalny wygląd pojedynczego elementu na stronie WWW?

selektor#identyfikator { cecha: wartość }

Zobacz więcej...