I fogli di stile CSS 1 Cristina Gena cgena@di.unito.it http://www.di.unito.it/˜cgena/master.html cristina gena - matec 2006/2007
Cascading Style Sheets Fogli di stile CSS Cascading Style Sheets http://www.w3.org/TR/REC-CSS1 cristina gena - matec 2006/2007
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
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
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
CSS 2. All'interno della singola pagina (nella sez. HEAD) <style type="text/css"> <!-- p {color: #999900;} --> </style> cristina gena - matec 2006/2007
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
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
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
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
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
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
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
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
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
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 115 - 10126 Torino </P> cristina gena - matec 2006/2007