27
I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

Embed Size (px)

Citation preview

Page 1: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

I FOGLI DI STILECSS

(Cscading Style Sheet

Fogli di stile a cascata)

Page 2: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

INTRODUZIONE

• I FOGLI DI STILE DANNO LA POSSIBILITA' DI CURARE L'ASPETTO DELLA PAGINA FACILITANDO LA DEFINIZIONE DEL LAYOUT

• CONSENTONO DI SEPARARE NETTAMENTE IL LAVORO CHE ORGANIZZA IL CONTENUTO DEL DOCUMENTO DALL'ATTIVITA' CHE DEFINISCE L'ASPETTO DELLA PAGINA WEB.

Page 3: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

•I FOGLI DI STILE CONTENGONO LE SPECIFICHE PER L'ASPETTO ESTERIORE DELLA PAGINA E LASCIANO NEL FILE HTML SOLO GLI OGGETTI CHE COMPONGONO IL DOCUMENTO.QUESTO CI PERMETTE DI DISTRIBUIRE IL MEDESIMO LAYOUT SU DIVERSE PAGINE.

ECCO COME DEFINIRE UNO STILE PER POTER PRESENTARE IN MODO CENTRATO IL CONTENUTO DI UN DOCUMENTO

Page 4: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

<HTML>

<HEAD>

<TITLE> PRIMA PAGINA CSS</TITLE>

<STYLE TYPE="text/css">

<!--BODY { text-align:center } -->

</STYLE>

</HEAD>

<BODY>

<H1>DIVINA COMMEDIA</H1>

<H2>INFERNO</H2>

Nel mezzo del cammin di nostra vita<BR>mi ritrovai per una selva oscuta<BR>che la diritta via era smarrita<BR>

ah quanto a dir qual era è cosa dura<BR>............

</BODY>

</HTML>

Page 5: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

LE SPECIFICHE DELLO STILE SONO:

1) INSERITE NELL'INTESTAZIONE <HEAD>

2) RACCHIUSE TRA I TAG <STYLE> E </STYLE>

3) PER IL TAG STYLE E' PRESENTE L'ATTRIBUTO TYPE ="TEXT/CSS" CHE INDICA CHE LE SPECIFICHE SONO IN FORMATO TESTO E RISPECCHIANO LA SINTASSI DI CSS

4) LO STYLE DA APPLICARE E' RACCHIUSO TRA <!--E -->

5) ALL'INTERNO DI QUESTI DUE SIMBOLI SI INDICA LA PARTE DI DOCUMENTO A CUI APPLICARE LO STILE (NEL NOSTRO CASO BODY)

6) LO STILE RICHIESTO E' RACCHIUSO TRA PARENTESI GRAFFE

{ text-align:center }

7) LO STILE E' APPLICATO SU TUTTO IL DOCUMENTO: SIA SULL'INTESTAZIONE SIA SUL TESTO.

Page 6: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

NELL'ESEMPIO PRECEDENTE E' MOSTRATO UN FOGLIO DI STILE INSERITO NELL'HEAD DEL DOCUMENTO.

ESISTE ANCHE LA POSSIBILITA' CHE PERMETTE DI DEFINIRLO IN UN FILE ESTERNO.

QUESTA POSSIBILITA' E' MOLTO UTILE SE SI DESIDERA SFRUTTARE UN UNICO STILE DA ASSOCIARE ALLE DIVERSE PAGINE DI UN SITO.

SE LA DEFINIZIONE DEL FOGLIO DI STILE RISIEDE SU UN FILE ESTERNO SI PARLA DI FOGLIO COLLEGATO. TALE FOGLIO E' UN FILE TESTO A CUI VIENE ASSEGNATA L'ESTENSIONE .CSS.

IL FILE HTML CHE LO UTILIZZA DEVE INSERIRE UN COLLEGAMENTO AL FILE CSS ATTRAVERSO IL TAG <LINK> CHE VIENE POSTO NEL HEAD DEL FILE HTML.

Page 7: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

TAG <LINK> COLLEGAMENTO PER CSS

ATTIBUTI:

