Esempio di utilizzo di un foglio di stile

Questa è una pagina HTML creata per far vedere come sia possibile utilizzare un foglio di stile.

Questa pagina è ora visualizzata senza utilizzare alcun foglio di stile e utilizzando un codice HTML "standard" (H1, H2, ecc .. per i titoli, UL, OL, ecc .. per le liste e senza dare indicazioni particolari per i testi.

Sono stati inseriti diversi elementi HTML (titoli, liste, ecc ...) per rendere evidente come i fogli di stile influenzano l'aspetto della pagina mentre il suo contenuto resta inalterato.

Titolo di livello 1

Titolo di livello 2

Titolo di livello 3

Titolo di livello 4

Titolo di livello 5

Titolo di livello 6

Ecco invece in esempio di utilizzo del tag <DIV>

Questo è il testo della divisione. La rappresentazione con il bordo rosso e il testo inclinato e in rosso è stata ottenute utilizzando una classe di stile in cui tali parametri sono stati definiti.

Ecco invece lo stesso efetto ottenuto utilizzando il tag <SPAN>

Questo è il testo della divisione. La rappresentazione con il bordo rosso e il testo inclinato e in rosso è stata ottenute utilizzando una classe di stile in cui tali parametri sono stati definiti.

Scarica il codice della pagina corrente

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//IT" "http://www.w3c.org/TR/REC-html40/frameset.dtd"> <HTML DIR="LTR" LANG="IT">   <HEAD> <LINK rel="stylesheet" href="classistile.css" type="text/css"> <TITLE> Esempio utilizzo foglio di stile </TITLE> </HEAD> <BODY> <H1 class="titoli"> Esempio di utilizzo di un foglio di stile </H1> <P> Questa è una pagina HTML creata per far vedere come sia possibile utilizzare un foglio di stile. </P> <P> Questa pagina è ora visualizzata senza utilizzare alcun foglio di stile e utilizzando un codice HTML "standard" (H1, H2, ecc .. per i titoli, UL, OL, ecc .. per le liste e senza dare indicazioni particolari per i testi. </P> <P> Sono stati inseriti diversi elementi HTML (titoli, liste, ecc ...) per rendere evidente come i fogli di stile influenzano l'aspetto della pagina mentre il suo contenuto resta inalterato. </P> <HR width="40%"> <P> <H1 class="titoli"> Titolo di livello 1 </H1> <H2 class="titoli"> Titolo di livello 2 </H2> <H3 class="titoli"> Titolo di livello 3 </H3> <H4 class="titoli"> Titolo di livello 4 </H4> <H5 class="titoli"> Titolo di livello 5 </H5> <H6 class="titoli"> Titolo di livello 6 </H6> </P> <P> Ecco invece in esempio di utilizzo del tag <DIV><BR> <BR> <DIV class="divisione"> Questo è il testo della divisione. La rappresentazione con il bordo rosso e il testo inclinato e in rosso è stata ottenute utilizzando una classe di stile in cui tali parametri sono stati definiti. </DIV> </P> <P> Ecco invece lo stesso efetto ottenuto utilizzando il tag <SPAN><BR> <BR> <SPAN class="divisione"> Questo è il testo della divisione. La rappresentazione con il bordo rosso e il testo inclinato e in rosso è stata ottenute utilizzando una classe di stile in cui tali parametri sono stati definiti. </SPAN> </P> </BODY> </HTML>