La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

HTML e i fogli di stile Dott. Chiara Braghin Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore)

Presentazioni simili


Presentazione sul tema: "HTML e i fogli di stile Dott. Chiara Braghin Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore)"— Transcript della presentazione:

1 HTML e i fogli di stile Dott. Chiara Braghin Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore)

2 C. Braghin - XML, XHTML e fogli di stile 2 HTML e stili HTML aveva inizialmente una esplicita scala di valori: Contenuto Struttura Linking Semantica Presentazione La parte presentazionale, dunque, era l'ultima in ordine di importanza della scala di valori. Per quel che riguarda la presentazione, il prototipo WWW di Berners-Lee aveva un linguaggio di stile che permetteva ai lettori di definire personalmente come presentare i documenti HTML. Analogamente, le prime versioni dei browser WWW permettevano agli utenti di definire queste caratteristiche. HTML aveva inizialmente una esplicita scala di valori: Contenuto Struttura Linking Semantica Presentazione La parte presentazionale, dunque, era l'ultima in ordine di importanza della scala di valori. Per quel che riguarda la presentazione, il prototipo WWW di Berners-Lee aveva un linguaggio di stile che permetteva ai lettori di definire personalmente come presentare i documenti HTML. Analogamente, le prime versioni dei browser WWW permettevano agli utenti di definire queste caratteristiche.

3 C. Braghin - XML, XHTML e fogli di stile 3 I fogli di stile Il linguaggio CSS (Cascading Style Sheets, fogli di stile a cascata), permette di applicare aspetti di visualizzazione a documenti HTML. Un foglio di stile è un insieme di regole che indica il tipo di formattazione da applicare. Può essere usato allinterno di un documento HTML, con lattributo style per molti tag, oppure in un documento esterno apposito (il foglio di stile vero e proprio), con suffisso.css, utilizzabile da più documenti HTML. Tre diverse versioni: CSS1, CSS2, e CSS3 (in corso di definizione) Non completamente supportato da tutti i browser: da usare solo le caratteristiche principali Il linguaggio CSS (Cascading Style Sheets, fogli di stile a cascata), permette di applicare aspetti di visualizzazione a documenti HTML. Un foglio di stile è un insieme di regole che indica il tipo di formattazione da applicare. Può essere usato allinterno di un documento HTML, con lattributo style per molti tag, oppure in un documento esterno apposito (il foglio di stile vero e proprio), con suffisso.css, utilizzabile da più documenti HTML. Tre diverse versioni: CSS1, CSS2, e CSS3 (in corso di definizione) Non completamente supportato da tutti i browser: da usare solo le caratteristiche principali

4 C. Braghin - XML, XHTML e fogli di stile 4 Vantaggi dei fogli di stile Separazione della grafica dalla struttura dei documenti : Questa riga è verde. verde { color:green} Questa riga è verde. Vantaggi: Controllo più preciso e completo dellaspetto grafico Manutenzione grafica del sito molto più facile (si cambia un unico foglio di stile per cambiare laspetto di tutte le pagine) Dimensione dei file più ridotte Semplice da capire, rispetto a tutti gli attributi degli elementi Permettono di adattare la pagina al browser (con Javascript) Svantaggio principale: non supportati bene da tutti i browser Separazione della grafica dalla struttura dei documenti : Questa riga è verde. verde { color:green} Questa riga è verde. Vantaggi: Controllo più preciso e completo dellaspetto grafico Manutenzione grafica del sito molto più facile (si cambia un unico foglio di stile per cambiare laspetto di tutte le pagine) Dimensione dei file più ridotte Semplice da capire, rispetto a tutti gli attributi degli elementi Permettono di adattare la pagina al browser (con Javascript) Svantaggio principale: non supportati bene da tutti i browser

