Fogli stile a cascata Danilo Deana.

Presentazione sul tema: "Fogli stile a cascata Danilo Deana."— Transcript della presentazione:

1 Fogli stile a cascata Danilo Deana

2 I limiti di HTML HTML è nato in ambiente scientifico, dove si presta più attenzione al contenuto di un documento che al suo aspetto. Quando iniziarono ad usarlo persone al di fuori di questo ambiente, i limiti di HTML divennero evidenti. Danilo Deana I fogli stile a cascata

3 I fogli stile a cascata A partire dal 1996 il World Wide Web Consortium ha iniziato a sviluppare i fogli stile a cascata (Cascading Style Sheets, CSS) con l’obiettivo di mantenere la separazione tra struttura e presentazione, dando contemporaneamente la possibilità di costruire pagine piacevoli ed animate. Quando si parla di fogli stile a cascata, si intende sottolineare il fatto gli elementi figlio ereditano le proprietà degli elementi padre. Danilo Deana I fogli stile a cascata

4 Le regole I fogli stile sono un insieme di regole: h1{color: red}
Una regola è composta da un selettore (h1) e da una dichiarazione (color: red), a sua volta composta da una proprietà (color) e da un valore (red). Il selettore determina l’insieme degli elementi cui deve essere applicata la regola, mentre la dichiarazione imposta il valore di una determinata proprietà degli elementi individuati. Danilo Deana I fogli stile a cascata

5 Schemi di corrispondenza
Dal punto di vista dei fogli stile a cascata, un documento HTML è un albero. Le regole degli schemi di corrispondenza determinano quale stile deve essere applicato agli elementi sulla base del nome, degli attributi e della posizione all’interno dell’albero del documento degli elementi stessi. Questi schemi, detti selettori, possono andare dal semplice nome di un elemento a strutture molto più complesse. Danilo Deana I fogli stile a cascata

6 Esempi di sintassi dei selettori
Schema Significato * Tutti gli elementi E Tutti gli elementi E E#myid Tutti gli elementi E il cui attributo id ha valore myid E.warning Tutti gli elementi F il cui l’attributo class ha valore warning E>F Tutti gli elementi F figli dell’elemento E Danilo Deana I fogli stile a cascata

7 Pseudo elementi e pseudo classi
Se uno stile può essere attribuito ad un elemento solo sulla base delle sua posizione all’interno dell’albero del documento, non sarà possibile modificare il modo in cui devono essere visualizzate ad esempio il primo carattere o prima linea di un paragrafo. Per superare questi limiti sono stati introdotti i concetti di pseudo elemento e di pseudo classe. Danilo Deana I fogli stile a cascata

8 Pseudo elementi Gli pseudo elementi permettono di creare astrazioni rispetto all’albero del documento oltre quelle specificate dal linguaggio. Ad esempio, HTML non prevede un elemento per identificare la prima riga o la prima lettera di un paragrafo. Danilo Deana I fogli stile a cascata

9 Gli pseudo-elementi :first-line e :first-letter
Lo pseudo elemento :first-letter può essere utilizzato per i capolettera: p:first-letter {font-size: 3em; font-weight: normal} Lo pseudo elemento :first-line permette di applicare uno stile alla prima linea di un paragrafo: p:first-line {text-transform: uppercase} Danilo Deana I fogli stile a cascata

10 Pseudo classi Le pseudo classi permettono di identificare gli elementi sulla base di caratteristiche diverse dal loro nome, dai loro attributi o dal loro contenuto Le pseudo classi possono essere dinamiche, nel senso che un elemento può acquisire o perdere l’appartenenza ad una pseudo classe. Danilo Deana I fogli stile a cascata

11 Le pseudo classi :link e :visited
Grazie a queste pseudo classi è possibile distinguere i collegamenti già selezionati da quelli che ancora non lo sono stati: :link {color: red; text-decoration: underline} :visited {color: purple; text-decoration: underline} Danilo Deana I fogli stile a cascata

12 Le pseudo classi dinamiche :hover, :active e :focus
La pseudo classe :hover si applica quando un collegamento è individuato ma non selezionato. La pseudo classe :active si applica quando un collegamento è selezionato. La pseudo classe :focus si applica quando un elemento diventa quello attivo. Danilo Deana I fogli stile a cascata

13 Esempi di pseudo classi
Le regole che seguono modificano il colore del collegamento a secondo dello stato in cui questo si trova. a:link {color: red} a:visited {color: blue} a:hover {color: yellow} a:active {color: lime} a:hover deve seguire a:link e a:visited perché altrimenti queste regole nasconderebbero la proprietà color della regola a:hover. a:active deve seguire a:hover. Così, quando l’utente individua e attiva l’elemento a, questo diventerà di colore lime. Danilo Deana I fogli stile a cascata

14 Collegamento a un foglio stile esterno
I fogli stile sono documenti di testo cui solitamente viene data l’estensione css. Per collegare un documento HTML a un foglio stile esterno è necessario utilizzare all’interno dell’intestazione l’elemento link con gli attributi per il tipo di collegamento, il tipo di foglio stile e la localizzazione del foglio stile stesso. <link rel="stylesheet" type="text/css" href="layout.css"> Danilo Deana I fogli stile a cascata

15 Fogli stile interni È possibile creare un foglio stile interno utilizzando nell’intestazione l’elemento style con un attributo per definire il tipo di foglio stile e inserendovi all’interno le regole: <head> <style type="text/css"> […] </style> </head> Danilo Deana I fogli stile a cascata

16 L’attributo style È possibile utilizzare l’attributo style per creare un foglio stile per un elemento: <p style="text-align: right"> Questo tipo di foglio stile è detto in linea. Danilo Deana I fogli stile a cascata