Identyfikator
id
Do identyfikacji poszczególnych elementów używamy tzw. identyfikatorów w skrócie id. Id to atrybuty elementów html, które pozwalają je odróżniać. Zapisujemy je skrótem id i przypisujemy do nich wartości tak jak do innych atrybutów, używając do tego znaku = oraz " ".
id="some-id"
Atrybut id jest unikalnym identyfikatorem elementu html. Znaczy to, że daną wartość atrybutu id możemy przypisać jedynie jednemu elementowi html.
<div id="header"></div> <div id="footer"></div>
Oznaczyliśmy w ten sposób dwie sekcje, nagłówkową (ang. header) i stopkę (ang. footer). Nazwy te nie są standardem w języku html, a dobrą praktyką. Występuje pełna dowolność w nadawaniu nazw atrybutu id. Ja jednak polecam używanie nazw angielskich, wtedy nasz kod będzie prawdziwie międzynarodowy…
Oznaczmy teraz naszą sekcję nagłówkową id o wartości header.
<div id="header">
<img src="logo.png" alt="logo how2html">
<ul>
<li><a href="#">Strona Główna</a></li>
<li><a href="lekcja-1">Lekcja 1</a></li>
<li><a href="lekcja-2">Lekcja 2</a></li>
</ul>
</div>
Pamiętacie jeszcze jak podczas lekcji o linkach wspominaliśmy o linkach wewnętrznych odwołujących do sekcji strony? Atrybut id wykorzystywany jest właśnie do tworzenia tych odwołań.
Odwołania te tworzymy posługując się elementem <a> i jego atrybutem href. Atrybut href przyjmuje wtedy wartość id poprzedzoną znakiem # (ang. hash tag – krzyżyk).
<a href="#header">Header</a>
Selektor CSS
Id mogą również służyć jako tzw. selektory języka CSS. Selektory są to odwołania w języku CSS do konkretnych elementów html. Reguły formatowania CSS przypisujemy do konkretnych elementów właśnie poprzez selektory. O selektorach dokładniej będziemy mówić na kursie CSS.
Selektory id uzyskujemy poprzez dodanie znaku # przed nazwą id, np. (#header). Jeśli chcielibyśmy dodać kolor tła do naszej sekcji header moglibyśmy tak tego dokonać.
#header { background-color: blue; }
Na razie nie przejmujmy się tym co jest w nawiasach klamrowych, chodzi tylko o zobrazowanie selektora.
Klasy
class
Klasy są zbliżone do identyfikatorów, również możemy dzięki nim rozróżniać poszczególne elementy html. Tak samo jak id są one atrybutem wszystkich elementów html. Używamy ich stosując słowo class.
<div id="header" class="blue">
<img src="logo.png" alt="logo how2html">
<ul>
<li><a href="#">Strona Główna</a></li>
<li><a href="lekcja-1">Lekcja 1</a></li>
<li><a href="lekcja-2">Lekcja 2</a></li>
</ul>
</div>
Selektor CSS
Tak samo jak id, klasy mogą służyć jako selektory języka CSS. Selektory klasowe tworzymy poprzez poprzedzenie nazwy klasy kropką . , np.(.blue).
.blue { background-color: blue; }
Zanim kolor tła zostanie dodany musimy się nauczyć jeszcze dodawać język CSS do naszej strony. Tym zajmiemy się na następnej lekcji.