5 C. Braghin - XML, XHTML e fogli di stile 5 Regole di sintassi Un foglio di stile è un insieme di regole di formattazione. La sintassi di una regola è: selettore {blocco di dichiarazioni} dove blocco di dichiarazioni è un insieme di coppie: { proprietà: valore; proprietà: valore;... } Ad esempio: h1 { color: red; font-family: Helvetica, sans-serif; } indica che tutte le intestazioni del documento di livello 1 (cioè le parti con tag ) devono essere rosse e con il tipo di carattere specificato (se disponibile). Un foglio di stile è un insieme di regole di formattazione. La sintassi di una regola è: selettore {blocco di dichiarazioni} dove blocco di dichiarazioni è un insieme di coppie: { proprietà: valore; proprietà: valore;... } Ad esempio: h1 { color: red; font-family: Helvetica, sans-serif; } indica che tutte le intestazioni del documento di livello 1 (cioè le parti con tag ) devono essere rosse e con il tipo di carattere specificato (se disponibile).

6 C. Braghin - XML, XHTML e fogli di stile 6 Applicazione dello stile ad un documento Nel preambolo di un documento:... testo del documento... Questo tipo di definizione dello stile si applica a tutto (e solo) il documento Nel preambolo di un documento:... testo del documento... Questo tipo di definizione dello stile si applica a tutto (e solo) il documento

7 C. Braghin - XML, XHTML e fogli di stile 7 Applicazione dello stile ad un elemento Ad un singolo elemento: Esempio: una sezione con titolo di colore blu... Paragrafo... Altra sezione... Altro paragrafo... Si usano soprattutto per modificare temporaneamente unimpostazione di stile. Ad esempio, se cè lindicazione che tutti gli h1 siano rossi, questo permette una singola intestazione blu (fogli di stile inline) I livelli inferiori prendono il sopravvento su quelli superiori (cascade) Ad un singolo elemento: Esempio: una sezione con titolo di colore blu... Paragrafo... Altra sezione... Altro paragrafo... Si usano soprattutto per modificare temporaneamente unimpostazione di stile. Ad esempio, se cè lindicazione che tutti gli h1 siano rossi, questo permette una singola intestazione blu (fogli di stile inline) I livelli inferiori prendono il sopravvento su quelli superiori (cascade)

8 C. Braghin - XML, XHTML e fogli di stile 8 Fogli di stile esterni Sono fogli di stile definiti in un file separato con estensione.css: h1 {color: red;} p {font-family: sans-serif;} Bisogna collegare il documento HTML con il foglio di stile:... documento... È possibile importare più di un foglio di stile. Lultimo ha precedenza. I fogli importati hanno minore precedenza. Sono fogli di stile definiti in un file separato con estensione.css: h1 {color: red;} p {font-family: sans-serif;} Bisogna collegare il documento HTML con il foglio di stile:... documento... È possibile importare più di un foglio di stile. Lultimo ha precedenza. I fogli importati hanno minore precedenza.

9 C. Braghin - XML, XHTML e fogli di stile 9 Fogli di stile per differenti dispositivi Una pagina web può essere visualizzata su dispositivi con caratteristiche molto diverse: computer, PDA, cellulari di nuova generazione stampanti, dispositivi braille, screen reader Esempio con differenti dispositivi ... documento... Una pagina web può essere visualizzata su dispositivi con caratteristiche molto diverse: computer, PDA, cellulari di nuova generazione stampanti, dispositivi braille, screen reader Esempio con differenti dispositivi ... documento...

10 C. Braghin - XML, XHTML e fogli di stile 10 Regole di applicazione Uno stile applicato ad un elemento viene applicato automaticamente anche a tutti i suoi sottoelementi... testo testo testo... Cambia il colore del testo interno Uno stile applicato ad un elemento viene applicato automaticamente anche a tutti i suoi sottoelementi... testo testo testo... Cambia il colore del testo interno

