Una semplice guida del linguaggio CSS, fornito da HTML.NET.

Lezione01: Cosa sono i CSS?

Forse hai già sentito parlare dei CSS senxa realmente sapere cosa fossero. In questa lezione imparerai qualcosa sui CSS e su cosa farci.

CSS è l'acronimo di Cascading Style Sheets (in italiano Fogli di stile).

Cosa posso fare con i CSS?

I CSS formano un linguaggio per la definizione del layout dei documenti HTML. Per esempio, i CSS si occupano dei font, dei colori, dei margini, delle linee, delle altezze, delle larghezze, delle immagini di sfondo, del posizionamento e di molte altre cose. Aspetta e vedrai!

L'HTML può essere stra-usato per aggiugnere layout ai siti web. Ma i CSS offrono molte più opzioni, accurate e sofisticate. Oggi i CSS sono supportati da tutti i browser.

Dopo sole poche lesioni di questo tutorial sarai capace di fare il tuo foglio di stile usando i CSS in modo da dare al tuo sito web un nuovo e grandioso aspetto.

Che differenza c'è tra i CSS e l'HTML?

L'HTML viene usato per strutturare il contenuto. I CSS vengono usati per formattare la struttura del contenuto.

Va bene, sembra un po' troppo tecnico e confuso, ma per favore continua a leggere. Molto presto ne capirai il senso.

Indietro nel tempo, quando Madonna era una vergine e un tipo di nome Tim Berners Lee aveva inventato il World Wide Web, solo il linguaggio HTML veniva usato per aggiungere struttura al testo. Un autore poteva marcare il suo testo con la scritta "questo è un titolo" o"questo è un paragrafo" usando tag HTML del tipo di <h1> e <p>.

Quando il web ha cominciato a diventare popolare, i designer hanno iniziato a cercare alternative per aggiungere layout ad un documento online. Per far fronte alla domanda, i produttori di browser (a quel tempo Netscape e Microsoft) inventarono nuovi tag HTML come per esempio <font>, diverso dai tag HTML originali inq uanto definisce il layout e non la struttura.

Questo portò a situazioni in cui tag originari di struttura come <table> veniva abbondantemente usati per fare il layout delle pagine invece che per aggiungere struttura al testo. Molti altri tipi di nuovi tag, come <blink> venivano supportati solo da alcuni tipi di browser. "Per vedere queste pagine hai bisogno del browser X" era diventato uno slogan comune sui siti web.

I CSS sono stati inventati per rimediare a questa situazione, fornendo ai web designer opportunità sofisticate per la progettazione del layout che fossero supportate da tutti i browser. Allo stesso tempo la separazione dello stile di presentazione di un documento dal contenuto del documento, facilita molto il mantenimento dei siti web.

Quali benefici avrò con i CSS?

I CSS sono stati una rivoluzione nel mondo del web design. I benefici concreti dei CSS comprendono:

il controllo del layout di molti documenti contemporaneamente attraverso un unico foglio di stile;
un controllo più preciso del layout;
l'applicazione di un layout diverso per ogni tipo di media (schermo, stampa, ecc.);
un grand numero di tecniche avanzate e sofisticate.

Nella prossima lezione ci avvicineremo di più al funzionamento dei CSS e a come puoi iniziare ad utilizzarli.

Lezione02: Come funzionano i CSS?

In questa lezione imparerai a fare il tuo primo foglio di stile. Imparerai le basi del modello CSS e il codice che ci serve per usare i CSS in un documento HTML.

Molte proprietà usate nei Cascading Style Sheets (CSS) sono simili a quelle dell'HTML. Quindi, se hai usato l'HTML per il layout, molto probabilmente riconoscerai facilmente la maggior parte del codice. Vediamo un esempio concreto.

La sintassi di base dei CSS

Diciamo che vogliamo un bel colore rosso come sfondo della pagina web:

Usando solo l' HTML avremmo fatto in questo modo:

	
	<body bgcolor="#FF0000">

