Zaloguj | Zarejestruj | FAQ
Anonymous

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



<< Lesson 6: Odnośniki

Lesson 8: Grupowanie elementów (span i div) >>