CSS (Cscading Style Sheet Fogli di stile a cascata) 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.
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
<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>
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.
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.
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 }
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>
Nel mezzo del cammin di nostra vita 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 ............
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
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
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.
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; color:red;} BODY { text-align:center }
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>
i fogli di stile collegati Risultato i fogli di stile collegati i fogli di stile LO STESSO STILE Questo è un paragrafo col foglio di stile collegato
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.
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”
<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"> </BODY> </HTML>
RISULTATO Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim Barners-Lee
GLI ATTIBUTI MOSTRATI NELL’ESEMPIO SONO: 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
p.1{Text-decoration:underline } p.2{Letter-spacing:6pt } 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 }
FILE HTML (CSS_CON_OGG.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"> <P class="3"> <P class="4"> </BODY> </HTML>