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.

Visualizza la stessa pagina ma a cui è stato applicato un foglio di stile

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 lista ordinata

Cani
Gatti
Polli

Ed ecco inveve un esempio di lista non ordinata

Cani
Gatti
Polli

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> <TITLE> Esempio utilizzo foglio di stile </TITLE> </HEAD> <BODY> <H1> 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> <P> <A HREF="FoglioStile1.html">Visualizza</A> la stessa pagina ma a cui è stato applicato un foglio di stile </P> <HR width="40%"> <P> <H1> Titolo di livello 1 </H1> <H2> Titolo di livello 2 </H2> <H4> Titolo di livello 3 </H3> <H4> Titolo di livello 4 </H4> <H5> Titolo di livello 5 </H5> <H6> Titolo di livello 6 </H6> </P> <P> Ecco invece in esempio di lista ordinata <OL> <LI>Cani <LI>Gatti <LI>Polli </OL> </P> <P> Ed ecco inveve un esempio di lista non ordinata <UL> <LI>Cani <LI>Gatti <LI>Polli </UL> </P> </BODY> </HTML>

Il foglio di stile della prima pagina

BODY { background-color: #FFFFCC } H1, H2, H3, H4, H5, H6 { font-family: sans-serif; font-weight: bold; color: #996666; } H1 { font-size: 35pt; } H2 { font-size: 30pt; } H3 { font-size: 25pt; } H4 { font-size: 20pt; } H5 { font-size: 15pt; } H6 { font-size: 10pt; } P { font-family: "Garamond", serif; font-size: 12pt; } OL LI { font-family: "Courier", sans-serif; list-style-type: square; } UL LI { font-family: "Arial", sans-serif; list-style-type: square; }

Il foglio di stile della seconda pagina

BODY { background-color: #CFFCCC } H1, H2, H3, H4, H5, H6 { font-family: sans-serif; font-weight: bold; color: #999999; text-align: center; } H1 { font-size: 10pt; } H2 { font-size: 15pt; } H3 { font-size: 20pt; } H4 { font-size: 25pt; } H5 { font-size: 30pt; } H6 { font-size: 35pt; } P { font-family: "Garamond", serif; font-size: 12pt; } UL LI { font-family: "Courier", sans-serif; list-style-type: square; } OL LI { font-family: "Arial", sans-serif; list-style-type: square; }