Klasa div vs id

Najważniejszą rzeczą do zrozumienia jest to, że identyfikatory muszą być unikalne: tylko jeden element o danym ID powinien istnieć na stronie. Tak więc, jeśli chcesz odnieść się do określonego elementu strony, często jest to najlepsza rzecz do użycia.

Jeśli masz wiele elementów, które są w jakiś sposób podobne, powinieneś użyć klasy elements, aby je zidentyfikować.

Bardzo przydatnym, zaskakująco mało znanym faktem jest to, że można zastosować wiele klas do jednego elementu, umieszczając spacje między nazwami klas. Tak więc, jeśli napisałeś pytanie napisane przez aktualnie zalogowanego użytkownika, możesz je zidentyfikować za pomocą

Pomyśl o Uniwersytecie.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Student ID karty są odrębne. Nie ma dwóch studentów na kampusie, którzy mają tę samą legitymację studencką . Jednak wielu uczniów może i będzie dzielić ze sobą co najmniej jedną klasę .

Jest w porządku, aby umieścić wielu uczniów pod jednymklasy tytuł, Biologia 101. Ale nigdy nie jest dopuszczalne umieszczanie wielu uczniów pod jednym studentem ID .

Przy podawaniu zasad {[7] } przez szkolny system domofonowy, możesz podać Zasady do klasy :

"czy klasa Biologii mogłaby nosić jutro czerwone koszule?"

.BiologyClass {
  shirt-color:red;
}

Lub możesz podać reguły konkretnemu uczniowi, nazywając jego unikalny identyfikator :

"Czy Jonathan Sampson mógłby założyć jutro zieloną koszulę?"

#JonathanSampson {
  shirt-color:green;
}

Identyfikatory muszą być unikalne, ale w CSS mają również pierwszeństwo przy ustalaniu, którą z dwóch sprzecznych instrukcji należy wykonać.

<div id="section" class="section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

Tekst będzie biały.

Klasy są świetne, gdy chcesz zastosować podobne style do wielu różnych div lub elementów. identyfikatory są dobre, gdy chcesz zaadresować określony element do formatowania lub aktualizacji za pomocą javascript.

Dodatkowe korzyści z używania identyfikatora to możliwość kierowania go w znaczniku anchor:

<h2 id="CurrentSale">Product I'm selling</h2>

Pozwoli Ci w innym miejscu link bezpośrednio do tego miejsca na stronie:

<a href="#CurrentSale">the Current Sale</a>

Powszechnym zastosowaniem w tym celu byłoby nadanie każdemu nagłówkowi na blogu identyfikatora datestamped (powiedzmy id= "date20080408"), co pozwoliłoby Ci konkretnie kierować tę sekcję na stronie bloga.

Ważne jest również, aby pamiętać, że istnieją bardziej ograniczone zasady nazewnictwa dla identyfikatorów, przede wszystkim, że nie mogą zaczynać od liczby. Zobacz podobne pytanie: Jaka jest prawidłowa wartość atrybutów id w html

Sam standard HTML odpowiada na twoje pytanie:

Żadne dwa obiekty nie mogą mieć tego samego ID, ale dowolna ilość obiektów może mieć tę samą klasę.

Więc jeśli chcesz zastosować pewne atrybuty stylu CSS tylko do pojedynczego DIV, będzie to ID. Jeśli chcesz, aby pewne atrybuty stylu miały zastosowanie do wielu Div, musi to być Klasa.

Zauważ, że możesz mieszać oba. Możesz zrobić dwa Div-y należące do tej samej klasy, ale dać im różne identyfikatory. Następnie można zastosować styl wspólny dla obu klas, a rzeczy specyficzne dla każdej z nich do ich ID. Przeglądarka najpierw zastosuje styl klasy, a następnie styl ID, więc Style ID mogą nadpisać to, co Klasa ustawiła wcześniej.

Kilka innych rzeczy, o których warto pamiętać:

• podczas stosowania ASP.Net nie masz pełnej kontroli nad ID elementów, więc musisz użyć klasy(zauważ, że jest to mniej prawdziwe niż kiedyś).

