Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
I fogli di stile CSS 1 Cristina Gena cgena@di.unito.it
cristina gena - matec 2006/2007
2
Cascading Style Sheets
Fogli di stile CSS Cascading Style Sheets cristina gena - matec 2006/2007
3
Fogli di stile CSS Separazione tra contenuto (testo - struttura) e aspetto (indicazioni che vengono interpretate dal programma che visualizza il documento) creazione di un documento separato dalla pagina Web (file .html) che contiene le informazioni relative all'aspetto (alla "formattazione") della pagina Principale vantaggio: risparmio di tempo e maggior praticità nella gestione del sito: se si vuole modificare l'aspetto dell'intero sito (magari costituito da molte pagine) non è necessario modificare tutte le pagine, una per una, ma è sufficiente modificare il file che contiene il foglio di stile cristina gena - matec 2006/2007
4
CSS Dei diversi fogli di stile esistenti, vediamo i CSS (Cascading Style Sheets), quelli più comunemente usati con HTML Un foglio di stile CSS è costituito da un insieme di regole del tipo: tag {proprietà1:"valore1"; proprietà2:"valore2"} ogni regola è associata ad un tipo di tag (HTML) ogni regola è formata da due parti: proprietà:valore Per esempio: P {font-family:"Times New Roman"; font-size:10pt; color:blue} NB! NB! NB! NB: Le virgolette sono necessarie solo se il valore contiene degli spazi bianchi cristina gena - matec 2006/2007
5
CSS In realtà le regole per gli stili possono essere posizionate:
1. All'interno di un singolo tag <font style="font-family:"Times New Roman", Times, serif ">pippo</font> cristina gena - matec 2006/2007
6
CSS 2. All'interno della singola pagina (nella sez. HEAD)
<style type="text/css"> <!-- p {color: #999900;} --> </style> cristina gena - matec 2006/2007
7
CSS 3. In un file separato, con estensione .css
Soltanto il caso 3 è l'unico che garantisce i vantaggi menzionati All'interno delle pagine del sito occorre inserire un riferimento al file contenente il foglio di stile: <HEAD> ... <LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="css/miostile.css"> </HEAD> cristina gena - matec 2006/2007
8
CSS: un esempio (miostile1.css)
BODY {background-color:white} A:link {color:red} A:visited {color:maroon} A:hover {color:purple} P {font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10pt; color:black} UL {font-family:Verdana,Arial,Helvetica,sans-serif; color:black; font-style:italic} H1 {font-family:"Comic Sans MS"; font-size:18pt; color:green; font-weight:bold; text-align:center} H2 {font-family:"Comic Sans MS"; font-size:14pt; color:olive; cristina gena - matec 2006/2007
9
CSS: un esempio (miostile1.css)
Nella pagina Web (index.html) inseriamo un riferimento al foglio stile miostile1.css BODY... H1... A:link... P... UL... H2... A:visited... cristina gena - matec 2006/2007
10
CSS: un esempio (miostile2.css)
BODY {background-color:yellow} A:link {color:blue} A:visited {color:navy} A:active {color:teal} P {font-family:"Times New Roman"; font-size:12pt; color:black} UL {font-family:"Times New Roman"; font-size:10pt; color:black; font-style:normal} H1 {font-family:"Courier New"; font-size:18pt; color:#660099; font-weight:bold; text-align:left} H2 {font-family:"Courier New"; font-size:14pt; color:#9933CC; cristina gena - matec 2006/2007
11
CSS: un esempio (miostile2.css)
Senza modificare la pagina Web (index.html), modifichiamo il foglio stile (miostile2.css) e aggiorniamo il riferimento BODY... H1... A:link... P... UL... H2... A:visited... cristina gena - matec 2006/2007
12
CSS: ereditarietà Una importante proprietà dei fogli di stile CSS è l'ereditarietà: ogni elemento "annidato" (incluso) in un altro ("figlio" di un altro) ne eredita tutte le proprietà; per esempio: In esame.html: <P>L'esame si compone di due parti: una <B>relazione scritta</B> e una <B>verifica orale</B></P> I due elementi <B>...</B> sono "annidati" nell'elemento <P>...</P> (sono figli di <P>) ne ereditano le proprietà: se, nel foglio di stile, ho definito: P {font-family:Verdana; font-size:10pt; color:blue} anche il testo degli elementi <B>...</B> sarà Verdana, 10 punti, blu P B cristina gena - matec 2006/2007
13
Fogli di stile: elementi di base
CSS: alcune proprietà... Vedi documento… Fogli di stile: elementi di base Indici e proprietà cristina gena - matec 2006/2007
14
CSS: classi E' possibile inoltre definire delle classi: insiemi di stili "astratti" che possono poi essere associati, nel file .html, a vari elementi (tag); per esempio: P.white {font-family:Verdana; font-size:10pt; color:white} classe che potrà essere richiamata solo all'interno del tag <P class=“white”> cristina gena - matec 2006/2007
15
CSS: classi invece .bianco {font-family: Verdana; font-size12pt; color:white; font-weight:bold} è una classe che potrà essere richiamata all'interno di qualunque tag (per cui hanno senso quelle proprietà, per esempio <P class=“white”>, <SPAN class=“white”>, <UL class=“white”> >, ecc) cristina gena - matec 2006/2007
16
CSS: classi Nel file .html: ... <span CLASS=“bianco">
Master in Editoria Libraria e Multimediale </span> <P CLASS="white"> Università degli Studi di Torino e Corep <BR>a.a. 2003/04 <BR>c/o Scuola di Amministrazione Aziendale <BR>Via Ventimiglia Torino </P> cristina gena - matec 2006/2007
Presentazioni simili
