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 :
- Una classe deve iniziare sempre con una lettera (non numero)
- Non può contenere caratteri speciali al di fuori dell’ underscore ( _ )
- Non può contenere spazi
- è 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.)