REL= "STYLESHEET" TIPO DI COLLEGAMENTO DIRETTO AL FILE

TYPE="TEXT/CSS" SPECIFICHE DEL FILE CSS INDICA IL TIPO DI FILE

HREF=URL INDIRIZZO DELLA PAGINA CSS

PER REALIZZARE LA PAGINA WEB DELL'ESEMPIO PRECEDENTE UTILIZZANDO UN FOGLIO DI STILE COLLEGATO SI PROCEDE COSI’:

SI CREA UN FILE CSS:

NOME DEL FILE :ESEMPIO1.CSS

CONTENUTO: BODY { text-align:center }

Page 8: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

FILE HTML:

<HTML>

<HEAD>

<TITLE> PRIMA PAGINA CSS ESTERNA COLLEGATA</TITLE>

<LINK REL = "stylesheet" TYPE ="text/css" HREF ="esempio1.css">

</HEAD>

<BODY>

<H1>DIVINA COMMEDIA</H1>

<H2>INFERNO</H2>

Nel mezzo del cammin di nostra vita<BR>mi ritrovai per una selva oscuta<BR>che la diritta via era smarrita<BR>

ah quanto a dir qual era è cosa dura<BR>............

</BODY>

</HTML>

Page 9: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

RISULTATORISULTATO

DIVINA COMMEDIA

INFERNO

Nel mezzo del cammin di nostra vita

mi ritrovai per una selva oscurache la diritta via era smarrita

ah quanto a dir qual era è cosa dura

............

Page 10: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

SINTASSI E REGOLE DEI FOGLI DI STILE:

LE RIGHE CHE DEFINISCONO UNO STILE SONO COMPOSTE DAI SEGUENTI ELEMENTI:

1) IL TAG CHE INDIVIDUA UNA PARTE DEL DOCUMENTO SENZA PARENTESI ANGOLARE AD ESEMPIO:

BODY TUTTO IL DOCUMENTO

H1 TITOLO 1

P PARAGRAFO

2) IL CARATTERE PARENTESI GRAFFA APERTA CHE INTRODUCE GLI ATTRIBUTI PER LA DEFINIZIONE DELLO STILE

Page 11: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

3) IL NOME DI UN'ATTIBUTO (AD ESEMPIO, TEXT-ALIGN) CHE DEVE ESSERE SEGUITO DAI DUE PUNTI(:); QUESTO INDICA AL BROWSER CHE IL VALORE CHE SEGUE I DUE PUNTI DEVE ESSERE ASSEGNATO ALL'ATTRIBUTO

4) SE GLI ATTIBUTI SONO PIU' DI UNO DEVONO ESSERE SEPARATI DAL PUNTO E VIRGOLA(;)

5) IL CARATTERE PARENTESI GRAFFA CHE TERMINA LA LISTA DEGLI ATTRIBUTI

Page 12: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

GLI ATTRIBUTI DI TIPO FONT

PER MODIFICARE L’ASPETTO DEL TESTO:

LA DIMENSIONE DEL FONT: FONT-SIZE

PUO’ ESSERE SEGUITO DAL VALORE CHE INDICA AL DIMENSIONE DEL CARATTERE ESPRESSA IN

PUNTI TIPOGRAFICI ED E’ INDICATO CON L’UNITA’ DI MISURA PT.

L’ASPETTO DEL FONT: FONT-FAMILY

DEFINISCE LA FORMA DEL CARATTERE, LA GAMMA DEI DIVERSI FONT E’ MOLTO AMPIA E

VARIA DA BROWSER A BROWSER.

Page 13: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

ESEMPIO DI FILE COLLEGATO

NOME DEL FILE :FOGLIO.CSS

CONTENUTO:

