ATTRIBUTO CLASS


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.)


Continua a leggere