La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Cristina gena - matec 2006/2007 1 I fogli di stile CSS 1 Cristina Gena

Presentazioni simili


Presentazione sul tema: "Cristina gena - matec 2006/2007 1 I fogli di stile CSS 1 Cristina Gena"— Transcript della presentazione:

1 cristina gena - matec 2006/ I fogli di stile CSS 1 Cristina Gena

2 cristina gena - matec 2006/ Cascading Style Sheets Fogli di stile CSS

3 cristina gena - matec 2006/ 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 Fogli di stile CSS

4 cristina gena - matec 2006/ 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} CSS NB: Le virgolette sono necessarie solo se il valore contiene degli spazi bianchi NB!

5 cristina gena - matec 2006/ In realtà le regole per gli stili possono essere posizionate: 1. All'interno di un singolo tag pippo CSS

6 cristina gena - matec 2006/ All'interno della singola pagina (nella sez. HEAD ) CSS

7 cristina gena - matec 2006/ 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:... ... CSS

8 cristina gena - matec 2006/ 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; font-size:10pt; 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; font-weight:bold; text-align:center} CSS: un esempio (miostile1.css)

9 cristina gena - matec 2006/ CSS: un esempio (miostile1.css) BODY... A:link... A:visited... P... UL... H1... H2... Nella pagina Web (index.html) inseriamo un riferimento al foglio stile miostile1.css

10 cristina gena - matec 2006/ 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; font-weight:bold; text-align:left} CSS: un esempio (miostile2.css)

11 cristina gena - matec 2006/ CSS: un esempio (miostile2.css) BODY... A:link... A:visited... P... UL... H1... H2... Senza modificare la pagina Web (index.html), modifichiamo il foglio stile (miostile2.css) e aggiorniamo il riferimento

12 cristina gena - matec 2006/ 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: L'esame si compone di due parti: una relazione scritta e una verifica orale I due elementi... sono "annidati" nell'elemento... (sono figli di )  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... sarà Verdana, 10 punti, blu CSS: ereditarietà P BB

13 cristina gena - matec 2006/ Vedi documento… Fogli di stile: elementi di base Indici e proprietà CSS: alcune proprietà...

14 cristina gena - matec 2006/ 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 CSS: classi

15 cristina gena - matec 2006/ 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,, >, ecc) CSS: classi

16 cristina gena - matec 2006/ Nel file.html:... Master in Editoria Libraria e Multimediale Università degli Studi di Torino e Corep a.a. 2003/04 c/o Scuola di Amministrazione Aziendale Via Ventimiglia Torino... CSS: classi


Scaricare ppt "Cristina gena - matec 2006/2007 1 I fogli di stile CSS 1 Cristina Gena"

Presentazioni simili


Annunci Google