Lo stesso risultato con i CSS si ottiene così:

	
	body {background-color: #FF0000;}

Come potrai notare, i codici dell'HTML e del CSS sono più o meno identici. L'esempio sopra ti mostra anche il modello fondamentale dei CSS:

Figure explaining selector, property and value

Ma dove metti il codice CSS? Questo è quello che vedremo esattamente fra un attimo.

Applicare i CSS ad un documento HTML

Ci sono tre modi con cui puoi applicare i CSS ad un documento HTML, e sono tutti illustrati di seguito. Ti raccomandiamo di focalizzarti sul terzo metodo, cioè l'esterno.

Method 1: In-line (l'attributo style)

Un modo per applicare i CSS all'HTML è quello di usare l'attributo style dell'HTML. Rimanendo sull'esempio riportato sopra con lo sfondo rosso, possiamo scrivere come segue:

	<html>
	  <head>
		<title>Esempio</title>
	  </head>
	  <body style="background-color: #FF0000;">
		<p>Questa è una pagina rossa</p>
	  </body>
	</html>

Method 2: Interno (il tag style)

Un altro modo per includere il codice CSS è quello di usare il tag HTML <style>. Per esempio in questo modo:

	<html>
	  <head>
		<title>Esempio</title>
		<style type="text/css">
		  body {background-color: #FF0000;}
		</style>
	  </head>
	  <body>
		<p>Questa è una pagina rossa</p>
	  </body>
	</html>

Method 3: Esterno (link ad un foglio di stile)

Il metodo raccomandato è quello di fare un link a quello che viene chiamato un foglio di stile esterno. In tutto questo tutorial useremo questo metodo per i nostri esempi.

Un foglio di stile esterno è semplicemente un file di testo con estensione .css. Come con tutti gli altri file, puoi mettere il tuo foglio di stile sul server web o sul disco fisso.

Per esempio, supponiamo che il tuo foglio di stile si chiami style.css ed è stato salvato in una cartella chiamata style. La situazione potrebbe essere illustrata come segue:

The folder "style" containing the file "style.css"

Il trucco è creare un link al foglio di stile (style.css) dal documento HTML (default.htm). Questo link potrebbe essere creato con una linea di codice HTML:

	<link rel="stylesheet"

type="text/css" href="style/style.css" />

Nota come il percorso per arrivare al tuo foglio di stile viene indicato usando l'attributo href.

La linea di codice deve essere inserita nella sezione header del codice HTML, cioè tra i tag <head> e </head>, in questo modo:

	<html>
	  <head>
		<title>Il mio documento</title>
		<link rel="stylesheet"

 type="text/css" href="style/style.css" />
	  </head>
	  <body>
	  ...

Questo link dice al browser che per visualizzare il file HTML, dovrebbe usare il layout come descritto nel file CSS.
La cosa realmente intelligente è che più documenti HTML possono essere linkati allo stesso foglio di stile. In altre parole, un file CSS può essere usato per controllare il layout di più documenti HTML contemporaneamente.

Figure showing how many HTML documents can link to the same style sheet

Questa tecnica ti permette di guadagnare un sacco di lavoro. Se per esempio vuoi cambiare il colore di sfondo di un sito web di 100 pagine, un foglio di stile ti può salvare dal farlo manualmente per tutti i 100 documenti HTML. Usando i CSS il cambiamento può essere fatto in pochi secondi solo cambiando un codice nel foglio di stile.

Mettiamo in pratica quello che abbiamo appena imparato.

Prova da solo

Apri Notepad (o qualsiasi altro editor di testo) e crea due file - un file HTML e un file CSS - con questi contenuti:

default.htm

	<html>
	  <head>
		<title>Il mio documento</title>
		<link rel="stylesheet"

                 type="text/css" href="style.css" />
	  </head>
	  <body>
		<h1>Il mio primo foglio di stile</h1>
	  </body>
	</html>

style.css

	body {
	  background-color: #FF0000;
	}

Adesso metti i due file nella stessa cartella. Ricordati di salvare i file con la giusta estensione (rispettivamente ".htm" e ".css")

Dal tuo browser apri default.htm e osserva la tua pagina con lo sfondo rosso. Congratulazioni! Hai fatto il tuo primo foglio di stile!

Corri alla prossima lezione dove vedremo alcune delle proprietà dei CSS.

Lezione03: Colori e sfondi

In questa lezione imparerai come applicare i colori e gli sfondi al tuo sito web. Vedremo anche alcuni metodi avanzati per posizionare e controllare le immagini di sfondo. Spiegheremo quindi le seguenti proprietà CSS:

Colore di primo piano: la proprietà 'color'

La proprietà color descrive il colore di primo piano di un elemento.

Per esempio, immagina di volere tutti i titoli del documento di colore rosso scuro. I titoli sono tutti marcati con l'elemtno HTML <h1>. Il codice sotto definisce il colore rosso dell'elemento <h1>.

	
	h1 {
		color: #ff0000;
	}

Visualizza l'esempio

I colori possono essere inseriti in valore esadecimale come nell'esempio sopra, o puoi usare il nome del colore in inglese ("red") o il suo valore in rgb (rgb(255,0,0)).

La proprietà 'background-color'

La proprietà background-color descrive il colore di sfondo degli elementi.

L'elemento <body> contiene tutto il contenuto di un documento HTML. Per questo motivo, per cambiare il colore di sfondo di tutta la pagina, dovremmo applicare la proprietà background-color all'elemento <body>.

Il colore di sfondo può essere applicato anche ad altri elementi compresi i titoli e il testo. Nell'esempio sotto sono stati applicati diversi colori di sfondo agli elementi <body> e <h1>.

	
	body {
		background-color: #FFCC66;
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}

Visualizza l'esempio

Nota che abbiamo applicato due proprietà ad <h1> separandole con un punto e virgola.

Immagini di sfondo [background-image]

La proprietà CSS background-image viene usata per inserire una immagine di sfondo.

Come esempio di immagine di sfondo abbiamo usato la farfalla sotto. Puoi scaricare questa immagine in modo da poterla usare sul tuo computer (fai click con il taasto destro del mouse sull'immagine e scegli "salva immagine come"), o puoi usare un'altra immagine che ti piace inserire.

Per inserire l'immagine della farfalla come immagine di sfondo di una pagina web applica semplicemente la proprietà background-image al <body> e specifica la posizione dell'immagine.

	
	body {
		background-color: #FFCC66;
		background-image: url("butterfly.gif");
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}

Visualizza l'esempio

NB: Nota come abbiamo specificato l'indirizzo dell'immagine come url("butterfly.gif"). Questo significa che l'immagine è posizionata nella stessa cartella del foglio di stile. Puoi riferti anche ad immagini in altr cartelle usando url("../images/butterfly.gif") o anche su Internet indicando l'indirizzo completo del file: url("http://www.html.net/butterfly.gif").

Immagini di sfondo ripetute [background-repeat]

Nell'esempio sopra hai notato che per default la farfalla viene ripetuta sia orizzontalmente che verticalmente in modo da coprire tutto lo schermo? La proprietà background-repeat controlla questo comportamento.

La tabella sotto sottolinea i quattro diversi valori che può assumere background-repeat.

Valore	Descrizione	Esempio
`Background-repeat: repeat-x`	L'immagine viene ripetuta orizzontalmente	Visualizza l'esempio
`background-repeat: repeat-y`	L'immagine viene ripetuta verticalmente	Visualizza l'esempio
`background-repeat: repeat`	L'imagine viene ripetuta sia orizzontalmente che verticalmente	Visualizza l'esempio
`background-repeat: no-repeat`	L'immagine non viene ripetuta	Visualizza l'esempio

Per esempio, per evitare ripetizione di un'immagine di sfondo il codice dovrebbe apparire come questo:

	
	body {
		background-color: #FFCC66;
		background-image: url("butterfly.gif");
		background-repeat: no-repeat;
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}

Visualizza l'esempio

Immagini di sfondo bloccate [background-attachment]

La proprietà background-attachment specifica se una figura di sfondo è fissa o si muove insieme all'elemento che la contiene.

Una immagine di sfondo fissa non si muoverà con il testo quando il lettore scorrerà la pagina, mentre una immagine di sfondo non bloccata si muoverà insieme al testo della pagina web.

La tabella sotto sottolina i due valori che può avere background-attachment. Fai click sugli esempi per vedere le differenze fra scroll e fixed.

Valore	Descrizione	Esempio
`Background-attachment: scroll`	L'immagine si muove con la pagina - non bloccata	Visualizza l'esempio
`Background-attachment: fixed`	L'immagine è bloccata	Visualizza l'esempio

Il codice sotto, per esempio, blocca l'immagine di sfondo.

	
	body {
		background-color: #FFCC66;
		background-image: url("butterfly.gif");
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}

Visualizza l'esempio

Immagini di sfondo posizionate [background-position]

Per default una immagine di sfondo verrà posizionata nell'angolo in alto a sinistra dello schermo. La proprietà background-position ti permette di cambiare il default e posizionare l'imamgine di sfondo in qualsiasi altro posto dello schermo che preferisci.

Ci sono molti modi per stabilire i valori di background-position. Tutti comunque stabiliscono un insieme di coordinate. Per esempio, il valore '100px 200px' posiziona l'immagine a 100px dal lato sinistro e a 200px dal bordo superiore della finestra del browser.

Le coordinate possono essere indicate come percentuale delle dimensioni dello schermo, unità fisse (pixel, centimetri, ecc.) o puoi usare le parole inglesi top, bottom, center, left e right. Il modello sotto illustra meglio il sistema:

La tabella ti da qualche esempio.

Valore	Descrizione	Esempio
`background-position: 2cm 2cm`	L'immagine è posizionata a 2 cm dalla sinistra e a 2 cm dal basso della pagina	Visualizza l'esempio
`background-position: 50% 25%`	L'immagine è centrata ad un quarto della pagina dal basso	Visualizza l'esempio
`background-position: top right`	L'immagine è posizionata nell'angolo in alto a destra della pagina	Visualizza l'esempio

Il codice di esempio sotto posiziona l'immagine di sfondo nell'angolo in basso a destra:

	
	body {
		background-color: #FFCC66;
		background-image: url("butterfly.gif");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: right bottom;
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}

Visualizza l'esempio

Raggruppamento [background]

La proprietà background è una scorcaitoira per tutte le proprietà di sfondo che abbiamo elencato in questa lezione.

Con la proprietà background puoi raggruppare molte proprietà insieme e scrivere così il tuo foglio di stile in una maniera ancora più corta e più facile da leggere.

Guarda per esempio queste cinque linee:

	
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right bottom;

Usando background puoi ottenere lo stesso risultato con solo una linea di codice:

	
	background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Di seguito l'ordine con cui devono essere inserite le proprietà:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Se una proprietà non viene definita verrà automaticamente posta al suo valore di default. Per esempio, background-attachment e background-position non vengono definite nell'esempio:

	
	background: #FFCC66 url("butterfly.gif") no-repeat;

Queste due proprietà, che non sono state specificate, verranno soltanto definite con il loro valore di default che, come abbiamo visto, è scroll e top left.

Riepilogo

In questa lezione hai già imparato nuove tecniche che non sarebbero possibili usando solo l'HTML. Il divertimento continua nella prossima lezione che esamina una gamma più ampia di possibilità quando si usano i CSS per descrivere i font.

Lezione04: Font

In questa lezione imparerai qualcosa sui font e su come applicarli utilizzando i CSS. Vedremo anche come funziona il fatto che uno specifico font può esssere visualizzato sul tuo tuo sito web solo se è stato istallato sul PC che aprirà il tuo sito. Verranno quindi descritte le seguenti proprietà CSS:

La famiglia dei caratteri [font-family]

La proprietà font-family viene usata per definire le priorità per la lista dei caratteri da usare per visualizzare un elemento o una pagina web. Se il primo font della lista non è stato istallato sul computer che accede al sito, allora verrà provato il secondo font della lista e così via finchè non verrà trovato un fonte disponibile.

Ci sono due tipi di nomi per catalogare i font: i nomi della famiglia e le famiglie generiche. I due termini vengono spiegati sotto.

Nome della famiglia: Esempi di nomi della famiglia (conosciuto spesso con il termine "font") possono essere per esempio "Arial", "Times New Roman" o"Tahoma".
Famiglia generica: Le famiglie generiche possono essere descritte meglio come gruppi di nomi di famiglie con caratteristiche uniformi. Un esemio è il sans-serif (in italiano, senza grazie), che è la collezione dei font senza le cosiddette grazie, o "piedi".

Di seguito vengono illustrate le differenze:

Three examples of generic families and some of their family members

Quando fai la lista dei font per il tuo sito web, inizia con i font più usati e segui con alcuni font alternativi. E' raccomandabile terminare la lista con il nome di una familia generica di font. In questo modo la pagina potrà essere visualizzata ocn un font della stessa famiglia generica, nel caso in cui tutti i font listati non fossero disponibili.

Un esempio di lista di priorità dei font potrebbe essere fatta così:

	
	h1 {font-family: arial, verdana, sans-serif;}
	h2 {font-family: "Times New Roman", serif;}

Visualizza l'esempio

I titoli marcati con <h1> verranno visualizzati con il font "Arial". Se questo font non è stato istallato sul computer dell'utente, allora verrà utilizzato al suo posto il font "Verdana". Se entrambi questi font non sono disponibili, i titoli verranno visualizzati utilizzando un font della famiglia sans-serif.

Nota come il nome del font "Times New Roman" contiene degli spazi e per questo motivo viene messo tra doppi apici.

Stile del font [font-style]

La proprietà font-style definisce lo stile normale, italico o obliquo del font scelto. Nell'esempio sotto tutti i titoli marcati con <h2> verranno visualizzati in italico.

	
	h1 {font-family: arial, verdana, sans-serif;}
	h2 {font-family: "Times New Roman", serif; font-style: italic;}

Visualizza l'esempio

Variante del font [font-variant]

La proprietà font-variant viene usata per scegliere tra le varianti normal o small-caps di un font. Un font small-caps è un font font che usa tutte lettere maiuscole di dimensioni leggermente più piccole, al posto delle lettere minuscole. Confuso? Guarda questo esempio:

Se viene assegnato a font-variant il valore small-caps e non è disponibile nessun font small-caps il browser molto probabilmente mostrerà il testo tutto maiuscolo.

	
	h1 {font-variant: small-caps;}
	h2 {font-variant: normal;}

Visualizza l'esempio

Peso del font [font-weight]

La proprietà font-weight descrive il grado di neretto, o "di pesantezza", che dovrebbe avere il font. Un font può essere sia normal che bold. Alcuni browser supportano anche l'uso di una serie di numeeri tra 100 e 900 (in centinaia) per descrivere la pesantezza di un font.

	
	p {font-family: arial, verdana, sans-serif;}
	td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Visualizza l'esempio

Dimensione del font [font-size]

La dimensione di un font viene definita con la proprietà font-size.

Per descrivere le dimensioni di un font si può scegliere tra diverse unità di misura (per esempio, pixel e percentuali). In questo tutorial ci focalizzeremo sulle unità più utilizzate comunemente e più appropriate, mostrate negli esempi:

	
	h1 {font-size: 30px;}
	h2 {font-size: 12pt;}
	h3 {font-size: 120%;}
	p {font-size: 1em;}

Visualizza l'esempio

C'è una sola differenza chiave tra le quattro unità elencate sopra. Le unità 'px' e 'pt' indicano dimensioni assolute per il font, mentre '%' e 'em' permettono all'utente di ridimensionare il font come preferiscono. Molti utenti sono diversamente abili, anziani o semplicemente vedono poco o hanno un monitor di qualità scadente. Per far si che il web sia accessibile a tutti, dovresti usare le unità ridimensionabili come '%' o 'em'.

Di seguito puoi vedere come si ridimensiona un testo con Mozilla Firefox e Internet Explorer. Prova da solo - bella caratteristica, non credi?

Raggruppamento [font]

Usando la proprietà font è possibile raggruppare tutte le diverse proprietà dei font in una sola.

Per sempio immagina queste quattro linee di codice usate per descrivere le proprietà del font per il tag <p>:

	
	p {
		font-style: italic;
		font-weight: bold;
		font-size: 30px;
		font-family: arial, sans-serif;
	}

Usando la proprietà per il raggruppamento il codice sarà semplificato:

	
	p {
		font: italic bold 30px arial, sans-serif;
	}

L'ordine dei valori per font è:

font-style | font-variant | font-weight | font-size | font-family

Riepilogo

In questa lezione hai imparato alcune delle possibilità relative ai font. Ricordati che uno dei vantaggi principali nell'usare i CSS per specificare i font è quello di poter cambiare i font di tutto il sito in una volta sola, in pochi minuti. I CSS ti permettono i guadagnare tempo e ti semplificano la vita. Nella prossima lezione guarderemo il testo.

Lezione05: Testo

Formattare e aggiungere dello stile al testo è una delle prerogative principali per ogni web designer. In questa lezione ti verranno introdotte alcune sorprendenti opportunità fornite dai CSS per aggiungere stile al testo. Descriveremo le seguenti proprietà:

Indentazione del testo [text-indent]

La proprietà text-indent ti permette di aggiungere un tocco elegante ai paragrafi di testo, applicando una indentazione alla prima linea del paragrafo. Nell'esempio sotto abbiamo applicato una indentazione di 30px a tutti i paragrafi marcati con il tag <p>:

	
	p {
		text-indent: 30px;
	}

Visualizza l'esempio

Allineamento del testo [text-align]

La proprietà text-align corrisponde all'attributo align usato nelle precedenti versioni di HTML. Il testo può essere allineato a sinistra, a destra o centrato. Oltre a questo il valore justify permetterà di allineare ogni linea del testo sia a destra che a sinistra. Già conosci questo tipo di allineamenti da esempi sui giornali o sulle riviste.

Nell'esempio sotto il testo nel titolo della tabella <th> verrà allineato a destra mentre i dati nella tabella <td> saranno centrati. Inoltre i normali paragrafi di testo saranno giustificati:

	
	th {
		text-align: right;
	}

	td {
		text-align: center;
	}

	p {
		text-align: justify;
	}

Visualizza l'esempio

Decorazione del testo [text-decoration]

La proprietà text-decoration permette di aggingere al testo diverse "decorazioni" o "effetti". Per esempio puoi sottolineare il testo, inserire una linea sul testo o sopra il testo, ecc. Nell'esempio che segue i titoli <h1> vengono sottolineati con una linea sopra il testo e i titoli <h3> con una liena sul testo.

	
	h1 {
		text-decoration: underline;
	}

	h2 {
		text-decoration: overline;
	}

	h3 {
		text-decoration: line-through;
	}

Visualizza l'esempio

Spazio fra i caratteri [letter-spacing]

Lo spazio tra i caratteri del testo può essere specificato usando la proprietà letter-spacing. Il valore della proprietà è semplicemente la distanza desiderata. Per esempio, se vuoi uno spazio tra i caratteri del testo di un paragrafo <p> di 3px e una distanza tra i caratteri del titolo <h1> di 6px, il codice che dovresti usare sarà:

	
	h1 {
		letter-spacing: 6px;
	}

	p {
		letter-spacing: 3px;
	}

Visualizza l'esempio

Trasformazione del testo [text-transform]

La proprietà text-transform controlla l'uso delle maiuscole in un testo. Puoi scegliere capitalize, usare uppercase o lowercase a seconda di come appare il testo nel codice HTML.

Un esempio potrebbe essere la parola "headline" che può essere mostrata ll'utente come "HEADLINE" o "Headline". Esistono quattro possibili valori per la proprietà text-transform:

capitalize: Usa la maiuscola per il primo carattere di ogni parola. Per esempio: "john doe" sarà "John Doe".
uppercase: Converte tutti i caratteri in maiuscole. Per esempio: "john doe" sarà "JOHN DOE".
lowercase: Converte tutte i caratteri in minuscole. Per esempio: "JOHN DOE" sarà "john doe".
none: Nessuna trasformazione - il testo viene presentato come appare nel codice HTML.

Come esempio useremo una lista di nomi. I nomi sono tutti marcati con <li> (list-item). Diciamo che vogliamo i nomi in lettere maiuscole e i titoli in minuscolo.

Cerca di guardare il codice HTML di questo esempio e vedrai che in effetti il testo è in lettere minuscole.

	
	h1 {
		text-transform: uppercase;
	}

	li {
		text-transform: capitalize;
	}

Visualizza l'esempio

Riepilogo

Nelle ultime tre lezioni hai già imparato molte proprietà dei CSS ma ce ne sono ancora molte altre. Nella prossima lezione vedremo i link.

Lezione06: Link

Puoi applicare tutto quello che hai imaprato nelle lezioni precedenti anche ai link (cioè, cambiare il colore, i font, la sottolineatura, ecc.). La cosa nuova è che i CSS ti permettono di definire queste proprietà in modo diverso a seconda se il link è stato visitato o no, è attivo o se il cursore è proprio sopra il link. In questo modo è possibile aggiungere un po' di fantasia ed utili effetti al tuo sito web. Per controllare questi effetti devi usare quella che viene chiamata una pseudo-classe (pseudo-classes).

Cosa è una pseudo-classe?

Una pseudo-classe ti permett di tenere in considerazione condizioni o eventi diversi quando definisci una proprietà epr una tag HTML.

Guardiamo un esempio. Come sai, in HTML i link vengono specificati con il tag <a>. Possiamo quindi usare a come selettore nei CSS:

	
	a {
		color: blue;
	}

Un link può assumere diversi stati. Per esempio, può essere già stato visitato o no. Puoi usare una pseudo classe per asssegnare uno stile diverso ai link visitati e ai link non ancora visitati.

	
	a:link {
		color: blue;
	}

	a:visited {
		color: red;
	}

Usa a:link e a:visited rispettivamente per i link non ancora visitati e per i link già visitati. I link attivi avranno come pseudo-classe a:active, mentre a:hover verrà usato per definire il cursore sopra il link.

Adesso vedremo in dettaglio ciascuna delle quattro pseudo-classi.

Pseudo-classe: link

La pseudo-classe :link viene usata per i link che non sono stati ancora visitati dall'utente.

Nel codice di esempio riportato sotto i link non visitati appariranno di colore blu chiaro.

	
	a:link {
		color: #6699CC;
	}

Visualizza l'esempio

Pseudo-classe: visited

La pseudo-classe :visited viene usata per i link che sono già stati visitati dall'utente. Per esempio, nel codice sotto faremo tutti i link visitati con un colore viola scuro:

	
	a:visited {
		color: #660099;
	}

Visualizza l'esempio

Pseudo-classe: active

La pseudo-classe :active viene usata per i link attivi.

Nell'esempio inseriamo un colore di sfondo giallo per i link attivi:

	
	a:active {
		background-color: #FFFF00;
	}

Visualizza l'esempio

Pseudo-classe: hover

La pseudo-classe :hover viene usata quando il cursore del mouse passa sopra ad un link.

Questa proprietà può essere usata per creare un effetto interessante. Per esempio, se vogliamo tutti i link arancioni e in italico quando ci passiamo sopra con il mouse, allora il nostro CSS dovrebbe essere:

	
	a:hover {
		color: orange;
		font-style: italic;
	}

Visualizza l'esempio

Esempio 1: quando il cursore è sopra un link

E'molto diffuso creare effetti diversi quando il cursore passa sopra un link. Guarderemo quindi altri esempi legati alla pseudo-classe :hover.

Esempio 1a: Spazio tra i caratteri

Come ricorderai dalla lezione 5, lo spazio tra i caratteri può essere modificato usando la proprietà letter-spacing. E' possibile applicare questa proprietà ai link per creare degli effetti speciali:

	
	a:hover {
		letter-spacing: 10px;
		font-weight:bold;
		color:red;
	}

Visualizza l'esempio

Esempio 1b: MAIUSCOLE e minuscole

Nella lezione 5 abbiamo visto anche la proprietà text-transform che permette di rendere le lettere maiuscole o minuscole. Anche questa proprietà può essere usata per creare un effetto particolare sui link:

	
	a:hover {
		text-transform: uppercase;
		font-weight:bold;
		color:blue;
		background-color:yellow;
	}

Visualizza l'esempio

I due esempi sopra ti danno un'idea delle infinite possibilità che si hanno nel combinare insieme le diverse proprietà. Puoi creare i tuoi effetti speciali - prova!

Esempio 2: Elimina la sottolineatura dai link

Una domanda molto frequente è come si fa per eliminare la sottolineatura dai link?

Dovresti considerare attentemente se è necessario eliminare la sottolineatura dei link poichè questo potrebbe diminuire significativamente l'usabilità del tuo sito web. Le persone sono abituate a vedere i link sottolineati di blu e sanno che possono cliccarci sopra. Perfino mia madre lo sa! Se cambi la sottolineatura e il colore dei link ci potrebbero essere dei casi in cui l'utente si potrebbe confondere e quindi non sfruttare a pieno tutti i benefici del contenuto del tuo sito.

Detto questo è molto semplice eliminare la sottolineatura dei link. Come ricorderai dalla lezione 5, la proprietà text-decoration può essere usata per definire se volgiamo o meno la sottolineatura del testo. Per rimuovere la sottolineatura devi semplicemente definire il valore di text-decoration a none.

	
	a {
		text-decoration:none;
	}

In alternativa puoi definire la proprietà text-decoration insieme alle altre proprietà per tutte le quattro pseudo-classi.

	
	a:link {
		color: blue;
		text-decoration:none;
	}

	a:visited {
		color: purple;
		text-decoration:none;
	}

	a:active {
		background-color: yellow;
		text-decoration:none;
	}

	a:hover {
		color:red;
		text-decoration:none;
	}

Visualizza l'esempio

Riepilogo

In questa lezione hai imparato ad usare le pseudo-classi insieme ad alcune delle proprietà viste nelle lezioni precedenti. Questo dovrebbe darti un'idea di alcune delle possibilità fornite dai CSS.

Nella prossima lezione ti insegneremo a definire le proprietà per elementi specifici o gruppi di elementi.

Lezione07: Identificazione e gruppi di elementi (class e id)

Qualche volta potrsti voler applicare uno stile speziale ad un particolare elemento o ad un gruppo particolare di elementi. In questa lezione vedremo in dettaglio come puoi usare class e id per specificare le proprietà a degli elementi selezionati.

Come fai per colorare un titolo particolare in modo diverso rispetto a tutti i titoli del tuo sito web? Come fai per raggruppare i tuoi link in diverse categorie e dare ad ogni categoria uno stile speciale? Questi sono solo alcuni esempi di domande a cui rispondere in questa lezione.

Raggruppare gli elementi con class

Diciamo che abbiamo due liste di link di diversi grappoli di uva usati per il vino bianco e per il vino rosso. Il codice HTML sarà così:

	
	<p>Uva per il vino bianco:</p>
	<ul>
	<li><a href="ri.htm">Riesling</a></li>
	<li><a href="ch.htm">Chardonnay</a></li>
	<li><a href="pb.htm">Pinot Blanc</a></li>
	</ul>

	<p>uva per il vinoo rosso:</p>
	<ul>
	<li><a href="cs.htm">Cabernet Sauvignon</a></li>
	<li><a href="me.htm">Merlot</a></li>
	<li><a href="pn.htm">Pinot Noir</a></li>
	</ul>

Visualizza l'esempio

Ora vogliamo che i link al vino bianco siano gialli, e i link al vino rosso siano rossi mentre i restanti link della pagina rimarranno blu.

Per ottenere questo dividiamo i link in due categorie assegnando una classe a ciascun link usando l'attributo class.

Cerchiamo di definire alcune classi nell'esempio sotto:

	
<p>Uva per il vino bianco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Uva per il vino rosso:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>

In futuro possiamo definire delle proprietà particolari per i link che appartengono rispettivamente a "whitewine"e a "redwine".

	
	a {
		color: blue;
	}

	a.whitewine {
		color: #FFBB00;
	}

	a.redwine {
		color: #800000;
	}

Visualizza l'esempio

Come mostrato nell'esempio puoi definire le proprietà per tutti gli elementi che appartengono a certe classi usando .nomedellaclasse nel foglio di stile del documento.

Identificativo dell'elemento con id

Oltr a raggruppare gli elementi potrsti aver bisogno di identificare un unico elemento. Questo viene fatto usando l'attributo id.

La cosa speciale con l'attributo id è che non ci possono essere due elementi con lo stesso id nello stesso documento. Ogni id deve essere unico, altrimenti dovresti usare l'attributo class. adesso vediamo un esempio sui possibili utilizzi di id:

	
	<h1>Capitolo 1</h1>
	...
	<h2>Capitolo 1.1</h2>
	...
	<h2>Capitolo 1.2</h2>
	...
	<h1>Capitolo 2</h1>
	...
	<h2>Capitolo 2.1</h2>
	...
	<h3>Capitolo 2.1.2</h3>
	...

L'esempio sopra è un classico per molti documenti suddivisi in capitoli o paragrafi. Sarebbe naturale assegnare un id a ciascun capitolo come mostrato di seguito:

	
	<h1 id="c1">Capitolo 1</h1>
	...
	<h2 id="c1-1">Capitolo 1.1</h2>
	...
	<h2 id="c1-2">Capitolo 1.2</h2>
	...
	<h1 id="c2">Capitolo 2</h1>
	...
	<h2 id="c2-1">Capitolo 2.1</h2>
	...
	<h3 id="c2-1-2">Capitolo 2.1.2</h3>
	...

Diciamo che il titolo per il capitolo 1.2 deve essere in rosso. Questo può essere fatto con i CSS:

	
	#c1-2 {
		color: red;
	}

Visualizza l'esempio

Come mostrato nell'esempio sopra puoi definire le proprietà di uno speficio elemento usando #id nel foglio di stile del documento.

Riepilogo

In questa lezione abbiamo imparato che con l'uso dei selettori class e id, si possono definire delle proprietà per elementi specifici.

Nella prossima lezione vedremo in dettaglio due elementi HTML molto usati con i CSS: <span> e <div>.

Lezione08: 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;
	}

Visualizza l'esempio

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;
	}

Visualizza l'esempio

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.

Lezione09: Il modello box

Nei CSS il modello box (o contenitore) descrive tutti i contenitori che sono stati generati dagli elementi HTML. Il modello box contiene anche le opzioni dettagliate riguardanti margini, bordi, riempimenti e contenuto per ciascun elemento. Il diagramma sotto ti mostra come viene costruito il modello box:

Il modello box nei CSS

La figura sopra potrebbe sembrare un po' troppo teorica, quindi cerchiamo di usare il modello in un vero e proprio caso con un titolo e del testo. L'HTML per il nostro esempio è (da Universal Declaration of Human Rights):

	
	<h1>Article 1:</h1>

	<p>All human beings are born free
	and equal in dignity and rights.
	They are endowed with reason and conscience
	and should act towards one another in a
	spirit of brotherhood</p>

Aggiungendo dell colore e informazioni per i font l'esempio potrebbe presentarsi come mostrato di seguito:

L'esempio contiene due elementi: <h1> e <p>. Il modello box per i due elementi può essere illustrato come segue:

Nonostante possa sembrare un pochino complicato la figura mostra come ogni elemento HTML è circondato da contenitori. Quei contenitori che possiamo sistemare usando i CSS.

When you have finished these two lessons, you will master the box model and be able to layout your documents much finer and more precise than in the old fashion using tables in HTML.

Riepilogo

In questa lezione ti abbiamo introdotto al modello box. Nelle prossime tre lezioni vedremo più da vicino come creare e controllare gli elementi in un modello box.

Lezione10: Margini e riempimenti

Nella lezione precedente hai visto una introduzione del modello box. In questa lezione ti mostreremo come cambiare la presentazione degli elementi definendo le proprietà margin e padding.

Definire i margini in un elemento

Un elemento ha quattro lati: destro, sinistro, alto e basso. margin indica la distanza di ciascuno dei lati dall'elemento vicino (o dai bordi del documento). Vedi il grafico nella lezione 9.

Come primo esempio vedremo come definire i margini per il documento in sè, cioè per l'elemento <body>. La figura sotto mostra come vogliamo che siano i margini delle nostre pagine.

Il codice CSS per fare ciò sarà così:

	
	body {
		margin-top: 100px;
		margin-right: 40px;
		margin-bottom: 10px;
		margin-left: 70px;
	}

O potrsti scegliere un modo ancora più elegante:

	
	body {
		margin: 100px 40px 10px 70px;
	}

Visualizza l'esempio

Puoi definire i margini allo stesso modo in quasi ogni elemento. Per esempio, potrmmo scegliere di definire i margini per tutti i paragrafi di testo marcati con l'elemento <p>:

	
	body {
		margin: 100px 40px 10px 70px;
	}

	p {
		margin: 5px 50px 5px 50px;
	}

Visualizza l'esempio

Definire il padding in un elemento

Padding può essere inteso anche come "riempimento". Questo ti fa capire meglio che il padding non influisce sulla distanza dell'elemento dagli altri elementi, ma definisce soltanto la distanza interna tra il bordo e il contenuto dell'elemento.

L'uso di padding può essere illustrato guardando un semplice esempio dove tutti i titoli hanno un colore di sfondo:

	
	h1 {
		background: yellow;
	}

	h2 {
		background: orange;
	}

Visualizza l'esempio

Definendo il padding per i titoli puoi stabilire quanto riempimento ci deve essere intorno al testo per ogni titolo:

	
	h1 {
		background: yellow;
		padding: 20px 20px 20px 80px;
	}

	h2 {
		background: orange;
		padding-left:120px;
	}

Visualizza l'esempio

Riepilogo

Adesso sei pronto per diventare padrone del modello box dei CSS. Nella prossima lezione daremo vedremo più da vicino come stabilire il colore dei bordi e come regolare i tuoi elementi.

Lezione11: Bordi

I bordi possono essere usati per molte cose, per esempio come elemento decoratico o per sottolineare una separazione fra due oggetti. I CSS ti forniscono opzioni infinite nell'utilizzo dei bordi nelle tue pagine.

Spessore dei bordi [border-width]

Lo spessore dei bordi viene definito con la proprietà border-width, che può avere valore thin (sottile), medium (medio), e thick (spesso), o un valore numerico indicato in pixel. La figura sotto illustra come:

Colore dei bordi [border-color]

La proprietà border-color definisce il colore del bordo. I valori sono i normali valori per i colori, come per esempio "#123456", "rgb(123,123,123)" o "yellow".

Tipi di bordi [border-style]

E' possibile scegliere fra diversi tipi di bordi. Sotto sono mostrati 8 diversi tipi di bordi così come vengono interpretati da Internet Explorer 5.5. Tutti gli esempi sono mostrati con colore "gold" e spessore "thick", ma possono essere chiaramente mostrati con altri colori e altri spessori.

Quando non vuoi nessun bordo puoi usare i valori none o hidden.

Esempi di definizione di bordi

Le tr proprietà descritte sopra possono essere messe insieme in ogni elemento e produrre pertanto bordi diversi. Per mostrare questo vedremo un documento dove vengono abbiamo definito bordi diversi per <h1>, <h2>, <ul> e <p>. Il risultato potrebbe non essere così gradevole ma mostra bene alcune delle molte possibilità:

	
	h1 {
		border-width: thick;
		border-style: dotted;
		border-color: gold;
	}

	h2 {
		border-width: 20px;
		border-style: outset;
		border-color: red;
	}

	p {
		border-width: 1px;
		border-style: dashed;
		border-color: blue;
	}

	ul {
		border-width: thin;
		border-style: solid;
		border-color: orange;
	}

Visualizza l'esempio

E' possile definire anche delle proprietà speciali per i bordi top-, bottom-, right- o left-. L'esempio sotto mostra come:

	
	h1 {
		border-top-width: thick;
		border-top-style: solid;
		border-top-color: red;

		border-bottom-width: thick;
		border-bottom-style: solid;
		border-bottom-color: blue;

		border-right-width: thick;
		border-right-style: solid;
		border-right-color: green;

		border-left-width: thick;
		border-left-style: solid;
		border-left-color: orange;
	}

Visualizza l'esempio

Raggruppamento [border]

Come abbiamo fatto anche per altri elementi, è possibile raggruppare in una molte proprietà usando border. Vediamo come fare con un esempio:

	
	p {
		border-width: 1px;
		border-style: solid;
		border-color: blue;
	}

Può essere raggruppato in:

	
	p {
		border: 1px solid blue;
	}

Riepilogo

In questa lezione hai imparato le infinite opzioni che i CSS ti offrono quando utilizzi i bordi nelle pagine.

Nella prossima lezione vedremo come definire le dimensioni del modello box - height e width.

Lezione12: Height e width

Fino ad ora non ci siamo preoccupati molto delle dimensioni degli elementi con cui abbiamo lavorato. In questa lezione vedremo come si possono definire facilmente l'altezza e la larghezza di un elemento.

width
height

Definire la larghezza [width]

Con la proprietà width- puoi definire la larghezza di un elemento.

L'esempio semplice riportato sotto ci fornisce un contenitore all'interno del quale è possibile digitare del testo:

	
	div.box {
		width: 200px;
		border: 1px solid black;
		background: orange;
	}

Visualizza l'esempio

Definire l'altezza [height]

Nota come nell'esempio sopra l'altezza del contenitore viene definita dallo stesso contenuto. Con la proprietà height puoi definire tu stesso l'altezza del contenitore. Come esempio proviamo a fare un contenitore alto 500px:

	
	div.box {
		height: 500px;
		width: 200px;
		border: 1px solid black;
		background: orange;
	}

Visualizza l'esempio

Riepilogo

Le Lezioni 9, 10, 11 e 12 ti hanno introdotto al modello box dei CSS. Come potrai vedere il modello box ti fornisce molte nuove opzioni. Fino ad ora potresti aver usato delle tabelle in HTML per creare il tuo layout, ma con i CSS e il modello box adesso dovresti essere capace di costruire layout più eleganti e precisi, conformi alle raccomandazioni del W3C.

Lezione13: Elementi flottanti (floats)

Un elemento può flottare a destra o a sinistra usando la proprietà float. Questo vuol dire che il box e il suo contenuto flotttano entrambi a destra o a sinistra del documento (o del box che li contiene) (vedi la lezione 9 per una descrizione del modello box). La figura che segue illustra il principio:

Se per esempio vogliamo avere un testo che si adagia intorno all'immagine, il risultato dovrebbe essere come quello che segue:

A left-floating box with a picture and text wrapped around it

Come si fa?

Il codice HTML dell'esempio sopra appare così:

	
	<div id="picture">
		<img src="bill.jpg" alt="Bill Gates">
	</div>

	<p>causas naturales et antecedentes, 
	idciro etiam nostrarum voluntatum...</p>

Per avere una immagine flottante a sinistra e il testo che la circonda, devi solo definire l'ampiezza (width) del box che circonda l'immagine e quindi fissare a left la proprietà float:

	
	#picture {
		float:left;
		width: 100px;
	}

