Id (identyfikatory) i Class (klasy) to dwa rodzaje elementów (selektor) umożliwiające „połączenie” / „przypisanie” ze sobą / do siebie HTML i CSS (ang. Cascading Style Sheets). Dzięki nim nie musimy wprowadzać kodu CSS bezpośrednio na dany element.
Co znajdziesz w tym wpisie
Czym są ID i jak używać
Atrybut id służy do identyfikacji elementów kodu HTML. Jest więc identyfikatorem. W praktyce oznacza to, że na danej stronie / podstronie powinien być tylko jeden element posiadający konkretne id. Tak by bez problemu można je między sobą odróżniać.
Przykładowo dodane id do elementu <div>:
<div id="jakies_id"></div>Nie robimy z kolei w następujący sposób:
<div id="jakies_id"></div> <p id="jakies_id"></p>Być może brzmi to trochę dziwnie jednak jeśli się dobrze zastanowić to na stronie istnieje wiele unikatowych elementów takich jak: header (nagłówek), footer (stopka). Elementy te nie powinny powtarzać się w kodzie strony.
Przykładowe wykorzystanie
W sytuacji kiedy np. budujemy stronę typu one page. Z pomocą id – czyli indywidualnych identyfikatorów oznaczamy sekcje, do których menu ma nas przenosić (skrolować) po kliknięciu w konkretny link.
Kod w menu
<a href="#nasz_element">element</a>id elementu
<div id="nasz_element">konkretna treść</div>Jak widać odwołanie tworzymy poprzez dodanie do id (jego „nazwy”) znacznika #.
ID jako selektor
Id poza rolą identyfikatora mogą być wykorzystywane do modyfikacji wyglądu i zachowania z pomocą CSS. Odwołanie do elementu id z pomocą CSS robimy analogicznie:
#nasz_element {color:#ccc;}W praktyce więc by odwołać się do ID w CSS używamy znacznika „#” następnie nazwa ID a pomiędzy nawiasami klamrowymi umieszczamy właściwości, które chcemy użyć.
Czym są class i jak używać
Nieco inaczej jest z klasami (class) w ich przypadku możemy odwoływać się jednocześnie do wielu różnych elementów. Klasy możemy też ze sobą łączyć co w praktyce oznacza, że obiekt może ich mieć jednocześnie nawet kilka.
Przykładowo dodane class do elementu <div>:
<div class="jakas-klasa"></div><div class="header"></div>Selektor CSS
Głównym zadaniem klasy jest wpływanie na wygląd, cechy i zachowanie konkretnego elementu strony oraz czasem na obiekty, które się w nim znajdują. W CSS do klasy odwołujemy się poprzez dodanie przed nazwą klasy „.” (kropki) np.:
.header{color:#ccc;}Jak nazwać klasy
Nazewnictwo klas jest praktycznie dowolne jednak nie zalecane. Zazwyczaj bowiem stosuje się różne metodyki z pomocą, których tworzymy nazwę dla klasy. Metodyka ta jest narzucana przez:
- stosowany framweork np.
- z góry ustalone zasady przez firmę, grupę np.:
Jeśli chcecie się czegoś więcej dowiedzieć zapraszam do innych artykułów na temat metodyk tworzenia struktury klas CSS i HTML.
źródła:
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.
Czy jeśli dodajemy akapit na stronie w takiej formie dostosowania. To lepiej to robić Div clas czy lepiej p class? Jako ostatni akapit naszej streści na stronie? Bo on ma się odróżniać od pozostałych.
W praktyce zależy jaki efekt chcą Państwo uzyskać. Ja osobiście wolała bym umieścić class w DIV (uwzględniając w CSS, że będę pracować na elemencie w jego wnętrzu) np.
Style CSS np.:
div.ostatni p{
/* Style CSS dla elementu P */
color:#777;
}
DIV jest elementem nadrzędnym nad P. Oznacza to, że w jednym DIV możemy umieścić kilka P. W sytuacji gdy okazało by się, że „ostatni akapit” to tak naprawdę 2 lub 3 akapity, wystarczy spiąć je klamrą w postaci DIV z odpowiednią class. W tedy wszystkie obiekty powinny wyglądać tak samo.