div class vs id

Quando usi div quando è meglio usare un ID class vs?

È meglio usare la class, per esempio la variante del carattere o gli elementi all’interno dell’html? Quindi utilizzare l’id per la struttura / i contenitori?

Questo è qualcosa su cui sono sempre stato un po ‘incerto, ogni aiuto sarebbe fantastico.

Usa id per identificare gli elementi che ci saranno solo una singola istanza di una pagina. Ad esempio, se hai una singola barra di navigazione che stai posizionando in una posizione specifica, usa id="navigation" .

Usa la class per raggruppare elementi che si comportano tutti in un certo modo. Ad esempio, se vuoi che il nome della tua società appaia in grassetto nel corpo del testo, potresti usare .

La cosa più importante da capire è che gli ID devono essere univoci: deve esistere solo un elemento con un dato ID all’interno di una pagina. Quindi, se vuoi fare riferimento a un elemento specifico della pagina, è spesso la cosa migliore da usare.

Se hai più elementi che sono in qualche modo simili, dovresti usare la class elements per identificarli.

Un fatto molto utile, sorprendentemente poco conosciuto, è che puoi effettivamente applicare più classi a un singolo elemento inserendo spazi tra i nomi di class. Quindi, se hai postato una domanda che è stata scritta dall’utente attualmente connesso, puoi identificarla con

.

Pensa all’Università.

   

Le carte d’ id quadro degli studenti sono distinte. Non ci saranno due studenti nel campus con la stessa tessera universitaria. Tuttavia, molti studenti possono e condivideranno almeno una class l’ uno con l’altro.

Va bene mettere più studenti sotto un titolo di class , Biology 101. Ma non è mai accettabile mettere più studenti sotto un ID studente.

Quando si assegnano regole al sistema interfonico scolastico, è ansible assegnare regole a una class :

“La class di biologia vorrebbe indossare le magliette rosse domani?”

 .BiologyClass { shirt-color:red; } 

Oppure puoi dare regole a uno specifico studente, chiamando il suo ID univoco:

“Jonathan Sampson vorrebbe indossare una camicia verde domani?”

 #JonathanSampson { shirt-color:green; } 

Gli ID devono essere unici, ma in CSS hanno anche la priorità quando si cerca di capire quale delle due istruzioni in conflitto deve seguire.

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

Il testo sarebbe bianco.

le classi sono grandi quando vuoi applicare stili simili a molti div differenti o elementi. gli ID sono buoni quando vuoi indirizzare un elemento specifico per la formattazione o per l’aggiornamento con javascript.

Un ulteriore vantaggio dell’utilizzo di un ID è la possibilità di indirizzarlo a un tag di ancoraggio:

 

Product I'm selling

Ti consentirà in qualche altro luogo di collegarti direttamente a quel punto della pagina:

 the Current Sale 

Un uso comune per questo sarebbe dare a ciascun titolo di un blog un ID datastampato (ad esempio id = “date20080408”) che consentirebbe di indirizzare in modo specifico quella sezione della pagina del blog.

È anche importante ricordare che esistono regole di denominazione più limitate per gli ID, in primo luogo che non possono iniziare con un numero. Vedi domanda SO simile: cos’è un valore valido per gli attributi id in html

Lo standard HTML stesso risponde alla tua domanda:

Non è ansible che due oggetti abbiano lo stesso ID, ma una quantità arbitraria di oggetti potrebbe avere la stessa class.

Pertanto, se si desidera applicare determinati attributi di stile CSS a un solo DIV, si tratterà di un ID. Se si desidera che determinati attributi di stile si applichino a più DIV, deve essere una class.

Si noti che è ansible mescolare entrambi. Puoi fare in modo che due DIV appartengano alla stessa class, ma dai loro ID diversi. È quindi ansible applicare lo stile comune a entrambi alla class e le cose specifiche a uno dei due al proprio ID. Il browser applicherà prima lo stile della class e poi lo stile ID, quindi gli stili ID possono sovrascrivere qualsiasi cosa sia stata impostata in precedenza.

