Classi di elementi in CSS

Nelle lezioni precedenti abbiamo selezionato gli elementi della pagina per nome del tag, applicando stili, ad esempio, a tutti i paragrafi contemporaneamente. Su una pagina, però, possono esserci paragrafi di tipo diverso, ai quali è necessario applicare stili diversi. Per risolvere questo problema, possiamo assegnare paragrafi diversi a diverse classi CSS.

Per assegnare un tag a una classe, è necessario scrivere per quel tag l'attributo class, e in esso - un nome di classe da voi scelto, composto da lettere, numeri, caratteri di sottolineatura e trattini.

Vediamo un esempio. Creiamo paragrafi con due tipi di classi - eee e zzz:

html<p class="eee">
  paragraph with class eee
</p>
<p class="eee">
  paragraph with class eee
</p>
<p class="zzz">
  paragraph with class zzz
</p>
<p class="zzz">
  paragraph with class zzz
</p>

Ora selezioniamo in CSS i paragrafi con le diverse classi e assegniamo loro alcuni stili. Ad esempio, coloriamo i paragrafi con la classe zzz in rosso, e i paragrafi con la classe eee in verde.

Per fare ciò, nel file CSS dobbiamo selezionare le nostre classi. La selezione ha la seguente sintassi: prima viene il punto, e poi il nome della classe da noi scelto. Cioè per selezionare la classe eee dobbiamo scrivere .eee, e per la classe zzz - scrivere .zzz.

Quindi, realizziamo quanto descritto. Aggiungiamo al nostro HTML anche gli stili CSS per le classi da noi introdotte:

css.eee {
  color: green;
}
.zzz {
  color: red;
}

Se eseguiamo il nostro codice, il risultato sarà il seguente:

html<ul>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
</ul>

html<h2 class="eee">Title</h2>
<p class="eee">
  paragraph
</p>
<p class="eee">
  paragraph
</p>
<p>
  paragraph without class
</p>

<ul class="eee">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>