nauka budowy stron internetowych HTML CSS
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.
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.
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 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ć.
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>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;}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:
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:
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…
View Comments
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.
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.