Visualizza l'esempio

Un altro esempio : colonne

La proprietà float può essere usata anche per le colonne di un documento. Per creare le colonne devi semplicemente strutture le stesse colonne nel codice HTML con l'elemento <div>, come mostrato di seguito:

	
	<div id="column1">
		<p>Haec disserens qua de re agatur
		et in quo causa consistat non videt...</p>
	</div>

	<div id="column2">
		<p>causas naturales et antecedentes, 
		idciro etiam nostrarum voluntatum...</p>
	</div>

	<div id="column3">
		<p>nam nihil esset in nostra 
		potestate si res ita se haberet...</p>
	</div>

Ora definisce la larghezza desiderata delle colonne per esempio al 33%, dopodichè, fissa semplicemente la proprietà float per ogni colonna a left:

	
	#column1 {
		float:left;
		width: 33%;
	}

	#column2 {
		float:left;
		width: 33%;
	}

	#column3 {
		float:left;
		width: 33%;
	}

Visualizza l'esempio

float può assumere i seguenti valori left, right o none.

La proprietà clear

La proprietà clear viene usata per controllare come si dovrebbero comportare gli elementi che seguono elementi flottanti.

Per default gli elementi successivi si muovono in modo da riempire lo spazio disponibile lasciato libero quando un box viene flottato da un lato. Guarda l'esempio sotto dove il testo si muove automaticamente accanto all'immagine di Bill Gates.