Alcune altre cose da tenere a mente:

  • Quando si utilizza ASP.Net non si ha il controllo completo sull’ID degli elementi, quindi è necessario utilizzare la class (si noti che questo è meno vero di una volta).
  • È meglio non usare nessuno dei due , quando puoi aiutarlo. Invece, specifica il tipo di elemento e il suo tipo di genitore . Ad esempio, una lista non ordinata contenuta all’interno di div con la class navarea potrebbe essere individuata in questo modo:

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

Ora puoi definire la divisione logica per gran parte dell’intera navarea con un’applicazione di class.

Gli ID dovrebbero essere unici. Le lezioni dovrebbero essere condivise. Quindi, se hai una formattazione CSS che verrà applicata a più DIV, usa una class. Se solo uno (come requisito, non come accade), utilizzare un ID.

Penso che tutti sappiamo che cos’è la class, ma se si pensa agli ID come identificatori piuttosto che come strumenti per lo styling, non si sbaglia molto. Hai bisogno di un identificatore quando provi a mirare a qualcosa e se hai più di un articolo con lo stesso ID, non puoi più identificarlo …

Quando si tratta di scrivere il tuo css per ID e CLASSE, è utile usare il minimo delle classi css il più lontano ansible e cercare di non diventare troppo pesante con gli ID finché non lo fai, altrimenti continuerai a mirare a scrivere dichiarazioni più forti e presto un file css pieno di! importante.

Dove usare un ID contro una class

La semplice differenza tra i due è che mentre una class può essere usata ripetutamente su una pagina, un ID deve essere usato solo una volta per pagina. Pertanto, è opportuno utilizzare un ID sull’elemento div che contrassegna il contenuto principale della pagina, in quanto ci sarà solo una sezione del contenuto principale. Al contrario, è necessario utilizzare una class per impostare i colors delle righe alternate su una tabella, poiché per definizione verranno utilizzati più volte.

Gli ID sono uno strumento incredibilmente potente. Un elemento con un ID può essere il bersaglio di un pezzo di JavaScript che manipola l’elemento o il suo contenuto in qualche modo. L’attributo ID può essere utilizzato come destinazione di un collegamento interno, sostituendo i tag di ancoraggio con gli attributi del nome. Infine, se rendi i tuoi ID chiari e logici, possono servire come una sorta di “auto-documentazione” all’interno del documento. Ad esempio, non è necessario aggiungere un commento prima di un blocco che indica che un blocco di codice conterrà il contenuto principale se il tag di apertura del blocco ha un ID di, ad esempio, “main”, “header”, “footer “, eccetera.

Se si tratta di uno stile che si desidera utilizzare in più punti di una pagina, utilizzare una class. Se vuoi un sacco di personalizzazione per un singolo object, ad esempio una barra di navigazione sul lato della pagina, allora un ID è il migliore, perché non è probabile che tu abbia bisogno di quella combinazione di stili da nessun’altra parte.

id dovrebbe essere l’identificatore univoco dell’elemento sulla pagina, che aiuta a manipolarlo. Qualsiasi stile definito esternamente da CSS che dovrebbe essere usato in più di un elemento dovrebbe andare sull’attributo della class

 

Usa un id per un elemento unico nella pagina in cui vuoi fare qualcosa di molto specifico e una class per qualcosa che puoi riutilizzare su altre parti della pagina.

L’attributo id viene utilizzato per gli elementi per identificarli in modo univoco all’interno del documento, mentre l’attributo class può avere lo stesso valore condiviso da più elementi nello stesso documento.

