Fogli stile a cascata Danilo Deana

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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