La proprietà clear può assumere i valori left, right, both o none. Il principio è che, se per esempio clear è fissato a both per un box, il bordo superiore del box starà sempre sotto il bordo inferiore del possibile box flottante che viene sopra.

	
	<div id="picture">
		<img src="bill.jpg" alt="Bill Gates">
	</div>

	<h1>Bill Gates</h1>

	<p class="floatstop">causas naturales et antecedentes, 
	idciro etiam nostrarum voluntatum...</p>

Per evitare che il testo flotti vicino alla figura possiamo aggiungere:

	
	#picture {
		float:left;
		width: 100px;
	}

	.floatstop {
		clear:both;
	}

Visualizza l'esempio

Riepilogo

La proprietà float viene usata in molte situazioni, spesso insieme al posizionamento. Nella prossima lezione vedremo in dettaglio come posizioanre un box, sia in maniera relativa che assoluta.

Lezione14: Posizionamento degli elementi

Con il posizioanmento del CSS puoi sistemare un elemento esattamente dove vuoi all'interno della pagina. Insieme alla proprietà float (vedi la lezione 13), il posizionamento ti permette molte possibilità per creare un layout preciso e avanzato.

In questa lezione discuteremo:

Il principio del posizionamento nei CSS

Immagina una finestra di browser come un sistema di coordinate:

