La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Fogli stile a cascata Danilo Deana. I fogli stile a cascata2 I limiti di HTML HTML è nato in ambiente scientifico, dove si presta più attenzione al contenuto.

Presentazioni simili


Presentazione sul tema: "Fogli stile a cascata Danilo Deana. I fogli stile a cascata2 I limiti di HTML HTML è nato in ambiente scientifico, dove si presta più attenzione al contenuto."— Transcript della presentazione:

1 Fogli stile a cascata Danilo Deana

2 I fogli stile a cascata2 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.

3 Danilo DeanaI fogli stile a cascata3 A partire dal 1996 il World Wide Web Consortium ha iniziato a sviluppare i fogli stile a cascata (Cascading Style Sheets, CSS) con lobiettivo 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.

4 Danilo DeanaI fogli stile a cascata4 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 linsieme degli elementi cui deve essere applicata la regola, mentre la dichiarazione imposta il valore di una determinata proprietà degli elementi individuati.

5 Danilo DeanaI fogli stile a cascata5 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 allinterno dellalbero del documento degli elementi stessi. Questi schemi, detti selettori, possono andare dal semplice nome di un elemento a strutture molto più complesse.

6 Danilo DeanaI fogli stile a cascata6 Esempi di sintassi dei selettori SchemaSignificato * 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 lattributo class ha valore warning E>F Tutti gli elementi F figli dellelemento E

7 Danilo DeanaI fogli stile a cascata7 Pseudo elementi e pseudo classi Se uno stile può essere attribuito ad un elemento solo sulla base delle sua posizione allinterno dellalbero 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.

8 Danilo DeanaI fogli stile a cascata8 Pseudo elementi Gli pseudo elementi permettono di creare astrazioni rispetto allalbero 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.

9 Danilo DeanaI fogli stile a cascata9 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}

10 Danilo DeanaI fogli stile a cascata10 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 lappartenenza ad una pseudo classe.

11 Danilo DeanaI fogli stile a cascata11 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}

12 Danilo DeanaI fogli stile a cascata12 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.

13 Danilo DeanaI fogli stile a cascata13 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 lutente individua e attiva lelemento a, questo diventerà di colore lime.

14 Danilo DeanaI fogli stile a cascata14 Collegamento a un foglio stile esterno I fogli stile sono documenti di testo cui solitamente viene data lestensione css. Per collegare un documento HTML a un foglio stile esterno è necessario utilizzare allinterno dellintestazione lelemento link con gli attributi per il tipo di collegamento, il tipo di foglio stile e la localizzazione del foglio stile stesso.

15 Danilo DeanaI fogli stile a cascata15 Fogli stile interni È possibile creare un foglio stile interno utilizzando nellintestazione lelemento style con un attributo per definire il tipo di foglio stile e inserendovi allinterno le regole: […]

16 Danilo DeanaI fogli stile a cascata16 Lattributo style È possibile utilizzare lattributo style per creare un foglio stile per un elemento: Questo tipo di foglio stile è detto in linea.


Scaricare ppt "Fogli stile a cascata Danilo Deana. I fogli stile a cascata2 I limiti di HTML HTML è nato in ambiente scientifico, dove si presta più attenzione al contenuto."

Presentazioni simili


Annunci Google