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"
DI FILE
HREF=URL
SPECIFICHE DEL FILE CSS INDICA IL TIPO
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>
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
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
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;
font-size:23px;
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>
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 BarnersLee
</P>
<P class="scuro">
Il concetto di ipertesto è stato sviluppato dai ricercatori Ted Nelson e Tim BarnersLee
</P>
</BODY>
</HTML>
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
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
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)
<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>