Il principio alla base del posizionamento è che puoi posizionare ciascun box in qualsiasi posto del sistema di coordinate.

Diciamo che vogliamo posizionare un titolo. Usando il modello box (vedi la lezione 9) il titolo apparirà come segue:

Se vogliamo posizionare questo titolo a 100px di distanza dal bordo superiore del documento e a 200px di distanza dal bordo sinistro, dovremmo scrivere il seguente codice CSS:

	
	h1 {
		position:absolute;
		top: 100px;
		left: 200px;
	}

Il risultato sarà il seguente:

Come puoi vedere il posizionamento dei CSS è una tecnica molto precisa per sistemare gli elementi. E' molto più facile che cercare di usare tabelle, immagini trasparenti o altre cose.

Posizionamento assoluto

Un elemento posizionato in maniera assoluta non avrò nessuno spazio nell documento. Questo significa che non lascia nessuno spazio dopo che è stato posizionato.

Per posizionare un elemento in maniera assoluta la proprietà position deve avere valore absolute. In seguito puoi usare proprietà left, right, top, e bottom per sistemare i box.

Come esempio di posizionamento assoluto abbiamo scelto di sistemare 4 box in ciascun angolo del documento:

	
	#box1 {
		position:absolute;
		top: 50px;
		left: 50px;
	}

	#box2 {
		position:absolute;
		top: 50px;
		right: 50px;
	}

	#box3 {
		position:absolute;
		bottom: 50px;
		right: 50px;
	}

	#box4 {
		position:absolute;
		bottom: 50px;
		left: 50px;
	}

