Lezione 8

PRIMA PARTE: INTRODUZIONE
INFORMAZIONE E PRESENTAZIONE
• Lo scopo di una pagina web è, essenzialmente la
trasmissione di una informazione.
• L’informazione è costituita da due aspetti essenziali:
– I contenuti
– La formattazione dei contenuti
• I contenuti sono forniti attraverso linguaggi di marcatura
che caratterizzano i vari oggetti del documento
• La formattazione è determinata dall’interpretazione del
programma utente.
PRIMA PARTE: INTRODUZIONE
BROWSER E STILI
• Ogni browser ha una rappresentazione predefinita degli
oggetti della pagina: generalmente i collegamenti sono blu, i
titoli sono rappresentati con caratteri grandi. In pratica, ogni
browser ha uno stile predefinito su cui l’utente (ma non
l’autore) può intervenire in minima parte.
• Per permettere agli autori di avere un maggiore controllo
sulla rappresentazione dei contenuti, sono nati marcatori
(come ad esempio font) il cui scopo non era più
caratterizzare gli oggetti del documento, ma fornire una
formattazione degli stessi.
Come conseguenza i contenuti risultano indissolubilmente
legati alla loro rappresentazione grafica.
PRIMA PARTE: INTRODUZIONE
I FOGLI DI STILE A CASCATA (CSS)
• Compito dei CSS (Cascading Style Sheets: Fogli di
Stile a Cascata) è ripristinare la separazione dei
contenuti e dalla formattazione.
• I CSS possono essere visti come lo strumento per
la definizione da parte dell’autore degli stili
predefiniti del browser
• I CSS non definiscono direttamente l’aspetto del
documento ma stabiliscono il modo in cui il
browser rappresenta i vari oggetti definiti dal
linguaggio di marcatura utilizzato.
PRIMA PARTE: XHTML
UN DIVERSO APPROCCIO
• Nella realizzazione di pagine web tramite XHTML+CSS
è richiesto un diverso approccio rispetto a quanto si
farebbe impaginando per mezzo di tabelle con i
programmi del tipo WYSIWYG
• Anziché lanciare l’editor WYSIWYG e cominciare a
disegnare la struttura della pagina, è necessario
organizzare i contenuti in modo logico, raggrupparli e,
se necessario, identificarli in modo univoco o associarli
a classi specifiche
• Per rendere i contenuti meglio fruibili con qualsiasi
dispositivo, è bene organizzarli in modo che siano letti
nell’ordine ideale
PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE
STRUTTURA DI UN FOGLIO DI STILE
• Un foglio di stile è un documento che raccoglie un
insieme di regole di rappresentazione dei contenuti
della pagina a cui il foglio è associato
• Di seguito è rappresentata la struttura di una regola:
REGOLA
SELETTORE
PROPRIETÀ
h1 {
VALORE
font-size : 2em;
font-weight : bold;
}
DICHIARAZIONE
La sintassi di base dei CSS
selettore{
proprietà: valore;
proprietà: valore;
proprietà: valore;
}
Diciamo che vogliamo ad esempio un colore
rosso come sfondo della pagina web:
con i CSS si ottiene così:
body {
background-color: #FF0000;
}
• Attraverso i selettori vengono associate le
regole agli elementi del documento HTML (o
XML).
• Selettore fa match con gli elementi E
BODY { font-family: Arial; fontsize: 12 pt; }
H1 { font-size: 18 pt; }
P { font-size: 10 pt; }
Tutti i selettori e proprietà
http://www.w3schools.com/css/css_examples.a
sp
PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE
LE REGOLE
• Una regola è costituita da:
1. uno o più selettori (separati da una virgola
‘,’) a cui associare un insieme di
dichiarazioni racchiuse fra parentesi graffe
‘{ }’
2. le varie di dichiarazioni sono separate da
un punto e virgola ‘;’
3. ogni dichiarazione è costituita da due
elementi separati dai due punti ‘:’:
1. la proprietà
2. il valore (o l’insieme di valori) assegnato alla
proprietà
PRIMA PARTE: I SELETTORI
I SELETTORI
• I selettori indicano al browser quali
elementi della pagina si dovranno
applicare le dichiarazioni della regola
• I selettori possono essere essenzialmente
di tre tipi:
1: TAG XHTML
3: IDENTIFICATORI
h1, h2, p { ... }
2: CLASSI
#identificatore { ... }
.classe { ... }
PRIMA PARTE: I SELETTORI
TIPI DI SELETTORI
• I selettori più generici sono i selettori di
tipo i quali specificano che la regola deve
essere applicata a tutti gli elementi del tipo
indicato. Ad esempio, sono selettori di tipo:
p {…}
a {…}
div {…}
strong {…}
* {…}
PRIMA PARTE: I SELETTORI
LE CLASSI
•
Le ‘classi’ servono a caratterizzare un insieme di oggetti omogenei. Per
associare un oggetto ad una classe è sufficiente specificarne il nome
attraverso l’attributo class:
<div class="notizia"><h1>Titolo</h1><p>Testo …</p></div>
<div class="notizia altraClasse"><h1>Titolo</h1><p>Testo
…</p></div>
•
Il selettore si indica riportando il valore assegnato all’attributo class,
preceduto da un punto ‘.’
.notizia {…}
•
È possibile combinare fra loro più classi:
<div class="classe1 classe2">…</div>
.classe1.classe2 {…}
•
Il selettore può anche specificare a quale elemento la classe deve essere
associata:
p.classe {…}
h1.classe {…}
PRIMA PARTE: I SELETTORI
IDENTIFICATORI
•
Gli ‘identificatori’ selezionano invece un oggetto unico all’interno della
pagina. L’associazione avviene tramite l’attributo id:
<div id="testata"><h1>Titolo</h1><p>Testo ...</p></div>
ATTENZIONE: è errato associare lo stesso identificatore a due o più
oggetti nella stessa pagina.
•
Il selettore si indica riportando il valore assegnato all’attributo id,
preceduto dal simbolo cancelletto ‘#’
#testata {…}
•
Il selettore può anche specificare a quale elemento l’identificatore deve
essere associato:
p#testata {…}
h1#testata {…}
•
Classi e identificatori possono essere usati contemporaneamente:
<div id="idval" class="classval">
#idval.classval {…}
COLLEGARE I CSS A UN
DOCUMENTO XHTML
PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
• Esistono diversi modi di collegare un foglio
di stile ad un documento XHTML
– Fogli di stile incorporati
– Fogli di stile esterni
– Fogli di stile importati
– Attributo style:
<p style="font-weight:bold">
• La priorità della regola è massima,
indipendentemente dal peso dei selettori
• Questo metodo è sconsigliabile
PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
FOGLI DI STILE INCORPORATI
• Si specificano gli stili direttamente nel codice XHTML
attraverso il tag <style> da inserire nel tag <head>:
<head>
<style type="text/css">
/*<![CDATA[*/
…
/*]]>*/
</style>
</head>
• Le stringhe /*<![CDATA[*/ e /*]]>*/ servono a
rispettare le regole dell’XML
• Questo metodo è adatto per pagine singole in cui è
necessario specificare stili particolari
PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
FOGLI DI STILE ESTERNI
• I fogli di stile esterni sono richiamati attraverso il
tag <link> da inserire nel tag <head>:
<head>
<link rel="stylesheet"
href="file.css" type="text/css" />
</head>
• Attraverso il tag <link> è possibile associare
diversi fogli di stile contemporaneamente
PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
FOGLI DI STILE IMPORTATI
• Attraverso la regola @import è possibile includere un
foglio di stile esterno all’interno di un insieme di regole
• Se presenti, le regole @import devono essere inserite
prima delle normali regole per gli stili:
@import "file1.css";
@import "file2.css";
body {…}
• Il percorso si riferisce alla medesima cartella in cui è
contenuto il foglio di stile contenente le regole @import
• Le regole @import possono comparire anche negli stili
incorporati
PRIMA PARTE: I VALORI
LUNGHEZZE
• Unità di misura relative (stadard di fatto, le piu usate)
– em: pari alla dimensione dei caratteri
– ex: pari alla dimensione del carattere ‘x’ (rara)
– px: pixel, la loro dimensione dipende dallo schermo
• Unità di misura assolute:
– in: pollici (1in = 2.54 cm)
– cm
– mm
– pt: punti (nei CSS 2, 1pt = 1/72in)
– pc: picas (1pc = 12pt)
• Le unità di misura relative non possono essere ricondotte
direttamente ai metri senza considerare altri fattori, come ad
esempio dimensione e risoluzione dello schermo
PRIMA PARTE: I VALORI
COLORI
• Nomi predefiniti: black, green, navy
• Valori RGB
– #rrggbb (r,g,b = {0 ÷ F})
– #rgb (r,g,b = {0 ÷ F}) corrisponde a #rrggbb
– rgb(r,g,b) (r,g,b = {0 ÷ 255})
– rgb(r%,g%,b%) (r,g,b = {0.0 ÷ 100.0})
• Per esempio, i valori aqua, #00FFFF,
#0FF, rgb(0,255,255) e
rgb(0,100%,100%) si riferiscono tutti al
medesimo colore verde acqua.
COLORE IN PRIMO PIANO (TESTO
E BORDI)
PRIMA PARTE: COLORI E SFONDI
• Il colore del testo e dei bordi è definito
tramite la proprietà color
• Il valore predefinito è quello ereditato dal
testo del blocco padre
• Se non diversamente specificato, il colore
per <body> (o meglio ancora <html>) è
quello assegnato per il testo dalle
impostazioni del sistema operativo o del
browser, e non è necessariamente nero
PRIMA PARTE: COLORI E SFONDI
SFONDI
• Lo sfondo può essere
– Trasparente
– Caratterizzato da una tinta piatta
– Riempito del tutto o in parte da una immagine
• Lo sfondo può essere gestito attraverso le seguenti
proprietà:
– background-color
– background-image
– background-repeat
– background-position
– background-attachment
– background (riassume le diverse proprietà)
PRIMA PARTE: COLORI E SFONDI
COLORE DELLO SFONDO
• La proprietà background-color può assumere i
seguenti valori:
– transparent
– <colore> Il valore predefinito è transparent
• A differenza di color, il valore per la proprietà
background-color non è ereditato
• Se non diversamente specificato, lo sfondo della pagina
è stabilito dalle impostazioni del sistema operativo o
del browser e non è necessariamente bianco
PRIMA PARTE: COLORI E SFONDI
COLORI DI TESTO E SFONDO DEFINITI SEPARATAMENTE
• Le proprietà color e
background-color
dovrebbero essere sempre
specificate in coppia per evitare
conflitti con le impostazioni
predefinite
• In figura si vede il risultato
ottenuto con una impostazione di
Windows a contrasto elevato
quando il testo è impostato sul
blu (#009) ma lo sfondo non è
esplicitamente impostato
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-IMAGE
• Per inserire un’immagine di sfondo è
sufficiente specificarne l’url tramite la
proprietà background-image:
backgroundimage:url(/im/sfondo.png);
• L’immagine sarà posizionata in alto a
destra e sarà ripetuta verticalmente e
orizzontalmente
• L’immagine scorrerà assieme al testo
• Per specificare che non dovrà essere usata
nessuna immagine si utilizza il valore none
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-REPEAT
• Tramite background-repeat è possibile
stabilire se e come l’immagine sarà
ripetuta
• background-repeat:repeat indica
che l’immagine sarà ripetuta
orizzontalmente e verticalmente (valore
predefinito)
• background-repeat:repeat-x indica
che l’immagine sarà ripetuta solo
orizzontalmente
• background-repeat:repeat-y indica
che l’immagine sarà ripetuta solo
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-ATTACHEMENT
• Tramite background-attachment è
possibile stabilire se l’immagine di sfondo
sarà fissa ovvero scorrerà con la pagina
• background-attachment:scroll
indica che l’immagine scorrerà assieme
alla pagina (valore predefinito)
• background-attachment:fixed
indica che l’immagine sarà fissata nella
sua posizione iniziale
indipendentemente dallo scorrimento della
pagina (il funzionamento è garantito solo
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION
• Tramite background-position è possibile stabilire la
posizione iniziale dell’immagine.
• I valori ammessi sono:
– Unità di lunghezza
– Unità percentuali
– Parole chiave:
• left | center | right
per il posizionamento orizzontale
• top | center | bottom
per il posizionamento verticale
• I valori vanno espressi in coppia e indicano
rispettivamente il posizionamento orizzontale e verticale
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION
• Quando sono usate le unità di lunghezza, l’angolo
superiore sinistro dell’immagine è posizionato
relativamente all’angolo superiore sinistro dell’area del
padding
• Quando sono utilizzate le unità percentuali si ha il
seguente comportamento:
– Sia X% il valore percentuale per la posizione
orizzontale
– Sia Y% il valore percentuale per la posizione verticale
– Il punto dell’immagine che si trova alle coordinate
X%,Y% sarà posto in posizione X%,Y% dell’area del
padding
PRIMA PARTE: COLORI E SFONDI
BACKGROUND
• La proprietà background permette
di definire con un’unica dichiarazione
tutte le varie proprietà
contemporaneamente
• Se non sono specificati alcuni valori,
allora vengono implicitamente
assegnati quelli predefiniti:
body {
background: #fff
url(img.jpg) 100% 0
no-repeat fixed;
}