1 / 27

I FOGLI DI STILE

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

kassidy-tierney
Download Presentation

I FOGLI DI STILE

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

  9. RISULTATO DIVINA COMMEDIA INFERNO Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscurache la diritta via era smarritaah 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 • 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 FONTPER MODIFICARE L’ASPETTO DEL TESTO:LA DIMENSIONE DEL FONT: FONT-SIZEPUO’ 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.

  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: <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>

  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 L’ATTRIBUTO CLASS. L’ATTRIBUTO 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. <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>

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

  20. 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:underlinetesto sottolineato Letter-spacing:6pt distanza tra le lettere Line-height:24pt altezza dell’interlinea 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) <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>

More Related