Oznaczanie wybranych elementów

Identyfikator: id

Atrybut id nadaje unikalny identyfikator elementowi. Przeznaczenie identyfikatora jest różne — może służyć do nadania stylów CSS, znalezienia elementu w skrypcie albo skojarzenia etykiety z elementem formularza.

Identyfikator jest unikalny, znaczy to, że w dokumencie może występować tylko jeden element o danym identyfikatorze.

Identyfikator musi zaczynać się od litery. Po niej mogą się znajdować: cyfry lub inne litery, myślniki "-", podkreślenia „_”, dwukropki ":" oraz kropki ".".

id ma tą zaletę, że adres dokumentu może wskazać ten element w dokumencie, dzięki czemu można zrobić indywidualne łącza do poszczególnych sekcji/rozdziałów na stronie. 

 <h2 id="rozdzial-2">Rozdział drugi</h2>

 Zobacz <a href="#rozdzial-2">rozdział drugi</a>.

Zauważ, że znak # występuje tylko w odnośnikach i selektorach związanych z identyfikatorem, ale nie występuje on w atrybucie id.

Klasy: class

Można dowolną ilość elementów na stronie „zgrupować” razem poprzez nadanie im takiej samej klasy. Elementy mogą mieć nawet kilka klas jednocześnie (kolejność nie ma znaczenia) — poszczególne klasy oddziela się spacją. Nazwa klasy oczywiście nie może zawierać spacji.

Klasy przede wszystkim przydatne są do ostylowania elementów za pomocą CSS — istnieje selektor klasy. Można je również czytać i interpretować z poziomu JavaScript. 

 <figura class="moja mala kulka" />

 .moja {color:white;}
 .mala {font-size: 50%;}
 .moja.mala.kulka {content: url(mala_biala_kulka.png);}

Dobra nazwa klasy

Nazwa klasy może być teoretycznie dowolna, ale należy unikać nadawania elementowi klasy związanej z jego wyglądem.

W przeciwnym wypadku przeróbki wyglądu stron będą niepotrzebnie wymagały zmiany XHTML albo kod stanie się nielogiczny i koszmarny do dalszych zmian: 

 <p class="czerwony">...

 .czerwony {color: green;}

Dobra nazwa klasy opisuje rolę, jaką pełni element w dokumencie (czym jest, a nie jak wygląda).

Kiedy klasę, a kiedy identyfikator?

Identyfikator stosuje się dla elementów, które występują tylko raz w dokumencie i nie ma sensu, żeby było ich więcej. Na przykład: 

 <div id="tresc">...
 <h2 id="rozdzial-2">...

Klasy stosuje się do elementów, które mogą się powtarzać. 

 <p class="uwaga">...
 <span class="data">...

Czasem zamiast klasy lepiej jest użyć odpowiedniego elementu (zobacz blokowe i liniowe) i posługiwać się jego nazwą zamiast klasą (np. selektory typu). 

<code>...

<span class="kod">...

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Mikroformaty | Komentarze
Zmodyfikowano: 15.06.2008, 17:56
submit