11 C. Braghin - XML, XHTML e fogli di stile 11 Selettori Selettori di tipo: si riferiscono allelemento da formattare p { font-size : 8pt} Selettori di attributo: valori degli attributi class e id.grassetto { font-weight:bold } nuova classe #pblue { color:blue } attributo id Entrambi gli stili Un solo stile Selettore universale * { font_weight : bold } Raggruppamento di selettori h1, h2 { color:blue; font-size:10pt; font-weight:bold; } Figli e discendenti selettore di figli: h1 > p {...} selettore di discendenza: h1 p {...} Selettori di adiacenza p + div {...} Selettori di tipo: si riferiscono allelemento da formattare p { font-size : 8pt} Selettori di attributo: valori degli attributi class e id.grassetto { font-weight:bold } nuova classe #pblue { color:blue } attributo id Entrambi gli stili Un solo stile Selettore universale * { font_weight : bold } Raggruppamento di selettori h1, h2 { color:blue; font-size:10pt; font-weight:bold; } Figli e discendenti selettore di figli: h1 > p {...} selettore di discendenza: h1 p {...} Selettori di adiacenza p + div {...}

12 C. Braghin - XML, XHTML e fogli di stile 12 Procedimento a cascata ed ereditarietà Impostazioni di stile inline definite dallautore della pagina Fogli di stile esterni definiti dallautore Impostazioni personali dellutente Impostazioni di stile predefinite del browser impostazioni utilizzate quando qualcosa non è definito o se il browser non supporta i CSS Se vengono definite più regole con la stessa importanza per uno stesso elemento, lultima definita è quella che verrà applicata Ereditarietà: ogni figlio eredita le impostazioni del padre Impostazioni di stile inline definite dallautore della pagina Fogli di stile esterni definiti dallautore Impostazioni personali dellutente Impostazioni di stile predefinite del browser impostazioni utilizzate quando qualcosa non è definito o se il browser non supporta i CSS Se vengono definite più regole con la stessa importanza per uno stesso elemento, lultima definita è quella che verrà applicata Ereditarietà: ogni figlio eredita le impostazioni del padre

13 C. Braghin - XML, XHTML e fogli di stile 13 Pseudoclassi Non definisce un elemento ma un suo particolare stato Es. a:link:hover {font-size: 3 cm} selettore:pseudoclasse { dichiarazioni } Non definisce un elemento ma un suo particolare stato Es. a:link:hover {font-size: 3 cm} selettore:pseudoclasse { dichiarazioni } PSEUDOCLASSE :link :visited :active :hover :focus RISULTATO link non visitato link visitato link attivo vi si trova sopra il mouse elemento attivo (tab)

14 C. Braghin - XML, XHTML e fogli di stile 14 Pseudoelementi Consentono un controllo approfondito sui formati tipografici degli elementi dei blocchi Es. p:first-letter { color:red } Non sempre sono supportati dai browser (IE4 e NS4) Consentono un controllo approfondito sui formati tipografici degli elementi dei blocchi Es. p:first-letter { color:red } Non sempre sono supportati dai browser (IE4 e NS4) PSEUDOELEMENTO :first-letter :first-line :before :after RISULTATO prima lettera di un blocco prima riga di un blocco testo da aggiungere prima o dopo un elemento

15 C. Braghin - XML, XHTML e fogli di stile 15 Sistemi di misura Esistono diverse unità di misura; si dividono in: relative: ex, em, percentuale assolute: cm, mm, in, pt, px, pc Esistono diverse unità di misura; si dividono in: relative: ex, em, percentuale assolute: cm, mm, in, pt, px, pc Unità em ex px in cm mm pt pc % Definizione Altezza media del font utilizzato Altezza della x nel font utilizzato Numero di pixel nello schermo Inch, pollici (1 in = 2,54 cm) Centimetri Millimetri Punti (1 pt = 1/72 pollici) Pica (1 pc = 12 punti) Valore in percentuale relativo a quello dellelemento principale Esempio h1 { margin:0.5em } h2 { margin: 1ex } p { font-size:12px } p { font-size: 0.5in } p { font-size: 0.3cm } p { font-size: 3mm } p { font-size:12pt } p { font-size: 1pc } p { line-height:120% }

