In questo articolo ti mostrerò come usare ID e classe in HTML, questi sono due attributi molto importanti, ci aiutano a combinare facilmente con i CSS.

Ogni tag HTML ha i propri e diversi attributi. Tuttavia, con gli attributi ID e Class, è possibile utilizzare il 100% dei tag. L'ID è come il tuo numero di identificazione e la classe è come il tuo sesso. Scopriamo insieme i dettagli.

Che cos'è l'ID in HTML?

L'ID in HTML è una stringa univoca e identificativa, utilizzata per allegare un determinato tag HTML. In un file HTML, l'ID è univoco, il che significa che non è possibile impostare 1 ID per 2 tag HTML.

La denominazione degli ID dovrebbe seguire le seguenti regole :

• Nome dato in inglese e senza accenti, senza spazi, senza caratteri speciali.
• La denominazione ha senso, aiutandoci a guardare l'ID per sapere a cosa serve la carta.

Esempio : creo una finestra di dialogo che visualizza un codice sconto e utilizzerò un tag div per circondare l'intera finestra di dialogo. Quindi non ho dimenticato di impostare l'ID come " discount_wrapper ".

 <div id="discount_wrapper"> </div>

Ora, se vuoi usare i CSS per modificare questo tag, usa la seguente sintassi:

 #discount_wrapper{ background:red; height: 300px }

In breve, se vuoi usare CSS per interrogare l'ID, usa la sintassi #ten_id .

Cosa sono le classi in HTML?

Se l'ID è univoco in un file di documento HTML, la classe è diversa, viene utilizzata per stabilire una classe di oggetti che condividono una caratteristica comune. Quindi puoi allegare una classe a molti tag HTML diversi.

Anche la denominazione della classe dovrebbe seguire le regole che ho indicato nella parte 1.

Ad esempio : voglio visualizzare un elenco di post e ogni post lo chiamerò un blocco. Quindi, se ci sono 100 post, avrò bisogno di 100 blocchi. Se utilizziamo ID per impostare quei 100 blocchi, è molto difficile. Quindi, inseriremo una classe per 100 blocchi e dobbiamo solo scrivere CSS per quella classe e gli altri 100 blocchi verranno applicati CSS immediatamente.

 <div class="post"> Post 1 </div> <div class="post"> Post 2 </div> <div class="post"> Post 3 </div> <div class="post"> Post 4 </div> <div class="post"> Post 5 </div> <div class="post"> Post 6 </div>

In CSS scriverei quanto segue:

 .post{ background:red; height: 100px; margin: 20px; }

Pertanto, utilizziamo il . per classe e # per ID.

Quando usare l'ID e quando usare la classe?

Questa è una domanda che molti di voi mi hanno fatto. Per rispondere, devi rivedere i due concetti che ho presentato sopra.

• L'ID è univoco all'interno di un set di documenti HTML. Pertanto, dovresti impostarlo se la struttura del sito esiste solo in una posizione, ovvero CSS non ha ereditarietà.
• La classe è diversa, può allegare classi a molti tag HTML diversi. Pertanto, dovresti usarlo nel caso in cui desideri che tag HTML diversi possano ereditare il CSS dell'altro.

Attraverso questo tutorial, ho finito di mostrarti come utilizzare ID e classi in HTML. Questa è una questione importante, è una premessa per imparare le prossime lezioni. Si prega di guardare attentamente, se avete domande, commentate in modo che io possa rispondere.