Visualizza l'esempio

Posizionamento relativo

Per posizioanre un elemento in maniera relativa la proprietà position deve avere valore relative. La differenza tra il posizionamento assoluto e quello relativo è su come viene calcolata la posizione.

La posizione di un elemento posizionato in maniera relativa viene calcolato dalla sua posizione originale nel documento. Questo significa che sposti l'elemento a destra, a sinistra, in alto o in basso. In questo un elemento avrà sempre uno spazio nel documento dopo il suo posizionamento.

Come esempio di posizionamento relativo cerchiamo di posizionare tre immagini in relazione alla loro posizione originaria nella pagina. Nota come le immagini lasciano dello spazio vuoto nella loro posizione originaria all'interno del documento:

	
	#dog1 {
		position:relative;
		left: 350px;
		bottom: 150px;
	}
	#dog2 {
		position:relative;
		left: 150px;
		bottom: 500px;
	}

	#dog3 {
		position:relative;
		left: 50px;
		bottom: 700px;
	}

Visualizza l'esempio

Riepilogo

Nelle due lezioni precedenti hai imparato come far flottare e come posizionare gli elementi. Questi due metodi ti danno molte possibilità per costruire le tue pagine senza aver bisogno di nessuno dei vecchi metodi, come le tabelle o le immagini trasparenti. Usa i CSS. Sono molto più precisi, di forniscono molti più vantaggi e sono anche molto semplici da mantenere.