H1{font-family: Arial;

font-size:23px;

color:#0099cc;}

H2{font-family: Verdana;

font-size:20px;

color:yellow;}

P {font-family: Verdana;

font-size:23px;

color:red;}

BODY { text-align:center }

Page 14: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

FILE HTML:

<HTML>

<HEAD>

<TITLE>CSS collegati</TITLE>

<LINK REL="stylesheet" HREF="foglio.css" TYPE="text/css">

</HEAD>

<BODY>

<H1>i fogli di stile collegati</H1>

<H2 >i fogli di stile</H2>

<H1 >LO STESSO STILE</H1>

<P>

Questo è un paragrafo col foglio di stile collegato

</P>

</BODY>

</HTML>

Page 15: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

Risultato

i fogli di stile collegati

i fogli di stile

LO STESSO STILEQuesto è un paragrafo col foglio di stile collegato

Page 16: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

LE CLASSI

E’ POSSIBILE DEFINIRE IN UN FILE DI STILE VARI FORME DI VISUALIZZAZIONE, CIASCUNA DI ESSE PRENDE IL NOME DI CLASSE E PUO’ ESSERE RICHIAMATA IN UN FILE HTML CON L’ATTRIBUTO CLASS.

L’ATTRIBUTO CLASS PUO’ ESSERE UTILIZZATO DA VARI TAG E PERMETTE DIVERSE POSSIBILITA’ DI STRUTTURAZIONE DELLE PAGINE WEB.

Page 17: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

ESEMPIO

DEFINIRE DUE CLASSI DI STILE E APPLICARLE A DUE PARAGRAFIDISTINTI:FILE CSS:NOME FILE : ESEMPIO.CSSCONTENUTO:.corsivo{ font -size:24px; font-style :”italic”;Color:”yellow”;}.scuro{ font-size:30px; font-weght:”bold”Color:”red”}

Page 18: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

<HTML>

<HEAD>

<TITLE>CSS collegati</TITLE>

<LINK REL="stylesheet" HREF="esempio.css" TYPE="text/css">

</HEAD>

<BODY>

<P class="corsivo">

Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim Barners-Lee

</P>

<P class="scuro">

Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim Barners-Lee

</P>

</BODY>

</HTML>

Page 19: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

RISULTATO

Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim Barners-Lee

Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim Barners-Lee

Page 20: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

LE DUE CLASSI SONO PRESENTATE NEL FOGLIO CSS CON UN NOME A SCELTA E IL NOME E’ PRECEDUTO DEL CARATTERE (.).

I DUE PARAGRAFI DELL’ESEMPIO SONO INTRODOTTI DAL TAG <P > A CUI E’ ASSOCIATO L’ATTIBUTO CLASS; LA PRIMA VOLTA VIENE CHIAMATA LA CLASSE “corsivo”, LA SECONDA VOLTA LA CLASSE “scuro”.

NEL PRECEDENTE ESEMPIO SONO STATE DEFINITI DUE CLASSI DEL FILE HTML SLEGATE DA QUALSIASI OGGETTO; TUTTAVIA E’ POSSIBILE DEFINIRE UNA CLASSE COLLEGATA A UNA PARTICOLARE COMPONENTE DI HTML.

NELL’ESEMPIO ILLUSTRATO QUI DI SEGUITO VENGONO DEFINITE QUATTRO CLASSI ASSOCIATE AL TAG <P>:

GLI ATTIBUTI MOSTRATI NELL’ESEMPIO SONO:ATTIBUTO DESCRIZIONE

Text-decoration:underline testo sottolineato

Letter-spacing:6pt distanza tra le lettere

Line-height:24pt altezza dell’interlinea

Text-indent:24pt rientro della prima riga

Page 21: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

FILE CSS

Nome file: esempioogg.css

CONTENUTO:

body{font-size:14pt}

p.1{Text-decoration:underline }

p.2{Letter-spacing:6pt }

p.3{Line-height:24pt}

p.4{Text-indent:24pt }

Page 22: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)

FILE HTML (CSS_CON_OGG.HTML)

<HTML>

<HEAD>

<TITLE>CSS collegati</TITLE>

<LINK REL="stylesheet" HREF="esempioogg.css" TYPE="text/css">

</HEAD>

<BODY>

<P class="1">

Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim Barners-Lee

</P>

<P class="2">

Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim Barners-Lee

</P>

<P class="3">

Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim Barners-Lee

</P>

<P class="4">

Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim Barners-Lee

</P>

</BODY>

</HTML>

Page 23: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)
Page 24: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)
Page 25: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)
Page 26: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)
Page 27: I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)