Lekcja 7: Identyfikacja i grupowanie elementów (class i id)
Czasami chcemy zastosować ten sam określony styl do pewnego elementu lub grupy elementów. W tej lekcji, pokażemy bliżej jak można korzystać z atrybutów class oraz id do określenia właściwości stylu pewnych elementów.
Jak możesz pokolorować dany nagłówek inaczej niż wszystkie inne nagłówki na stronie? Jak możesz pogrupować swoje odnośniki w różne kategorie i dać każdej z kategorii inny styl? Oto przykłady odpowiadające na proste pytania zadane w tej lekcji.
Grupowanie elementów poprzez klasę
Powiedzmy że mamy dwie listy odnośników do różnych stron związanych z czerwonym i białym winem. Kod HTML może wyglądać następująco:
<p>Grona białego wina:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Grona czerwonego wina:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Teraz chcemy żeby odnośniki z kategorii białego wina były żółte, z czerwonego natomiast żeby były czerwone a reszta istniejących odnośników żeby była niebieska.
Aby to osiągnąć, dzielimy odnośniki w dwie kategorie. Robimy tak poprzez nadanie klasy używając atrybutu class.
Spróbujmy określić pewne klasy używając kodu z powyższego przykładu:
<p>Grona białego wina:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Grona czerwonego wina:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Możemy teraz zdefiniować specjalne właściwości dla odnośników należących odpowiednio do białego oraz czerwonego wina.
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Jak pokazaliśmy w przykładzie, możesz zdefiniować właściwości dla elementów które należą do konkretnej klasy poprzez użycie .nazwaklasy w arkuszu stylów.
Identyfikacja elementu poprzez id
Dodatkowo aby pogrupować elementy, możesz potrzebować umieć identyfikować jeden unikalny element. Robi się to poprzez użycie atrybutu id.
Co jest specjalnego w atrybucie id, to że nie mogą istnieć dwa elementy w danym dokumencie HTML o tej samej wartości atrybutu id. Każde id musi być unikalne. Innymi słowy, powinieneś używać atrybutu class jeżeli chcesz grupować parę lementów. Teraz, popatrzmy bliżej na przykład możliwości użycia atrubutu id:
<h1>Sekcja 1</h1>
...
<h2>Sekcja 1.1</h2>
...
<h2>Sekcja 1.2</h2>
...
<h1>Sekcja 2</h1>
...
<h2>Sekcja 2.1</h2>
...
<h3>Sekcja 2.1.2</h3>
...
Powyżej mogą być nagłówki do sekcji akapitów. Naturalnie możemy dodać id do każdej z sekcji:
<h1 id="c1">Sekcja 1</h1>
...
<h2 id="c1-1">Sekcja 1.1</h2>
...
<h2 id="c1-2">Sekcja 1.2</h2>
...
<h1 id="c2">Sekcja 2</h1>
...
<h2 id="c2-1">Sekcja 2.1</h2>
...
<h3 id="c2-1-2">Sekcja 2.1.2</h3>
...
Powiedzmy że nagłówek dla sekcji 1.2 musi być czerwony. Możesz tak zrobić za pomocą następującego kodu CSS:
#c1-2 {
color: red;
}
Jak widać w powyższym przykładzie możesz zdefiniować właściwości dla konkretnego elementu poprzez użycie selektora #id w arkuszu stylów dokumentu.
Podsumowanie
W tej lekcji nauczyliśmy się dodatkowej możliwości użycia selektorów, class oraz id, możesz teraz określić właściwości dla konkretnych elementów.
W następnej lekcji, popatrzymy bliżej na dwa elementy HTML, które często łączymy z właściwościami CSS: <span> oraz <div>.
