La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "I FOGLI DI STILE CSS (Cscading Style Sheet Fogli di stile a cascata)"— Transcript della presentazione:

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

2 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.

3 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

4 PRIMA PAGINA CSS DIVINA COMMEDIA INFERNO Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscuta che la diritta via era smarrita ah quanto a dir qual era è cosa dura

5 LE SPECIFICHE DELLO STILE SONO: 1) INSERITE NELL'INTESTAZIONE 2) RACCHIUSE TRA I TAG E 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 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.

6 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 CHE VIENE POSTO NEL HEAD DEL FILE HTML.

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

8 FILE HTML: PRIMA PAGINA CSS ESTERNA COLLEGATA DIVINA COMMEDIA INFERNO Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscuta che la diritta via era smarrita ah quanto a dir qual era è cosa dura

9 RISULTATO DIVINA COMMEDIA INFERNO Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita ah quanto a dir qual era è cosa dura

10 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

11 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

12 GLI ATTRIBUTI DI TIPO FONT PER MODIFICARE LASPETTO 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 LUNITA DI MISURA PT. LASPETTO DEL FONT: FONT-FAMILY DEFINISCE LA FORMA DEL CARATTERE, LA GAMMA DEI DIVERSI FONT E MOLTO AMPIA E VARIA DA BROWSER A BROWSER.

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

14 FILE HTML: CSS collegati i fogli di stile collegati i fogli di stile LO STESSO STILE Questo è un paragrafo col foglio di stile collegato

15 Risultato i fogli di stile collegati i fogli di stile LO STESSO STILE Questo è un paragrafo col foglio di stile collegato

16 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 LATTRIBUTO CLASS. LATTRIBUTO CLASS PUO ESSERE UTILIZZATO DA VARI TAG E PERMETTE DIVERSE POSSIBILITA DI STRUTTURAZIONE DELLE PAGINE WEB.

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

18 CSS collegati 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

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

20 LE DUE CLASSI SONO PRESENTATE NEL FOGLIO CSS CON UN NOME A SCELTA E IL NOME E PRECEDUTO DEL CARATTERE (.). I DUE PARAGRAFI DELLESEMPIO SONO INTRODOTTI DAL TAG A CUI E ASSOCIATO LATTIBUTO CLASS; LA PRIMA VOLTA VIENE CHIAMATA LA CLASSE corsivo, LA SECONDA VOLTA LA CLASSEscuro. 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. NELLESEMPIO ILLUSTRATO QUI DI SEGUITO VENGONO DEFINITE QUATTRO CLASSI ASSOCIATE AL TAG : GLI ATTIBUTI MOSTRATI NELLESEMPIO SONO: ATTIBUTO DESCRIZIONE Text-decoration:underline testo sottolineato Letter-spacing:6pt distanza tra le lettere Line-height:24pt altezza dellinterlinea Text-indent:24pt rientro della prima riga

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

22 FILE HTML ( CSS_CON_OGG.HTML ) CSS collegati 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 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

23

24

25

26

27


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

Presentazioni simili


Annunci Google