16 C. Braghin - XML, XHTML e fogli di stile 16 Definizione dei colori Colori predefiniti white, red, green Espressi con il formato RGB (Red, Green, Blue) #RRGGBB #FFFFFF rappresenta il bianco rgb(y,y,y) oppure rgb(y%, y%, y%) rgb(255,0,0) o rgb(100%,0%,0%) rappresentano il rosso brillante Colori che funzionano su tutti i browser Colori predefiniti white, red, green Espressi con il formato RGB (Red, Green, Blue) #RRGGBB #FFFFFF rappresenta il bianco rgb(y,y,y) oppure rgb(y%, y%, y%) rgb(255,0,0) o rgb(100%,0%,0%) rappresentano il rosso brillante Colori che funzionano su tutti i browser maroon navy olive purple red silver teal yellow aqua black blue fuchsia gray green lime white

17 C. Braghin - XML, XHTML e fogli di stile 17 Definizione degli URL Gli URL vengono definiti in questo modo: url(protocollo://server/percorso) Esempio: ... documento... Gli URL vengono definiti in questo modo: url(protocollo://server/percorso) Esempio: ... documento...

18 C. Braghin - XML, XHTML e fogli di stile 18 Il testo La proprietà font-family permette di specificare il tipo di carattere: font-family: Arial, Helvetica, sans-serif font-family: Time New Roman, Symbol Si deve tener conto che non sempre il carattere scelto è supportato Stile Corsivo: font-style Dimensione: font-size Livelli di grassetto: font-weight (bold, normal, bolder,lighter) Variante maiuscoletto: font-variant Condensare il testo: font-stretch Testo Distanza tra le lettere: letter-spacing Distanza tra le parole: word-spacing Allineamento: text-align La proprietà font-family permette di specificare il tipo di carattere: font-family: Arial, Helvetica, sans-serif font-family: Time New Roman, Symbol Si deve tener conto che non sempre il carattere scelto è supportato Stile Corsivo: font-style Dimensione: font-size Livelli di grassetto: font-weight (bold, normal, bolder,lighter) Variante maiuscoletto: font-variant Condensare il testo: font-stretch Testo Distanza tra le lettere: letter-spacing Distanza tra le parole: word-spacing Allineamento: text-align

19 C. Braghin - XML, XHTML e fogli di stile 19 Elenchi La proprietà list-style-type permette di modificare i punti elenco primo punto secondo punto primo punto secondo punto Si possono modificare anche gli stili dei punti numerati La proprietà list-style-type permette di modificare i punti elenco primo punto secondo punto primo punto secondo punto Si possono modificare anche gli stili dei punti numerati

20 C. Braghin - XML, XHTML e fogli di stile 20 Allineamento e margini Allineamento: text-align left right center justify Margini: margin-right margin-left margin-top margin-bottom Allineamento: text-align left right center justify Margini: margin-right margin-left margin-top margin-bottom

21 C. Braghin - XML, XHTML e fogli di stile 21 Box Model Rettangolo in cui viene visualizzato un elemento: Contenuto padding border-top border-bottom border-left border-right margin-top margin-bottom top bottom left right

22 C. Braghin - XML, XHTML e fogli di stile 22 Box Model Esempio Box Model Titolo Testo normale. Esempio Box Model Titolo Testo normale. h1 { background-color: teal; padding: 10px; margin: 5px; border-width: 5px; border-color: silver; border-style: inset; font-family: Verdana, Helvetica, sans-serif; font-size: 50px; font-style: italic; font-variant: small-caps; font-weight: bold; color: silver }

23 C. Braghin - XML, XHTML e fogli di stile 23 Posizionamento Le tabelle vengono spesso usate con il solo scopo di posizionare gli elementi nello schermo La versione CSS2 dei fogli di stile permette di agire sulla disposizione degli elementi nella pagina interagendo solo con gli elementi Tre modalità principali tramite la proprietà position: posizionamento relativo posizionamento assoluto Proprietà float Le tabelle vengono spesso usate con il solo scopo di posizionare gli elementi nello schermo La versione CSS2 dei fogli di stile permette di agire sulla disposizione degli elementi nella pagina interagendo solo con gli elementi Tre modalità principali tramite la proprietà position: posizionamento relativo posizionamento assoluto Proprietà float

24 C. Braghin - XML, XHTML e fogli di stile 24 Posizionamento Esempio Posizionamento ACME s.r.l. Grand Canyon, 17 Arizona Esempio Posizionamento ACME s.r.l. Grand Canyon, 17 Arizona.ditta {display: block; width:10 cm; background-color: teal; color:silver; border: thick silver inset; margin: 5mm; }.indirizzo { display: block; font-size: 20pt;margin-left: 5pt; }.state { display: block; font-family: monospace; margin-left: 20pt;}

25 C. Braghin - XML, XHTML e fogli di stile 25 Un esempio più complicato - 1 html,body{ margin: 0; padding: 0; height: 100%; } body{ background: url(images/linea_gialla.gif) repeat-y 0%; font-family: Verdana, Helvetica, sans-serif; font-size: 0.9em; }.titolo_pagina{ font-size: 2em; font-weight: bold; font-variant: small-caps; }.titolo{ font-size: 1.5em; font-variant: small-caps; } html,body{ margin: 0; padding: 0; height: 100%; } body{ background: url(images/linea_gialla.gif) repeat-y 0%; font-family: Verdana, Helvetica, sans-serif; font-size: 0.9em; }.titolo_pagina{ font-size: 2em; font-weight: bold; font-variant: small-caps; }.titolo{ font-size: 1.5em; font-variant: small-caps; } #banner{ height: 100px; background-color: #FFCC00; } #logo{ background-image: url(images/logo_unive.gif); background-position:right; background-repeat:no-repeat; height: 80px; float: left; width: 120px; padding: 10px 5px 5px 5px; } #corso{ margin-top:0px; text-align: left; padding: 0px 0px 0px 50px; }

26 C. Braghin - XML, XHTML e fogli di stile 26 Un esempio più complicato - 2 #path{ height: 20px; background-color: #000000; font-size: 14px; font-weight:bold; color: #FFCC00; } #sidebar{ float: left; width: 130px; padding: 10px 5px 0px 5px; color: #FFF; } #sidebar a{ padding: 2px 0px; text-decoration: underline; }.attenzione{color: #FF7700;} #path{ height: 20px; background-color: #000000; font-size: 14px; font-weight:bold; color: #FFCC00; } #sidebar{ float: left; width: 130px; padding: 10px 5px 0px 5px; color: #FFF; } #sidebar a{ padding: 2px 0px; text-decoration: underline; }.attenzione{color: #FF7700;}.piccolo{font-size:.5em;} #content{ margin-left: 140px; padding: 0px 0px 0px 30px; background-color: #FFFFFF; } #form_registrazione{ padding: 10px; border: 1px solid #000; background-color: #FFE88A; width:650px; } #form_registrazione span{ float: left; width: 130px; line-height: 23px; margin-right: 3px; text-align: right; }

27 C. Braghin - XML, XHTML e fogli di stile 27 Bibliografia Specifiche W3C Validatore Tutorial in Italiano Manuale HTML e CSS AA. VV. HTML Apogeo 2001 Libro on-line Specifiche W3C Validatore Tutorial in Italiano Manuale HTML e CSS AA. VV. HTML Apogeo 2001 Libro on-line


Scaricare ppt "HTML e i fogli di stile Dott. Chiara Braghin Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore)"

Presentazioni simili


Annunci Google