• Najlepiej używać ani , kiedy możesz mu pomóc. Zamiast tego Określ typ elementu i będzie to typ rodzica . Na przykład, nieuporządkowana lista zawarta wewnątrz div z klasą navarea może być wyróżniona w następujący sposób sposób:

  div.NavArea ul { /* styles go here */ }
  

Teraz możesz stylizować podział logiczny dla większej części całej navarea za pomocą jednej aplikacji klasowej.

Identyfikatory powinny być unikalne. Klasy powinny być dzielone. Tak więc, jeśli masz jakieś formatowanie CSS, które zostanie zastosowane do wielu DIV, Użyj klasy. Jeśli tylko jeden (jako wymóg, a nie jako przypadek), użyj ID.

Myślę, że wszyscy wiemy, co to jest klasa, ale jeśli myślisz o ID jako identyfikatorach, a nie narzędziach do stylizacji, nie pomylisz się. Podczas próby namierzenia czegoś potrzebujesz identyfikatora, a jeśli masz więcej niż jeden element o tym samym identyfikatorze, nie możesz go już zidentyfikować...

Jeśli chodzi o pisanie css dla identyfikatorów i klas, korzystne jest użycie minimalnych klas css tak dalece, jak to możliwe i staraj się nie być zbyt ciężki z identyfikatorami, dopóki nie będziesz musiał, w przeciwnym razie będziesz stale celować aby napisać silniejsze deklaracje i wkrótce mieć plik css pełen !ważne.

Gdzie użyć ID A klasa

Prosta różnica między nimi polega na tym, że podczas gdy klasa może być używana wielokrotnie na stronie, identyfikator musi być użyty tylko raz na stronę. Dlatego właściwe jest użycie identyfikatora elementu div, który zaznacza główną treść na stronie, ponieważ będzie tylko jedna główna sekcja treści. W przeciwieństwie do tego, musisz użyć klasy, aby ustawić naprzemienne kolory wierszy na tabeli, ponieważ z definicji będą używane więcej niż jeden raz.

IDs są niezwykle potężnym narzędziem. Element o identyfikatorze może być celem elementu JavaScript, który w jakiś sposób manipuluje elementem lub jego zawartością. Atrybut ID może być używany jako cel łącza wewnętrznego, zastępując znaczniki zakotwiczenia atrybutami nazwy. Wreszcie, jeśli Twoje identyfikatory będą jasne i logiczne, mogą one służyć jako rodzaj "własnej dokumentacji" w dokumencie. Na przykład nie musisz dodawać komentarza przed blokiem informującym, że blok kodu będzie zawierał główna Zawartość, jeśli otwierający tag bloku ma ID, powiedzmy, "main", "header", "footer" itp.

Jeśli jest to styl, którego chcesz użyć w wielu miejscach na stronie, Użyj klasy. Jeśli chcesz spersonalizować pojedynczy obiekt, powiedzmy Pasek nav z boku strony, najlepiej będzie użyć identyfikatora, ponieważ prawdopodobnie nie będziesz potrzebował tej kombinacji stylów nigdzie indziej.

Id ma być unikalnym identyfikatorem elementu na stronie, co ułatwia manipulowanie nim. Każdy zewnętrznie zdefiniowany styl CSS, który ma być używany w więcej niż jednym elemencie, powinien przejść do atrybutu class

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>

Użyj id dla unikalnego elementu na stronie, z którym chcesz zrobić coś bardzo konkretnego, I klasy dla czegoś, co można użyć ponownie w innych częściach strony.

Atrybut id jest używany dla elementów do jednoznacznej identyfikacji ich w dokumencie, podczas gdy atrybut class może mieć tę samą wartość współdzieloną przez wiele elementów w tym samym dokumencie.

