HTML ATTRIBUTO CLASS

di

L’ attributo class , è uno degli attributi più significativi del linguaggio html , il suo scopo è quello di assegnare un determinato stile o comportamento uguale a tag differenti.

Questo attributo , riduce di gran lunga la lunghezza di un codice in cui , determinati elementi devono essere formattati in ugual modo.Supponiamo che , in un dato documento html , desideriamo che tutti i nostri titoli abbiano sfondo blu con caratteri bianchi , la definizione di una classe che chiameremo titoli, ci eviterà di dover assegnare lo stesso identico stile con conseguente ripetizione di codice a ciascun titolo.

Vediamolo con un esempio pratico.

<!DOCTYPE html>
 <html>
 <head>
 <style>
 .titoli {
  background-color: blue;
  color: white;
  } 
 </style>
 </head>
 <body>
 <h1 class = "titoli">UN TITOLO PER IL NOSTRO ESEMPIO</h1>
 <p>Un paragrafo al di fuori della nostra classe </p>
 <h1 class = "titoli">UN SECONDO TITOLO PER IL NOSTRO ESEMPIO</h1>
 <p>Un paragrafo al di fuori della nostra classe </p>
 <h1 class = "titoli">UN TERZO TITOLO PER IL NOSTRO ESEMPIO</h1>
 <p>Un paragrafo al di fuori della nostra classe </p>
 </body>
 </html>

Sintassi di base

Per creare una classe , basta anteporre un punto al nome che desideriamo assegnarvi , come da esempio appena visto.


(Nell’ esempio appena esaminato abbiamo creato la classe  .titoli )

Tenendo presente queste 4 regole :

  1. Una classe deve iniziare sempre con una lettera (non numero)
  2. Non può contenere caratteri speciali al di fuori dell’ underscore ( _ )
  3. Non può contenere spazi
  4. è case-sensitive (distingue minuscole e maiuscole)

Per utilizzare la classe appena creata , occorre (come ogni attributo) inserirla nel tag di apertura dell’ elemento in questione :<tag  class = “nome della classe”>Nell’ esempio esaminato in precedenza abbiamo richiamato all’ interno del tag <h1 class = “titoli”>E’ possibile assegnare più di una classe ad uno stesso elemento.

<!DOCTYPE html>
 <html>
 <head>
 <style>
 .titoli {
  background-color: blue;
  color: white;
  } 
  .titoli_secondari
  {
  text-align :center;
  } 
 </style>
 </head>
 <body>
 <h1 class = "titoli">UN TITOLO PER IL NOSTRO ESEMPIO</h1>
 <h2 class = "titoli titoli_secondari">UN TITOLO PER IL NOSTRO ESEMPIO</h2>
 <p>Un paragrafo al di fuori della nostra classe </p>
 <h1 class = "titoli">UN SECONDO TITOLO PER IL NOSTRO ESEMPIO</h1>
 <p>Un paragrafo al di fuori della nostra classe </p>
 <h1 class = "titoli">UN TERZO TITOLO PER IL NOSTRO ESEMPIO</h1>
 <p>Un paragrafo al di fuori della nostra classe </p>
 </body>
 </html>

Nell’ esempio appena esaminato abbiamo assegnato una seconda classe al titolo <h2>, nel quale si impone che il testo appartenente a quella classe deve essere oltre che come definito nella prima classe anche centrato.Per assegnare più di una classe ad un unico tag la sintassi è  : <tag class =  “nomeclasse1 nomeclasse2”> ( si separano le classi semplicemente attraverso uno spazio.)

ᐊ Attributo Id
Torna alla lista Completa ᐅ

Lascia un commento