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.
Indetyfikator 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 natomiast 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ę.
Zmodyfikowano: 14.03.2007, 09:48