Tak więc, jeśli w dokumencie jest tylko jeden element, który będzie używał stylu (np. #title), Wybierz id . Jeśli styl może być używany przez wiele elementów, należy użyć klasy .

Powiedziałbym, że najlepiej jest użyć klasy, gdy uważasz, że element stylu zostanie powtórzony na stronie. Elementy takie jak Nagłówek, Stopka i tym podobne idą dobrze jako identyfikator, ponieważ będziesz go używać tylko raz i pomoże to zapobiec przypadkowemu powieleniu go, ponieważ niektórzy redaktorzy ostrzegą cię, gdy masz zduplikowane identyfikatory.

Widzę również, że jest to pomocne, jeśli masz zamiar generować elementy div dynamicznie i chcesz kierować konkretny element do formatowania; możesz po prostu nadawanie mu właściwego ID przy generowaniu, w przeciwieństwie do wyszukiwania elementu, a następnie aktualizowania jego klasy.

Moim wyborem jest użycie identyfikacji klas, gdy style css są stosowane do kilku div-ów w ten sam sposób. Jeśli struktura lub kontener jest zastosowany tylko raz, lub może dziedziczyć swój styl od domyślnego, nie widzę powodu, aby używać identyfikacji klasy.

Więc to zależy od tego, czy twój div jest jednym z kilku; na przykład, div reprezentujący pytanie do odpowiedzi na stronie stackoverflow. Tutaj chcesz zdefiniować styl dla klasy "Answer" i zastosować to do każdej" odpowiedzi " div.

Jeśli używasz. Net Web controls, to czasami łatwiej jest po prostu użyć klas, ponieważ.Net zmienia web Contol div id w czasie wykonywania (gdzie używają runat="server").

Używanie klas pozwala na łatwe tworzenie stylów z oddzielnymi klasami dla czcionek, odstępów, obramowań itp. Zazwyczaj używam wielu plików do przechowywania oddzielnych typów informacji formatujących, np. basic_styles.css do prostego formatowania strony, ie6_styles.css dla stylów specyficznych dla przeglądarki (w tym przypadku IE6) etc i template_1.css dla informacji o układzie.

Jaki sposób wybrać staraj się być konsekwentny, aby wspomóc konserwację.

Również element, któremu podasz określony identyfikator, może być manipulowany za pomocą poleceń JavaScript i DOM - na przykład GetElementById.

Ogólnie rzecz biorąc, uważam, że przydatne jest nadanie identyfikatora wszystkim głównym strukturalnym div-nawet jeśli początkowo nie mam żadnych specyficznych reguł CSS do zastosowania, mam tę możliwość na przyszłość. Z drugiej strony, używam klas dla tych elementów, które mogą być używane wiele razy - na przykład div zawierający obraz i podpis - mogę mieć kilka klasy, każda o nieco innych wartościach stylistycznych.

Pamiętaj jednak, że wszystkie rzeczy są równe, reguły stylu w specyfikacji id mają pierwszeństwo przed tymi w specyfikacji klasy.

Oprócz tego, że id i klasy są świetne do ustawiania stylu na pojedynczym elemencie wersuje podobny zestaw przedmiotów, jest też inne zastrzeżenie do zapamiętania. To również zależy w pewnym stopniu od języka. W ASP.Net, możesz dorzucić Div 'y i mieć id' y. ale jeśli użyjesz panelu zamiast Div ' a stracisz id.

Klasy są dla stylów, których można używać wielokrotnie na stronie, identyfikatory są unikalnymi identyfikatorami, które definiują specjalne Przypadki dla elementów. Standardy mówią, że identyfikatory powinny być używane tylko raz na stronie. Powinieneś więc używać klas, jeśli chcesz użyć stylu na więcej niż jednym elemencie na stronie, a ID, jeśli chcesz użyć go tylko raz.

Inną rzeczą jest to, że dla klas można używać wielu wartości (wstawiając spacje pomiędzy każdą klasą, A la "class='blagh blah22 blah'), gdzie IDs, można używać tylko na ID dla każdego elementu.

Style zdefiniowane dla Id nadpisują style zdefiniowane dla klas, więc w Ustawieniach stylu #uniquething nadpisuje styl .co by nie było, gdyby te dwie sprzeczności.

Więc prawdopodobnie powinieneś używać identyfikatorów do rzeczy takich jak nagłówek, twój "pasek boczny" lub cokolwiek innego, i tak dalej - rzeczy, które pojawiają się tylko raz na stronie.

Dla mnie: Jeśli używam klas, kiedy zrobię coś w CSS lub dodam nazwę do elementów i mogę używać we wszystkich elementach na stronie.

Więc identyfikatory używam dla unikalnego elementu

Ex:

<div id="post-289" class="box clear black bold radius">

CSS :

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}