Lezione15: Layer su layer con lo z-index (Layer)

I CSS lavorano su tre dimensioni - altezza, larghezza e profondità. Abbiamo già visto le prime due dimensioni nella precedente lezione. In questa lezione impareremo come fare in modo che diversi elementi diventino un layer. In breve questo fornisce l'ordine con cui gli elementi si sovrappongono uno sull'altro.

A questo proposito assegna ad ogni elemento un numero (z-index). Il sistema è che un elemento con il numero più alto si sovrappone all'elemento con numero inferiore.

Diciamo che stiamo giocando a poker e che abbiamo una scala reale. La nostra mano può essere presentata in modo che ogni carta riceva uno z-index:

In questo caso i numeri si seguono uno dopo l'altro (1-5) ma lo stesso risultato si potrebbe ottenere usando 5 numeri diversi. La cosa importante è la sequenza cronologica dei numeri (l'ordine).

Il codice nell'esempio delle carte sarà così:

	
	#ten_of_diamonds {
		position: absolute;
		left: 100px;
		top: 100px;
		z-index: 1;
	}

	#jack_of_diamonds {
		position: absolute;
		left: 115px;
		top: 115px;
		z-index: 2;
	}

	#queen_of_diamonds {
		position: absolute;
		left: 130px;
		top: 130px;
		z-index: 3;
	}

	#king_of_diamonds {
		position: absolute;
		left: 145px;
		top: 145px;
		z-index: 4;
	}

	#ace_of_diamonds {
		position: absolute;
		left: 160px;
		top: 160px;
		z-index: 5;
	}