Quindi, in realtà, se c’è un solo elemento per documento che utilizzerà lo stile (ad es. #Title), allora vai con id . Se più elementi possono usare lo stile, vai con la class .

Direi che è meglio usare una class ogni volta che si pensa che un elemento di stile debba essere ripetuto su una pagina. Articoli come HeaderImage, FooterBar e simili funzionano bene come un ID poiché lo utilizzerai solo una volta e ti impedirà di duplicarlo accidentalmente, poiché alcuni editor ti avviseranno quando hai ID duplicati.

Posso anche vederlo utile se si intende generare gli elementi div in modo dinamico e si desidera scegliere come target un elemento specifico per la formattazione; puoi semplicemente dare l’ID corretto alla generazione anziché cercare l’elemento e quindi aggiornarne la class.

Il mio punto di forza è di usare l’identificazione di class quando gli stili di css sono applicati a più div nello stesso modo. Se la struttura o il contenitore viene realmente applicato una sola volta o se può ereditare il suo stile dall’impostazione predefinita, non vedo alcun motivo per utilizzare l’identificazione di class.

Quindi dipenderà dal fatto che il tuo div sia uno dei tanti; per esempio, un div che rappresenta una domanda per una risposta sul sito web StackOverflow. Qui vorrai definire lo stile per la class “Rispondi” e applicarlo a ciascun div “Rispondi”.

Se stai usando i controlli web .Net, allora a volte è molto più semplice usare le classi dato che. Netto altera i diritti di controllo del web in fase di esecuzione (dove stanno usando runat = “server”).

L’uso delle classi consente di creare facilmente stili con classi separate per caratteri, spaziatura, bordi, ecc. Generalmente utilizzo più file per memorizzare tipi separati di informazioni di formattazione, ad es. Basic_styles.css per la semplice formattazione del sito, ie6_styles.css per gli stili specifici del browser (in questo caso IE6) ecc. e template_1.css per informazioni sul layout.

In qualunque modo tu scelga, cerca di essere coerente per aiutare la manutenzione.

Inoltre, un elemento a cui viene assegnato un ID specifico può essere manipolato tramite i comandi JavaScript e DOM, ad esempio GetElementById.

In generale, trovo utile dare a tutti i principali parametri strutturali un ID, anche se inizialmente non ho regole CSS specifiche da applicare, ho questa possibilità per il futuro. D’altra parte, uso le classi per quegli elementi che potrebbero essere usati più volte – ad esempio, un div che contiene un’immagine e una didascalia – Potrei avere diverse classi, ognuna con valori di stile leggermente diversi.

Ricorda però che, a parità di condizioni, le regole di stile in una specifica ID hanno la precedenza su quelle di una specifica di class.

Oltre agli ID e alle classi che si adattano perfettamente allo stile di un singolo elemento rispetto a un insieme simile di elementi, c’è anche un altro avvertimento da ricordare. Dipende anche dalla lingua in una certa misura. In ASP.Net, puoi inserire Div e avere id. Ma se usi un pannello invece del Div, perderai l’id.

Le classi sono per gli stili che puoi utilizzare più volte su una pagina, gli ID sono identificatori univoci che definiscono casi speciali per elementi. Gli standard dicono che gli ID dovrebbero essere usati solo una volta in una pagina. Quindi dovresti usare le classi per quando vuoi usare uno stile su più di un elemento in una pagina e un ID quando vuoi usarlo una sola volta.

Un’altra cosa è che per le classi puoi usare più valori (mettendo degli spazi tra ogni class, a la “class = ‘blagh blah22 blah’) dove con gli ID, puoi usare solo su ID per elemento.

Gli stili definiti per gli ID sovrascrivono gli stili definiti per le classi, quindi in, le impostazioni di stile di #uniquething annulleranno lo stile di .whatever se i due conflitti.

Quindi dovresti probabilmente usare gli ID per cose come, l’intestazione, la tua ‘barra laterale’ o qualsiasi altra cosa, e così via – cose che appaiono solo una volta per pagina.

Per me: Se uso le classi quando farò qualcosa in CSS o aggiungere un nome agli elementi e posso usare in tutti gli elementi in una pagina.

Quindi, ID che uso per un elemento unico

Es:

 

CSS:

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