Login | Iscriviti | FAQ
Anonymous

Lezione 8: Gruppi di elementi (span e div)

Gli elementi <span> e <div> vengono usati per raggruppare e strutturare un documento e vengono utilizzati spesso insieme agli attributi class e id.

In questa lezione vedremo in dettaglio come si usano <span> e <div> poichè questi sono due elementi HTML sono di importanza fondamentale per i CSS.

  • Raggruppare con <span>
  • Raggruppare con <div>

Raggruppare con <span>

L'elemento <span> è quello che possiamo definire un elemento neutro che non aggiunge niente al documento stesso. Ma con i CSS <span> può essere usato per aggiungere effetti visivi a parti specifiche di testo all'interno del documento.

Un esempio di quanto detto potrebbe essere questa citazione di Benjamin Franklin:

	
	<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>

Diciamo che vogliamo evidenziare in rosso quelli che il Sig. Franklin vede come benefici del non rimanere a letto tutto il giorno. A questo scopo marchiamo i benefici con <span>. Ad ogni span viene quindi aggiunta una class che possiamo definire nel nostro foglio di stile:

	
	<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
Il CSS corrispondente è:
	
	span.benefit {
		color:red;
	}
	
	

Naturalmente puoi anche usare id per aggiungere lo stile agli elementi <span>. Proprio come ricorderai dovrai applicare un unico id per ciascuno dei tre elementi <span>, come abbiamo visto nella lezione precedente.

Raggruppare con <div>

Mentre <span> viene usato con un elemento di livello blocco come abbiamo visto nell'esempio precedente, <div> viene usato per raggruppare uno o più elementi di livello blocco.

A parte queste differenze, il raggruppamento con <div> funziona più o meno allo stesso modo. Guardiamo un esempio con due liste di presidenti degli USA divisi per partiti politici:

	
	<div id="democrats">
	<ul>
	<li>Franklin D. Roosevelt</li>
	<li>Harry S. Truman</li>
	<li>John F. Kennedy</li>
	<li>Lyndon B. Johnson</li>
	<li>Jimmy Carter</li>
	<li>Bill Clinton</li>
	</ul>
	</div>

	<div id="republicans">
	<ul>
	<li>Dwight D. Eisenhower</li>
	<li>Richard Nixon</li>
	<li>Gerald Ford</li>
	<li>Ronald Reagan</li>
	<li>George Bush</li>
	<li>George W. Bush</li>
	</ul>
	</div>
	
	

E nel nostro foglio di stile possiamo utilizzare il raggruppaamento nello stesso modo visto sopra:

	
	#democrats {
		background:blue;
	}

	#republicans {
		background:red;
	}
	
	

Nell'esempio abbiamo usato solo <div> e <span> su oggetti molto semplici come testo e colori di sfondo. Entrambi gli elementi hanno il potenziale di fare cose molto più avanzate. Comunque non lo diremo in questa lezione. Lo vedremo più tardi nel seguito del tutorial.

Riepilogo

Nella lezione 7 e nella 8, hai imparato qualcosa sui selettori id e class e sugli elementi span e div.

Adesso dovresti essere in grado di raggruppare e identificare più o meno tutte le parti di un documento, che è una bel passo per diventare padrone dei CSS. Nella lezione 9 introdurremo il modello box.



<< Lezione 7: Identificazione e gruppi di elementi (class e id)

Lezione 9: Il modello a scatola >>