Visualizza l'esempio

Il metodo è relativamente semplice ma le possibilità sono tantissime. Puoi posizionare le immagini sul testo o il testo sopra il testo, ecc.

Riepilogo

I layer possono essere usati in molte situazioni. Per esempio cerca di usare z-index per creare effetti nei titoli invece di fare delle immagini. Da una parte è più veloce caricare del testo e dall'altra fornisce una più alta potenzialità di essere considerato da un motore di ricerca.

Lezione16: Standard web e validazione

W3C sta per World Wide Web Consortium, che è una organizzazione indipendente che gestisce gli standard su web (cioè HTML, CSS, XML e molti altri). Microsoft, The Mozilla Foundation e molte altre organizzazioni fanno parte del W3C e concordano sugli sviluppi futuri degli standard.

Se hai già lavorato un po' come web designer, probabilmente sai quanto possono essere grandi le differenze di presentazione di una pagina tra un browser e l'altro. Creare pagine web che possono essere visualizzate in Mozilla, Internet Explorer, Opera e il resto dei browser esistenti, può essere molto frustrante e far perdere un sacco di tempo.

L'idea di avere degli standard è quella di accettare un denominatore comune su come utilizzare le tecnologie web. Questo significa che osservando gli standard uno sviluppatore web ha la certezza che quello che sta facendo funzionerà in modo più appropriato nella maggior parte delle diverse piattaforme. Pertanto noi ti raccomandiamo di appoggiarti al lavoro svolto dal W3C e di validare i tuoi CSS in modo da osservare sempre gli standard.

Il validatore per i CSS

Per facilitare l'osservanza degli standard per i CSS, il W3C ha creato un validatore che legge il tuo foglio di stile e ti ritorna una lista di errori o avvertimenti, nel caso in cui il tuo CSS non sia stato validato.

Per facilitare la validazione del tuo foglio di stile puoi direttamente collegarti da questa pagina web. Nello spazio sotto sostituisci semplicemente la URL con la URL del tuo foglio di stile e clicca il pulsante per validare. Sarai quindi informato dal sito del W3C se sono stati trovati errori.

Se il validatore non trova nessun errore, ti verrà mostrata la figura riportata di seguito, che puoi inserire sul tuo sito web come testimonianza del fatto che stai usando un codice validato:

Il validatore si trova anche a questo indirizzo: http://jigsaw.w3.org/css-validator/