INTRODUZIONE AI CSS
INTRODUZIONE AI CSS
COSA SONO E COME FUNZIONANO
I CSS
Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >
Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.
Based on a work at www.constile.org.
Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
Diapositiva 1
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
INTRODUZIONE
Diapositiva 2
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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.
Diapositiva 3
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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.
Diapositiva 4
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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.
Diapositiva 5
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
XHTML
Diapositiva 6
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: XHTML
STRUTTURA E CONTENUTI: L’XHTML
• Il linguaggio di marcatura più adatto all’uso dei
CSS è l’XHTML
• L’XHTML è una riformulazione del classico
HTML in XML
• L’XHTML è totalmente compatibile con l’HTML,
ma è riscritto in modo da essere conforme
all’XML
• Il principale vantaggio dell’XHTML è la rigidità
formale richiesta dal linguaggio e la possibilità di
effettuare test automatici per la verifica della
correttezza formale
Diapositiva 7
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: XHTML
DALL’HTML ALL’XHTML
• Il documento deve essere ben formato:
– Tutti gli elementi devono avere un tag di chiusura,
ovvero (se vuoti) il tag iniziale deve finire con la stringa
‘ />’ (spazio compreso).
– I vari tag devono essere annidati in modo corretto.
Errato:
<p>Paragrafo<p>Paragrafo
Corretto:
<p>Paragrafo</p><p>Paragrafo</p>
<hr> <br>
<hr /> <br />
<p><em>enfasi</p></em>
<p><em>Enfasi</em></p>
Diapositiva 8
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: XHTML
DALL’HTML ALL’XHTML
• Gli elementi e gli attributi devono essere scritti
con caratteri minuscoli
• I valori degli attributi devono sempre essere
scritti fra apici o doppi apici
Errato:
<P LANG="en">Paragraph</P>
Corretto:
<p lang="en">Paragraph</p>
<a href=http://w3.org/>
<a href="http://w3.org/">
oppure
<a href='http://w3.org/'>
Diapositiva 9
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: XHTML
DALL’HTML ALL’XHTML
• Maggiori informazioni:
– http://www.w3.org/TR/xhtml1/#diffs
– http://www.webaccessibile.org/argomenti/
argomento.asp?cat=519
Diapositiva 10
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: XHTML
UNA STRUTTURA PER I CONTENUTI
• Oltre a caratterizzare i contenuti (titoli,
paragrafi, liste, collegamenti), il linguaggio
di marcatura ha il compito di realizzare la
struttura in cui inserire i contenuti stessi
• Per raggruppare elementi da trattare come
un oggetto unico, l’elemento chiave è il
tag <div>
• Il tag <div> è un contenitore generico.
Diapositiva 11
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: XHTML
UNA STRUTTURA PER I CONTENUTI
<body>
<ul>
<li><a …>Articles</a></li>
<li><a …>Topics</a></li>
<li><a…>About</a></li>
<li><a …>Contact</a></li>
<li><a …>Contribute</a></li>
<li><a …>Feed</a></li>
</ul>
<h1><a …><img … /></a></h1>
<div>
<a …>No. <em>200</em></a>
</div>
Diapositiva 12
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: XHTML
UNA STRUTTURA PER I CONTENUTI
• Il titolo/logo del sito è realizzato tramite il tag
<h1>
• Il menù di navigazione è realizzato tramite una
lista non ordinata <ul>
Diapositiva 13
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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
Diapositiva 14
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
STRUTTURA DI UN FOGLIO DI STILE
Diapositiva 15
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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
Diapositiva 16
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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à
Diapositiva 17
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
I SELETTORI
Diapositiva 18
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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 { ... }
Diapositiva 19
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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 {…}
* {…}
Diapositiva 20
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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 {…}
Diapositiva 21
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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 {…}
Diapositiva 22
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
PSEUDO-CLASSI
• Le pseudo-classi creano delle distinzioni nei
diversi stati di uno stesso elemento. Ad esempio:
p:first-child {…} identifica il primo
paragrafo figlio di un qualsiasi elemento padre:
<div>
<p>paragrafo first-child</p>
<p>altro paragrafo</p>
</div>
Diapositiva 23
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
PSEUDO-CLASSI
• Le sole pseudo-classi supportate dai browser più
diffusi sono:
a:link {…}
a:visited {…}
a:hover {…}
a:focus {…}
a:active {…}
• L’ordine con cui sono scritte le precedenti regole
è importante per il pieno supporto con i diversi
browser.
Diapositiva 24
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
PSEUDO-ELEMENTI
• Gli pseudo-elementi selezionano una sotto parte
di un dato elemento. Ad esempio:
p:first-letter {…}
p:first-line {…}
identificano rispettivamente la prima lettera e la
prima riga di un paragrafo
• Il supporto da parte dei browser più datati è
scarso
Diapositiva 25
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
DISCENDENZA
• Il selettore di discendenza permette di individuare un
elemento in base agli elementi suoi progenitori:
<h1>Lorem <strong>ipsum</strong> mea
sale</h1>
<p>Lorem <strong>ipsum</strong> mea
sale</p>
• È possibile individuare i due differenti elementi indicando,
oltre al tipo dell’elemento a cui si vuole applicare la regola,
anche il tipo di uno o più elementi progenitori:
h1 strong {…}
p strong {…}
Diapositiva 26
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
DISCENDENZA
• È possibile indicare uno o più progenitori:
#nomeId ul li.nomeClasse a {…}
• È possibile indicare un elemento progenitore di
qualsiasi grado, non solo l’elemento padre:
<ul><li><a>Lorem ipsum</a></li></ul>
ul a {…}
Diapositiva 27
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
SELETTORE FIGLIO
• Il selettore figlio specifica una parentela diretta (padrefiglio) tra due elementi.
• Il selettore che rappresenta il padre e il selettore che
rappresenta il figlio sono separati dal carattere ‘>’.
div > p {…}
div p {…}
• La prima regola si applica a tutti i paragrafi che sono
direttamente contenuti in un elemento <div>, mentre la
seconda regola si applica a tutti i paragrafi contenuti in un
elemento <div>, indipendentemente dal grado di
discendenza.
• Il selettore figlio non è supportato da Internet Explorer 6 e
precedenti per Windows e Mac.
Diapositiva 28
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
SELETTORE FRATELLO
• Il selettore fratello specifica la fratellanza di due oggetti.
• È infatti individuare un elemento in base al fratello
immediatamente precedente:
<h1>Lorem ipsum</h1>
<p>Atqui numquam singulis his …</p>
<p>Stet invenire nam no. Quando …</p>
<p>Sint oblique maluisset duo ut. …</p>
• È possibile individuare il primo paragrafo, inserito subito
dopo l’elemento h1, indicando i due elementi separati dal
carattere ‘+’:
h1 + p {…}
• Il selettore figlio non è supportato da Internet Explorer 6 e
precedenti per Windows.
Diapositiva 29
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
SELETTORI DI ATTRIBUTO
• Il selettore di attributi permette di individuare un elemento in base ad
un qualsiasi suo attributo:
• elm[att] verifica semplicemente se l’attributo att dell’elemento
elm è stato impostato, il valore assunto dall’attributo stesso non è
rilevante;
• elm[att=val] verifica se l’attributo att dell’elemento elm assume
esattamente il valore val;
• elm[att~=val] verifica se l’attributo att dell’elemento elm assume
come valore una serie di parole separate da spazi, una delle quali è
esattamente val;
• elm[att|=val] verifica se l’attributo att dell’elemento elm assume
come valore una lista di parole separate da un trattino, la prima delle
quali è esattamente val (utile per i codici di lingua, che hanno la
forma en-en, en-us, eccetera).
Diapositiva 30
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
SELETTORI DI ATTRIBUTO
• Esempio
– a[accesskey] {…}
– a[rel=glossary] {…}
– a[title~=esempio] {…}
– a[hreflang|=en] {…}
• I precedenti selettori possono corrispondere, rispettivamente, ai
seguenti oggetti XHTML:
– <a accesskey="0" …>…</a> oppure
<a accesskey="k" …>…</a>
– <a rel="glossary" …>…</a>
– <a title="titolo di esempio" …>…</a>
– <a rel="en" …>…</a> oppure
<a rel="en-en" …>…</a> ovvero
<a rel="en-us" …>…</a>
Diapositiva 31
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
SELETTORI DI ATTRIBUTO
• Si noti che classi e selettori di tipo ID sono un caso
particolare di selettore di attributo.
• Il selettore *[class~=nomeClasse] corrisponde al
selettore .nomeClasse;
• Il selettore *[id=identificatore] corrisponde al
selettore #identificatore.
• I selettori di attributo sarebbero molto utili, soprattutto per
distinguere i diversi tipi di campi input (type="text",
type="radio", type="submit", …).
• I selettori di attributo non sono compatibili con Internet
Explorer versione 6 e precedenti.
Diapositiva 32
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
RAGGRUPPAMENTO DI SELETTORI
• Spesso può essere utile associare una regola a
più selettori contemporaneamente.
• Per fare ciò è possibile utilizzare un insieme di
selettori separati da una virgola, come indicato
nel seguente blocco di codice:
h1, #id, div p.classe {…}
• Più selettori separati da uno spazio costituiscono
un selettore che indica un rapporto di
discendenza, mentre più selettori separati da una
virgola hanno un regola in comune
Diapositiva 33
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
SPECIFICITÀ DEI SELETTORI
• Due o più regole, anche con selettori differenti, possono
riferirsi allo stesso oggetto, quando ciò accade le due o
più regole si applicano contemporaneamente.
• Tuttavia alcune dichiarazioni possono essere in conflitto,
motivo per cui esistono delle norme per calcolare la
priorità delle regole.
• Una regola assume maggiore priorità quanto più elevata è
la specificità del suo selettore.
• La specificità di un selettore si basa sul numero e sul tipo
di selettori di base che costituiscono il selettore.
Diapositiva 34
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
SPECIFICITÀ DEI SELETTORI
• La specificità del selettore è rappresentata da un
numero a tre cifre ABC così determinato:
• A = numero di attributi id presenti nel selettore
della regola (numero di selettori di tipo ID);
• B = numero degli attributi differenti da id
(essenzialmente le classi) e di pseudo classi
presenti nel selettore della regola;
• C = numero di selettori di tipo e di pseudoelementi presenti nel selettore della regola.
Diapositiva 35
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I SELETTORI
SPECIFICITÀ DEI SELETTORI
Selettore
*
{…}
li
{…}
li:first-line {…}
ul li
{…}
ul ol+li
{…}
h1 + *[rel=up]{…}
ul ol li.red {…}
li.elm.level {…}
#xyz
{…}
Diapositiva 36
Pesi
A=0 B=0
A=0 B=0
A=0 B=0
A=0 B=0
A=0 B=0
A=0 B=1
A=0 B=1
A=0 B=2
A=1 B=0
C=0
C=1
C=2
C=2
C=3
C=1
C=3
C=1
C=0
Specificità
0
1
2
2
3
11
13
21
100
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
COLLEGARE I CSS A UN
DOCUMENTO XHTML
Diapositiva 37
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
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
Diapositiva 38
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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
Diapositiva 39
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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
Diapositiva 40
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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
Diapositiva 41
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
I VALORI
Diapositiva 42
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I VALORI
PAROLE CHIAVE: INHERIT
• Parola chiave inherit: il valore da assegnare
alla proprietà deve essere ereditato da un
elemento progenitore per il quale la proprietà è
stata specificata.
• Alcune proprietà assumono automaticamente il
valore inherit e la loro definizione è
implicitamente derivata dal più prossimo
elemento progenitore per il quale la proprietà è
stata
Diapositiva 43
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I VALORI
PAROLE CHIAVE: AUTO
• La parola chiave auto: indica esplicitamente che il
programma utente dovrà utilizzare il valore predefinito
previsto per quella specifica proprietà a cui il valore auto è
stato assegnato.
• In alcuni casi, i diversi programmi utente possono avere
valori predefiniti differenti per determinate proprietà.
• Il valore predefinito di una proprietà dipende anche
dall’oggetto a cui la proprietà è applicata.
• Tuttavia tale valore è utile per sovra scrivere impostazioni
di un’altra regola il cui selettore si riferisce al medesimo
elemento, ovvero per sovra scrivere valori ereditati
Diapositiva 44
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I VALORI
PAROLE CHIAVE: DIMENSIONE CARATTERI
• Dimensioni assolute
– indicano una dimensione di carattere
predefinita, la quale varia in base al tipo e alle
impostazioni dei diversi programmi utente.
– I possibili valori sono: xx-small, x-small,
small, medium, large, x-large, xx-large.
• Dimensioni relative
– Hanno come riferimento la dimensione dei
caratteri dell’elemento padre.
– I possibili valori sono: larger e smaller.
Diapositiva 45
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I VALORI
LUNGHEZZE
• Unità di misura relative
– 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
Diapositiva 46
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I VALORI
LE PERCENTUALI
• Le percentuali sono costituite da un numero (non
necessariamente intero) positivo, negativo o
nullo, seguito immediatamente, senza alcuno
spazio, dal simbolo ‘%’.
• Le percentuali dipendono, ovviamente, da un
valore di riferimento che può variare in base alla
proprietà a cui si vuole assegnare il valore
• L’oggetto di riferimento può essere lo stesso
oggetto stesso puntato dal selettore, ovvero
l’oggetto padre.
Diapositiva 47
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: I VALORI
RIFERIMENTI
•
•
•
•
•
•
url("http://sito/file")
url(http://sito/file)
url("/file")
url(/file)
url("../file") *
url(../file) *
* il percorso si riferisce alla cartella in cui è collocato il
foglio di stile e non alla cartella in cui è collocata la
pagina HTML
Diapositiva 48
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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.
Diapositiva 49
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
IL BOX MODEL
Diapositiva 50
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
Ogni box è caratterizzato da
1. Larghezza dello spazio
per i contenuti (width)
2. Altezza dello spazio per i
contenuti (height)
3. Spazio fra contenuti e
bordi (padding)
4. Bordo (border)
5. Spazio fra il bordo e gli
altri oggetti della pagina
(margin)
Diapositiva 51
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
<div>Ex nostrum … </div>
<div>Indoctum … </div>
body {
margin: 0;
padding: 0;
}
div {
width:300px;
padding:10px;
border:5px solid #600;
margin: 20px;
}
Si noti che i margini superiori e
inferiori adiacenti collassano
Diapositiva 52
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
• Internet Explorer per
Windows versione 5.5 e
precedenti ha un modo
differente di interpretare il
box model: anziché
aggiungere il padding e il
border alla larghezza dei
contenuti, toglie spazio ai
contenuti
• La larghezza totale del box
(bordi e padding compresi) è
pari al valore assegnato alla
proprietà width.
Diapositiva 53
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Se non si specifica la larghezza (width) dei contenuti del
box, questo si allargherà (margini compresi) per riempire
tutto lo spazio a sua disposizione
• Se non si specifica la altezza (height) dei contenuti del
box, questo si espanderà in verticale il minimo possibile
per ospitare gli oggetti al suo interno
• La larghezza e la altezza del box possono essere
espresse:
– In percentuali rispetto alle dimensioni del box
contenitore
– Tramite le unità di miusra em, px, (ex, pt, mm)
– Tramite il valore auto
Diapositiva 54
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Quando si specifica la larghezza di un box,
questa diviene indipendente dalla dimensione
effettiva dei suoi contenuti
– Internet Explorer per Windows in realtà allarga il box quando i suoi
contenuti (ad esempio un’immagine o una stringa molto lunga)
eccedono la larghezza del box
• È possibile anche indicare una larghezza minima
e una larghezza massima tramite le proprietà
min-width e max-width, ma Internet Explorer
(Win/Mac) non supporta tali proprietà
Diapositiva 55
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Quando si specifica l’altezza di un box questo non si
espanderà per ospitare eventuali contenuti che
richiedono maggiore spazio
• Per ottenere un simile comportamento esiste infatti la
proprietà min-height, ma questa non è supportata né
da Internet Explorer né da Safari. Esiste anche la
proprietà max-height ma presenta le stesse
incompatibilità di min-height
• A meno di altre dichiarazioni, IE/Win interpreta la proprietà
height come fosse min-height
• Quando espressa in ‘%’, l’altezza di un box si riferisce
all’altezza esplicitamente del box genitore, quando
definita tramite la proprietà height
Diapositiva 56
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
I MARGINI
• I margini possono essere specificati:
– Individualmente
– A coppie (top/bottom, right/left)
– Globalmente
• Le unità di misura sono le stesse utilizzate per width e
height ed hanno il medesimo comportamento, tranne
auto
• Per specificare i singoli margini è possibile utilizzare le
proprietà margin-top, margin-right, marginbottom, margin-left
Esempio:
div { margin-left:1em; margin-top:2em }
Diapositiva 57
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
I MARGINI
• I quattro margini possono essere specificati anche attraverso la
sintassi abbreviata:
div { margin : 10px 5px 0 20px }
I margini risultano specificati in senso orario: top, right, bottom,
left.
• Attraverso la sintassi abbreviata, possiamo specificare anche le
coppie di margin top/bottom e right/left:
#id { margin : 1em 2em }
• Infine è possibile specificare un solo valore per tutti e quattro i lati
contemporaneamente:
.classe { margin: 1em }
Diapositiva 58
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
I MARGINI
• Quando impostati sul valore auto, i margini
laterali determinano la centratura orizzontale
del box a cui i margini sono applicati
• Purtroppo Internet Explorer non supporta questo
tipo di centratura orizzontale, per cui richiede una
tecnica differente
• Quando impostati sul valore auto, i margini
superiore e inferiore assumono il valore che il
browser assegna loro normalmente
• Nelle specifiche CSS non è prevista la centratura
verticale dei blocchi
Diapositiva 59
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
I MARGINI
Quando due o più margini sono adiacenti, ovverosia sono
non separati da bordi o padding, questi collassano in un
unico margine:
<div id="box-1">…</div>
<div id="box-2">…</div>
#box-1 { margin: 1em }
#box-2 { margin: 2em }
Diapositiva 60
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
I MARGINI
I margini non collassano quando sono separati da un bordo o dal
padding:
<p>Lorem ipsum dolor …</p>
<div><p>Quisque imperdiet …</p></div>
div{border:solid;margin:0;}
p{margin:1em 0;background:#CCC;color:#000;}
div p{margin:1em;}
I margini di blocchi flottanti o dei blocchi
posizionati in modo assoluto, non
collassano in nessun caso.
Diapositiva 61
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
IL PADDING
• Il padding è una sorta di imbottitura fra i contenuti e i
bordi di un box
• Per specificare il padding si utilizza la stessa sintassi
usata per i margini
p {padding-left:0.5em; padding-right:0.5em}
div { padding: 10px 20px 10px 20px }
.classe { padding: 0.5em 0 }
#id { padding: 5% }
• A differenza di margin, padding non ammette il valore
auto e non ammette valori negativi
• Il padding di box adiacenti non collassa in nessun caso
Diapositiva 62
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
I BORDI
•
•
•
•
I bordi sono caratterizzati da tre aspetti:
1. stile
2. spessore
3. colore
Questi aspetti possono essere definiti separatamente con:
– border-style (border-top-style, …)
– border-width (border-top-width, …)
– border-color (border-top-color, …)
Sono ammesse le dichiarazioni compatte per i quattro lati
(border-style: <stile> <stile> <stile> <stile>)
Per definire contemporaneamente i tre aspetti si usa la seguente
sintassi:
border-top: <spessore> <stile> <colore>
border: <spessore> <stile> <colore>
Diapositiva 63
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
I BORDI
Gli stili a disposizione sono :
• solid (linea continua singola);
• dotted (punteggiato);
• dashed (tratteggiato);
• double (doppia linea continua – è necessario
uno spessore di almeno 3px per ottenere
l’effetto desiderato);
• groove (scavato);
• ridge (effetto opposto a groove, il bordo
appare sbalzato);
• inset (incastonato, l’effetto grafico equivale a
un pulsante premuto);
• outset (effetto opposto a inset, l’effetto
grafico equivale a un pulsante non ancora
premuto).
• none (nessun bordo, valore predefinito);
Diapositiva 64
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
I BORDI
• Lo stile predefinito è none, dunque se non si
specifica lo stile del bordo questo non sarà
comunque mostrato
• Lo spessore del bordo può essere espresso
attraverso le varie unità di lunghezza o attraverso
i tre valori thin, medium, thick, le unità
percentuali non sono ammesse
• Il colore, se non specificato, corrisponde a quello
del testo usato nel box
• IE/Win non supporta bordi punteggiati da 1px
Diapositiva 65
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
OVERFLOW
• Come detto, è possibile specificare la larghezza e
l’altezza di un box
• Quando i contenuti eccedono le dimensioni del blocco è
possibile definire il comportamento del blocco stesso
attraverso la proprietà overflow.
• La proprietà overflow può assumere i seguenti valori:
– visible (valore predefinito)
– hidden
– scroll
– auto
Diapositiva 66
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
OVERFLOW: VISIBLE
• Il valore visible indica che i
contenuti vanno mostrati
normalmente.
• I contenuti dovrebbero essere
mostrati senza alterare la
dimensione del contenitore
• Internet Explorer per Windows
espande il contenitore fino alla
dimensione richiesta dai contenuti
div {
width:200px;height:200px;
overflow:visible;
}
Diapositiva 67
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
OVERFLOW: HIDDEN
• Il valore hidden indica che i
contenuti vanno tagliati e non
devono apparire barre di
scorrimento
div {
width:200px;height:200px;
overflow:hidden;
}
Diapositiva 68
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL BOX MODEL
OVERFLOW: SCROLL E AUTO
• Il valore scroll indica che i contenuti vanno tagliati, se
necessario. Le barre di scorrimento devono comunque apparire.
• Il valore auto indica che i contenuti vanno tagliati, se
necessario. Le barre di scorrimento devono apparire dove
necessario.
• La dimensione del contenitore non è alterata
Diapositiva 69
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
IL VISUAL FORMATTING MODEL
Diapositiva 70
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL VISUAL FORMATTING MODEL
•
•
•
È, assieme al box model, uno degli elementi
fondamentali per la realizzazione di
impaginazioni complesse
Tratta essenzialmente del comportamento di
un box in relazione agli altri box della pagina
Definisce il posizionamento dei diversi box
all’interno della pagina
Diapositiva 71
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
TIPI DI BOX
• Ci sono essenzialmente tre tipi di box:
1. i box a livello di blocco
2. i box in linea
3. gli elementi di lista
• Altri tipi di box sono scarsamente supportati
• Ogni elemento appartiene ad uno dei tre tipi di box:
– Box a livello di blocco: <p>, <h1>, <div>, box anonimi
– Box in linea: <em>, <a>, <span>, box anonimi
– Elementi di lista: <li>
Diapositiva 72
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
TIPI DI BOX
• Il tipo di box può essere alterato attraverso la
proprietà display la quale può assumere i
seguenti valori:
– block
– inline
– list-item
– none: elimina il box dalla visualizzazione
• In realtà esistono numerosi altri valori possibili,
ma sono tutti scarsamente supportati dai diversi
browser
Diapositiva 73
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX ANONIMI
• Ogni elemento della pagina, anche se non marcato,
appartiene ad un tipo di box
• Si consideri il seguente esempio
<div>i box anonimi non hanno dei marcatori
propri.<p>Essi sono <em>generati</em> dai
box loro contenitori.</p></div>
• La frase “i box anonimi non hanno dei
marcatori propri.” normalmente sarebbe un box in
linea, ma a causa della presenza del box a livello di
blocco generato da <p>, essa diventa un blocco
anonimo.
• Analogamente, “Essi sono ” e “dai box loro
contenitori.” diventano dei box in linea anonimi.
Diapositiva 74
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL FLUSSO
• I diversi box sono inseriti nel così
detto “flusso”
• I box a livello di blocco (compresi i
box anonimi) si dispongono uno di
seguito all’altro in verticale,
distanziandosi in base ai margini
• I box in linea (compresi i box
anonimi) si dispongono
orizzontalmente uno di seguito
all’altro, su una o più linee a seconda
dello spazio. La loro spaziatura
orizzontale è determinata anche da
margini, bordi e padding.
La spaziatura verticale è determinata
solo dall’interlinea (line-height)
Diapositiva 75
p { border:1px solid #00C; }
em{ margin:2em;border:1px solid #C00 }
strong {
border:1px solid #0C0;
padding:0.7em;
}
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL FLUSSO
• Nella regolazione del flusso di elementi
in linea assume importanza la
proprietà vertical-align
• Questa proprietà assume significato:
– Per le celle di una tabella
– Per gli elementi in linea
• Negli elementi in linea, verticalalign definisce l’allineamento
verticale di un elemento in linea,
all’interno di un’altra linea di altezza
superiore
• La proprietà vertical-align non
definisce l’allineamento verticale del
testo all’interno di box a livello di
blocco
Diapositiva 76
p#lh{ line-height:2em; }
strong{
line-height:1em;
vertical-align:top;
}
p#va { /* uso errato */
height:5em;
vertical-align:bottom;
}
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
POSIZIONAMENTO RELATIVO
• Il posizionamento relativo altera
il normale flusso dei box a livello di
blocco
• Attraverso la dichiarazione
‘position:relative’ è
possibile definire un off-set per il
posizionamento del blocco
all’interno del flusso
• L’off-set non altera il
posizionamento dei blocchi che
seguono e precedono nel flusso il
blocco interessato
• L’off-set è assegnato tramite le
proprietà: top, right, bottom,
left.
Diapositiva 77
p#pr {
position:relative;
left:1em;top:1.5em;
}
p { padding:0.5em;margin:1em }
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
POSIZIONAMENTO ASSOLUTO
• Attraverso la dichiarazione position:absolute è possibile
posizionare il box in un punto esatto della pagina indipendentemente
dal flusso
• Un blocco posizionato in modo assoluto è del tutto estratto dal
flusso e non ha alcuna influenza sulla posizione degli altri blocchi
• La posizione è stabilita attraverso le proprietà: top, right, bottom,
left a partire da un determinato punto di riferimento iniziale
• Il valore di top indica la distanza tra il limite superiore del blocco
posizionato e il limite superiore del padding del box di riferimento; lo
stesso vale per le altre proprietà right, bottom e left.
• Il box di riferimento è il primo blocco progenitore posizionato in modo
non assoluto o relativo, oppure l’elemento <html>
Diapositiva 78
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
POSIZIONAMENTO ASSOLUTO
• Un blocco posizionato in modo assoluto, se non si specifica un valore
per la proprietà width, assume la dimensione necessaria a
contenere gli elementi al suo interno
• Un box in linea posizionato in modo assoluto diviene un box a livello di
blocco
<p>(1) …</p>
<p id="pa">(2) …</p>
<p>(3) …</p>
p#pa {
position:absolute;
right:5px; bottom:5px;
margin:0;
}
p { margin:1em 10px; }
Diapositiva 79
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• Un box flottante è
posizionato all’interno del
flusso in modo che i
contenuti dei box
successivi si dispongano
attorno al box
• Un box flottante posiziona
lungo il lato sinistro ovvero
lungo il lato destro del box
che lo contiene
Diapositiva 80
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• Attraverso la proprietà float è possibile
assegnare verso quale lato il box deve disporsi
La proprietà float può assumere tre valori:
left, right, none
• Un box flottante, se non si specifica un valore per
la proprietà width, assume la dimensione
necessaria a contenere gli elementi al suo
interno
Diapositiva 81
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
<p>(1) …</p>
<p id="fl">(2) …</p>
<p>(3) …</p>
<p id="fr">(4) …</p>
<p>(5) …</p>
<p>(6) …</p>
p#fl {
float:left;
width:200px;
}
p#fr {
float:right;
width:200px;
}
Diapositiva 82
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• I margini inferiore e
superiore di un box
flottante non collassano
• Il box flottante è eliminato
dal normale flusso per cui
non influenza la
disposizione degli altri
box, ma solo la
disposizione dei
contenuti
Diapositiva 83
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• Blocchi flottanti consecutivi si dispongono uno di fianco
all’altro
• Se lo spazio non è sufficiente a contenere i diversi
blocchi, quelli in eccesso sono disposti al di sotto degli
altri
Diapositiva 84
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
Per interrompere l’effetto
della proprietà float e
ripristinare il normale
flusso si usa la proprietà
‘clear’, che può assumere
i valori: left, right,
both, none
p#fl {
float:left;
width:200px;
}
p#cl { clear: left }
Diapositiva 85
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL VISUAL FORMATTING MODEL: BOX FLOTTANTI
• Come detto in precedenza, i
box flottanti non influenzano
il normale flusso dei blocchi
• Un box flottante contenuto in
un blocco non dovrebbe
dunque condizionare in
nessun modo l’altezza del
blocco contenitore
• Nell’esempio, il blocco
contenitore (un <div>) ha
una dimensione verticale
determinata esclusivamente
dal padding assegnato.
Diapositiva 86
p#fl {
float:left; width:200px;
}
div { padding: 1em }
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
Internet Explorer per Windows ha un
comportamento particolare ed errato:
qualora la dimensione del blocco
contenitore fosse assegnata, il blocco
flottante contenuto ne influenzerebbe
la dimensione
p.fl {
float:left;width:200px;
}
div {
padding:1em;width:90%;
}
<div>
<p class="fl">Atqui …</p>
</div>
<p>Si noti …</p>
Questo comportamento induce
spesso in errore chi non conosce il
corretto comportamento dei blocchi
flottanti.
Diapositiva 87
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
Tuttavia, se anche il blocco
contenitore è flottante,
allora i blocchi flottanti
contenuti ne influenzano
l’altezza:
p.fl {
float:left; width:200px;
}
div {
padding:1em; float:left;
}
Diapositiva 88
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL VISUAL FORMATTING MODEL: BOX FLOTTANTI
Un altro metodo che può essere
utilizzato per consentire ad un blocco
flottante di influenzare l’altezza del suo
contenitore è inserire un blocco
successivo con assegnata
opportunamente la proprietà clear:
p#fl {
float:left;
}
p#cl {
clear:left;
}
In questo caso, sarà il blocco non
flottante a determinare l’altezza del
blocco contenitore
Diapositiva 89
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
• Internet Explorer per Windows presenta altri
difetti relativi ai box flottanti
• In alcuni casi questi difetti possono essere
corretti attraverso delle regole da specificare
solo* per Internet Explorer
*
Come specificare delle regole particolari per Internet Explorer/Windows sarà
illustrato nella seconda parte del seminario
Diapositiva 90
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
• Internet Explorer raddoppia il
margine laterale corrispondente a
quello specificato per la proprietà
float
• La soluzione consiste
nell’aggiungere la dichiarazione
display:inline alla regola per
l’elemento flottante.
• Questa dichiarazione non ha
alcuna influenza negli altri browser,
dato che un box flottante è
comunque un box a livello di blocco
Diapositiva 91
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
• Un secondo baco molto frequente è
noto col nome di peek-a-boo bug
(letteralmente baco del
nascondino).
• Il baco coinvolge solo la versione 6
di Internet Explorer per Windows ed
ha come conseguenza la
scomparsa del testo che affianca il
box flottante.
• Tale testo ricompare (del tutto o in
parte) selezionandolo col mouse,
attivando la modalità di
visualizzazione a tutto schermo,
ridimensionando i caratteri.
Diapositiva 92
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
• Questo baco si presenta generalmente quando
un box, con sfondo assegnato e altezza e
larghezza non assegnate, contiene un box
flottante, del testo che si dispone attorno a tale
box senza superarlo in altezza e un box con
assegnata la proprietà clear.
• La soluzione consiste nello specificare l’interlinea
per uno dei blocchi progenitori (<body>
compreso) tramite la proprietà line-height.
Ad esempio:
body { line-height : 1.2em }
Diapositiva 93
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
• Quando un blocco che segue un
box flottante ha una dimensione
assegnata (altezza o larghezza),
anziché posizionarsi
indipendentemente dal box
flottante, si affianca a quest’ultimo
• Inoltre il browser aggiunge, in
modo arbitrario, 3 pixel al
margine laterale opposto a quello
specificato per la proprietà float
Diapositiva 94
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
•
Si abbia un box flottante: si
vuole affiancargli una seconda
“colonna” semplicemente
specificando il margine laterale
del blocco successivo:
#fl {float:left;width:200px;}
#box {margin:0 0 0 200px;}
•
•
I 3 pixel aggiunti arbitrariamente
da IE/Win visti in precedenza
indenteranno i contenuti della
seconda colonna per tutta
l’altezza della prima
Il difetto non si presenterebbe
se anche il secondo blocco
fosse flottante
Diapositiva 95
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
Per correggere il difetto bisogna (solo
per IE/Win):
1. Specificare la larghezza o
l’altezza della seconda colonna
(vedi diapositiva 95)
2. Ridurre il margine destro della
prima colonna di 3 pixel
3. Annullare il margine sinistro
della seconda colonna
#fl {
float:left;width:200px;
margin:0 -3px 0 0;
}
#box {
margin:0 0 0 0;
height:0;
}
Diapositiva 96
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI E LISTE
• Le liste hanno delle indentazioni
generate da margini e padding
predefiniti e marcatori esterni agli
elementi della lista
• Le liste possono assumere un
comportamento inaspettato se poste di
seguito ad un box flottante
• In figura è rappresentata una lista
preceduta da un box flottante: in rosso è
evidenziato il bordo della lista, in verde il
bordo degli elementi della lista
• Internet Explorer e Mozilla hanno delle
impostazioni differenti per ottenere le
indentazioni (per le liste ordinate e non
ordinate IE usa margine sinistro della
lista, mentre Mozilla utilizza il padding
sinistro della lista).
Diapositiva 97
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI E LISTE
• I marcatori di lista si
dispongono dietro al box
flottante
• Le indentazioni delle liste sono
annullate
• Tutto questo è conseguenza
del fatto che margini e
padding con cui sono
realizzate le indentazioni sono
ininfluenti, poiché il testo delle
liste si disporrà comunque di
fianco al box flottante
Diapositiva 98
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI E LISTE
Per risolvere il problema occorre:
• Uniformare le modalità di indentazione
dei diversi browser
• Impostare i margini della lista in modo
tale che l’effetto del box flottante non
annulli l’effetto dovuto a tali margini:
.fl { float:left;width:200px; }
ul, ol, dl {
margin-left:200px;
padding:0;
}
li{ margin-left:2em; }
Diapositiva 99
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: IL VISUAL FORMATTING MODEL
VISIBILITY
• La proprietà visibility
permette di rendere invisibile
un box
• A differenza di quanto accade
con la dichiarazione
display:none, il blocco
continua ad influenzare il
posizionamento degli altri
Al paragrafo è stata
elementi della pagina
assegnata la dichiarazione
visibility:hidden
• La proprietà visibility
ammette due valori:
– visible
– hidden
Diapositiva 100
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
CONTENUTI GENERATI
Diapositiva 101
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CONTENUTI GENERATI
CONTENUTI GENERATI
• I CSS permettono un certo controllo sulla generazione
automatica di contenuti.
• Si consideri il seguente esempio:
<p>Questo documento è scritto in <acronym
lang="en" title="Extensible HyperText
Markup Language">XHTML</acronym>. Sul sito
del <a href="http://w3.org/"
hreflang="en">W3C</a> troverai maggiori
dettagli</p>
• Sarebbe utile se nella pagina si potessero esplicitare i
valori di title e di hreflang direttamente nel testo
subito dopo l’acronimo e il collegamento
Diapositiva 102
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CONTENUTI GENERATI
CONTENUTI GENERATI
acronym[title]:after {
content: " ("attr(title)")";
font-style:italic; color:#900;
}
a[hreflang]:after {
content: " ["attr(hreflang)"]"; font-weight:bold;
}
Diapositiva 103
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CONTENUTI GENERATI
CONTENUTI GENERATI
• Putroppo Internet Explorer non è in grado di generare
contenuti tramite CSS per cui questi ed altri meccanismi di
generazione devono essere rimandati ad usi futuri
• Tuttavia è utile conoscere tale metodi che possono essere
implementati già da adesso per i programmi utente che li
supportano.
• I meccanismi di generazione sono molti e includono
anche meccanismi di numerazione. Chi fosse interessato
troverà maggiori dettagli al seguente indirizzo:
http://www.w3.org/TR/CSS2/generate.html
Diapositiva 104
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
COLORI E SFONDI
Diapositiva 105
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: COLORI E SFONDI
COLORE IN PRIMO PIANO (TESTO E BORDI)
• 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
Diapositiva 106
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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-attachment
– background-position
– background (riassume le diverse proprietà)
Diapositiva 107
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: COLORI E SFONDI
COLORE DELLO SFONDO
• La proprietà background-color può assumere i
seguenti valori:
– transparent
– <colore> (vedi diapositiva 49)
• 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
Diapositiva 108
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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
Diapositiva 109
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-IMAGE
• Per inserire un’immagine di sfondo è sufficiente
specificarne l’url tramite la proprietà
background-image:
background-image: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 (che
è il valore predefinito):
background-image:none;
Diapositiva 110
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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 verticalmente
• background-repeat:no-repeat indica che
comparirà una sola occorrenza dell’immagine
Diapositiva 111
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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
con <body>)
Diapositiva 112
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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
Diapositiva 113
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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
Diapositiva 114
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION
background-position : 20% 25%;
Diapositiva 115
GIANLUCA TROIANI
INTRODUZIONE AI CSS
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;
}
Diapositiva 116
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
CARATTERI E TESTO
Diapositiva 117
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
CARATTERI E TESTO
• Per i caratteri sono disponibili le seguenti
proprietà:
– font-family: specifica il tipo di carattere
– font-size: specifica la dimensione del
carattere
– font-style: per specificare il corsivo
– font-weight: per specificare il grassetto
– font-variant: per specificare il maiuscoletto
– font: per specificare contemporaneamente le
precedenti proprietà
Diapositiva 118
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
FONT-FAMILY
• Attraverso font-family è possibile specificare diversi
tipi di carattere:
body {
font-family:verdana,arial,sans-serif;
}
• Il carattere usato sarà il primo, fra quelli specificati, che
risulta essere disponibile nel computer dell’utente
• È bene concludere l’elenco con una famiglia generica da
usare nel caso in cui gli altri tipi di carattere non siano
disponibili. Le famiglie generiche sono:
– serif (ad esempio il Times)
– sans-serif (ad esempio il Verdana)
– monospace (ad esempio il Courier)
Diapositiva 119
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
FONT-SIZE
• Con font-size è possibile specificare la dimensione del carattere
• Possono essere utilizzate unità di lunghezza (sono consigliate quelle
relative ad eccezione dei pixel) e unità percentuali
– È sconsigliato l’uso dell’unità px poiché con Internet Explorer per
Windows il testo sarebbe non ridimensionabile
• Le unità relative e le percentuali si riferiscono alle dimensioni
dell’elemento padre
– Usare le unità percentuali corrisponde ad utilizzare le unità em
• Internet Explorer ha un baco che sconsiglia l’uso delle unità em per
body, poiché il ridimensionamento dei caratteri è eccessivo
• Possono inoltre essere utilizzati i valori
visti nella diapositiva 45 (xx-small … xx-large, larger e smaller)
Diapositiva 120
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
FONT-STILE, FONT-WEIGHT, FONT-VARIANT
• Tramite font-style è possibile formattare il testo in
corsivo.
– i valori ammessi sono: normal | italic
• Tramite font-weight è possibile formattare il testo in
grassetto.
– i valori ammessi sono: normal | bold
– Sono ammessi altri valori ma sono scarsamente supportati dai
programmi utente
• Tramite font-variant è possibile formattare il testo in
maiuscoletto.
– i valori ammessi sono: normal | small-caps
Diapositiva 121
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
FONT
• Tramite font è possibile specificare tutte le proprietà del
carattere contemporaneamente
• La sintassi ammessa è:
font: <font-style> <font-variant> <fontweight> <font-size>/<line-height> <fontfamily>
• Non è necessario specificare tutte le proprietà
• Perché la dichiarazione sia valida è necessario
specificare almeno <font-size> e <font-family>
• Assieme alla dimensione del testo è possibile specificare
l’interlinea tramite <font-size>/<line-height>
Esempio:
h1 { font : bold 2em/1.5em georgia, serif }
Diapositiva 122
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
ALLINEAMENTO DEL TESTO
• L’allineamento orizzontale del testo può essere
stabilito tramite la proprietà text-align
– Valori ammessi:
left | right | center | justify
• L’indentazione è stabilita tramite text-indent
– Sono ammesse unità di lunghezza o unità
percentuali
– Esempio:
p { text-indent: 2em }
Diapositiva 123
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
DECORAZIONE DEL TESTO
• Il testo può essere decorato con sottolineature
(da usarsi essenzialmente con i link),
sopralineature (da evitare), testo barrato
(essenzialmente per il tag <del>)
• Eventuali decorazioni vanno specificate tramite la
proprietà text-decoration
• I valori ammessi sono:
none | underline | overline | line-through
Diapositiva 124
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
SPAZIATURA FRA PAROLE E CARATTERI
• Lo spazio predefinito fra lettere e parole può essere
modificato tramite le proprietà
letter-spacing e word-spacing
• Sono ammesse tutte le diverse unità di lunghezza, tuttavia
sono particolarmente indicate le unità em
• Il valore specificato può essere positivo o negativo
• Il valore specificato non indica la distanza fra le varie
lettere o parole ma va a sommarsi alla distanza
predefinita
Esempio
h1{ letter-spacing:0.2em;word-spacing:0.5em }
Diapositiva 125
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
CARATTERI BIANCHI E INTERRUZIONI DI LINEA
• Due o più spazi bianchi nel codice sorgente
generalmente vengono assorbiti in un unico
spazio bianco
• Le interruzioni di linea nel codice sorgente sono
generalmente interpretate come uno spazio
bianco
• Generalmente il browser crea una nuova linea
quando il testo non entra nello spazio orizzontale
a disposizione
• Tutti questi comportamenti possono essere
regolati tramite la proprietà whitespace
Diapositiva 126
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
CARATTERI BIANCHI E INTERRUZIONI DI LINEA
Sono ammessi i seguenti valori:
• normal: comportamento predefinito
• pre: spazi bianchi multipli non collassano in un
unico spazio bianco. Eventuali interruzioni di linea
sono generate da interruzioni di linea nel codice
oppure dal tag <br />
• nowrap: gli spazi bianchi collassano. Eventuali
interruzioni di linea sono generate solo dal tag
<br />, e non anche dall’eccessiva lunghezza
del testo inserito in una singola linea.
Diapositiva 127
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: CARATTERI E TESTO
TRASFORMAZIONI DEL CARATTERE
• Tramite la proprietà text-transform è possibile gestire
i caratteri maiuscoli e minuscoli indipendentemente da
quanto specificato nel codice
• Sono ammessi i seguenti valori:
– capitalize: la prima lettera di ogni parola è
rappresentata in maiuscolo
– uppercase: tutte le lettere di ogni parola sono
rappresentate in maiuscolo
– lowercase: tutte le lettere di ogni parola sono
rappresentate in minuscolo
– none: nessuna variazione
Esempio:
h1 { font-variant: uppercase }
h2 { font-variant: capitalize }
Diapositiva 128
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
FORMATTAZIONE DELLE TABELLE
Diapositiva 129
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
FORMATTAZIONE DELLE TABELLE
• Attraverso i CSS è possibile formattare efficacemente le
tabelle
• I vari attributi delle tabelle hanno un corrispondenza con
apposite proprietà CSS:
– cellpadding  padding
– cellspacing  border-spacing
– border  border
– width  width
• È bene specificare la dimensione del testo per le tabelle
(ad esempio table{font-size:1em}) poiché Internet
Explorer tende a ignorare le impostazioni scelte per
<body>
Diapositiva 130
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
BORDER-COLLAPSE
• I bordi della tabella e delle singole celle
sono specificati separatamente:
table { border:3px solid #900; }
td,th { border:1px solid #900; }
• Automaticamente, il browser lascia dello
spazio fra i bordi delle singole celle
• Per eliminare tale spazio si utilizza la
proprietà border-collapse
• I valori ammessi sono:
collapse | separate
• Quando i bordi sono separati, può
essere utile non mostrare le celle vuote:
table { empty-cells: hide; }
Diapositiva 131
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
RIGHE E COLONNE
• Specificando opportunamente i bordi è
possibile ottenere una griglia solo
orizzontale o solo verticale
• In tutti e due i casi è necessario
impostare i bordi in modo che collassino
table {
border-collapse: collapse;
}
• Griglia orizzontale
td,th {
border:1px #900;
border-style: solid none;
}
• Griglia verticale
td,th { border:1px solid #900; }
td{ border-style: none solid; }
Diapositiva 132
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
INTESTAZIONE E RIGHE
•
L’intestazione della tabella, identificabile
tramite il tag <thead> può essere
formattata indipendentemente dal resto
della tabella:
thead {
background:#ffc;
color:#000;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
• Attraverso le classi è possibile evidenziare
meglio le diverse righe alternandone il
colore di sfondo
tr.d {background:#eee;color:#000}
tr.p {background:#fff;color:#000}
Diapositiva 133
<table summary="...">
<thead><tr><th>…</th>…</tr></thead>
<tbody>
<tr class="d"><td>…</td>…</tr>
<tr class="p"><td>…</td>…</tr>
<tr class="d"><td>…</td>…</tr>
<tr class="p"><td>…</td>…</tr>
</tbody>
</table>
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
SPAZIO FRA CELLE
• Lo spazio fra le celle può essere
specificato attraverso la proprietà
border-spacing
• La proprietà border-spacing ha
effetto quando i bordi delle singole celle
non collassano
• La proprietà border-spacing
ammette come valori solo delle
lunghezze:
table { border-spacing:20px; }
• La proprietà border-spacing non è
supportata da Internet Explorer
Diapositiva 134
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
INTERFACCIA UTENTE
Diapositiva 135
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: INTERFACCIA UTENTE
INTERFACCIA UTENTE
• I CSS sono in grado di interagire con l’interfaccia
utente
• È possibile specificare l’aspetto del puntatore del
mouse
• È possibile utilizzare i colori e gli sfondi impostati
dall’utente per il sistema operativo
• È possibile utilizzare i caratteri impostati
dall’utente per il sistema operativo
Diapositiva 136
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: INTERFACCIA UTENTE
PUNTATORE
• L’aspetto del puntatore può essere gestito attraverso la
proprietà cursor
• I possibili valori sono:
auto | crosshair | default | pointer | move |
e-resize | ne-resize | nw-resize | n-resize |
se-resize | sw-resize | s-resize | w-resize |
text | wait | help
• In genere è meglio evitare di modificare l’aspetto
predefinito del puntatore
• Un esempio di uso della proprietà cursor è il seguente:
abbr { cursor : help }
Diapositiva 137
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: INTERFACCIA UTENTE
COLORI E SFONDI
• Alle proprietà color e background-color è possibile
associare un valore preso direttamente dalle impostazioni
del sistema operativo
• I possibili valori sono:
ActiveBorder | ActiveCaption | AppWorkspace | Background
| ButtonFace | ButtonHighlight | ButtonShadow |
ButtonText | CaptionText | GrayText | Highlight |
HighlightText | InactiveBorder | InactiveCaption |
InactiveCaptionText | InfoBackground | InfoText | Menu |
MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace |
ThreeDHighlight | ThreeDLightShadow | ThreeDShadow |
Window | WindowFrame | WindowText
• Esempio:
p { color: WindowText; background-color: Window }
Diapositiva 138
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: INTERFACCIA UTENTE
CARATTERI
• Abbiamo visto che la proprietà font è una scorciatoia per
definire contemporaneamente diverse proprietà dei
caratteri
• Attraverso font è altresì possibile specificare i caratteri
usati dal sistema operativo
• I possibili valori sono:
caption | icon | menu | message-box | smallcaption | status-bar
• Quando si usano questi valori, si specificano
contemporaneamente tutte le proprietà del carattere
• Esempio:
p { font : menu }
Diapositiva 139
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
MEDIA ALTERNATIVI
Diapositiva 140
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: MEDIA ALTERNATIVI
MEDIA ALTERNATIVI
• È possibile specificare un particolare foglio di stile per diversi media:
– braille: dispositivi braille
– embossed: stampanti braille
– handheld: dispositivi palmari
– print: stampanti
– projection: proiettori
– screen: monitor dei computer
– speech (aural): browser vocali
– tty: dispositivi a carattere fisso (teletypes)
– tv: televisori e affini
– all
• screen è ben supportato, i palmari che supportano handheld leggono
anche screen, print è supportato con alcuni limiti.
• speech (aural) non è ben supportato
Diapositiva 141
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE: MEDIA ALTERNATIVI
MEDIA ALTERNATIVI
•
Per specificare il media a cui associare il foglio di stile è possibile utilizzare tre
metodi:
– La regola @import:
@import url(schermo.css) screen;
@import url(stampante.css) print;
• Questo metodo non è supportato da Internet Explorer
– La regola @media:
@media print {
body { font:100% Arial, sans-serif }
}
@media screen {
body { font:12pt Times, serif }
}
– Tag <link /> nel codice XHTML:
<link rel="stylesheet" type="text/css"
media="print" href="p.css" />
<link rel="stylesheet" type="text/css"
media="screen" href="s.css" />
Diapositiva 142
GIANLUCA TROIANI
INTRODUZIONE AI CSS
PRIMA PARTE
FINE PRIMA PARTE
Diapositiva 143
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
CORREGGERE IL BOX MODEL DI
INTERNET EXPLORER 5.x PER
WINDOWS
Diapositiva 144
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS
IL PROBLEMA
• Quando abbiamo visto il box model, si è
accennato al fatto che Internet Explorer per
Windows non segue esattamente le indicazioni
del W3C
• IE5.x aggiunge padding e bordi sottraendoli allo
spazio specificato dalla proprietà width
Diapositiva 145
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS
LE SOLUZIONI
Per ovviare al problema ci sono essenzialmente due metodi
1. Si evita di specificare contemporaneamente le proprietà width e
padding e/o border: Dove possibile si cerca di sfruttare due box
contenuti uno nell’altro (ad esempio un <div> e i paragrafi al suo
interno)
2. Si specifica separatamente il valore di width per IE/Win 5.x e per
gli altri browser, ad esempio attraverso i Commenti condizionali*:
<link rel="stylesheet" href="css/standard.css"
type="text/css" />
<!--[if lt IE 6]>
<link rel="stylesheet" href="css/ie.css"
type="text/css" />
<![endif]-->
*Rif: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
Diapositiva 146
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
LAYOUT A LARGHEZZA FISSA A 3
COLONNE CON BOX FLOTTANTI
Diapositiva 147
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
STRUTTURA DELLA PAGINA
• Sfruttando il comportamento dei box flottanti che si
dispongono uno di fianco all’altro fin che c’è spazio a
disposizione è possibile realizzare layout a colonne
• La pagina ha la seguente struttura:
<body>
<div id="pagina">
<div id="testa">…</div>
<div id="c1">…</div>
<div id="c2">…</div>
<div id="c3">…</div>
<div id="piede">…</div>
</div>
</body>
Diapositiva 148
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE
Le istruzioni CSS essenziali sono:
#pagina{ width:700px; }
#c1{
float:left; width:200px;
}
#c2{
float:left; width:300px;
}
#c3{
float:left; width:200px;
}
#piede{
clear:both; width:100%;
}
Diapositiva 149
width:100% corregge un baco di
Internet Explorer
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE
• Le tre colonne terminano là
dove terminano i loro contenuti
e non c’è modo per imporre che
le tre colonne si sviluppino in
altezza fino al piè di pagina
#c1 { background: #99C; }
#c2 { background: #FFC; }
#c3 { background: #CC9; }
Diapositiva 150
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE
• È possibile superare il
problema impostando
un’immagine di sfondo per
#pagina tale che, se ripetuta
verticalmente, disegni le tre
colonne:
#pagina{
background:#FFF
url(3COLFIX.gif)
0 0
repeat-y;
}
Diapositiva 151
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE
• È ora necessario impostare lo
sfondo per l’intestazione e il piè
di pagina:
#piede{background:#CCC}
#testa{background:#CCC}
Diapositiva 152
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
SPAZIO FRA LE COLONNE
• Per distanziare il testo dalle
colonne non occorre impostare il
padding delle colonne stesse,
con conseguenti problemi di
interpretazione del box model
• La distanza sarà ottenuta
impostando il padding dei
paragrafi contenuti nelle colonne
stesse:
#c1 p, #c2 p, #c3 p, #piede p {
margin:0; padding:0.5em 1em;
}
#c1, #c2, #c3, #piede { padding:0.5em 0; }
h1 { font-size:1.2em; margin:0; padding:1em }
Diapositiva 153
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
POSIZIONE DELLE COLONNE
• Le colonne appaiono su
schermo, da sinistra a
destra, nell’ordine in cui
sono state inserite nel
codice XHTML
• Questo non è un vincolo,
dato che è possibile
traslare le singole colonne
tramite la dichiarazione
position:relative
#c2 { position:relative; left:200px; }
#c3 { position:relative; left:-300px; }
Diapositiva 154
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
LAYOUT LIQUIDO A 3 COLONNE
CON BOX FLOTTANTI
Diapositiva 155
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
STRUTTURA DELLA PAGINA
• La pagina ha la seguente struttura:
<div id="pagina"><div id="aux">
<div id="testa"></div>
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="piede"></div>
</div></div>
• A differenza del layout a larghezza fissa, in questo caso è
necessario un contenitore ausiliario (<div id="aux">) il
cui scopo è la gestione degli sfondi per le colonne
Diapositiva 156
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE
Le istruzioni CSS essenziali sono:
body { margin:0; padding:0 5%;}
#pagina { width:100%;}
#aux { width:100%;}
#c1 {
float:left; width:23%;
margin: 0 1%;display:inline
}
#c2 {
float:left; width:48%;
margin: 0 1%;display:inline
}
#c3 {
float:right; width:23%;
margin: 0 1% 0 0;display:inline
}
#piede { clear:both;width:100% }
Diapositiva 157
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE
• La larghezza del layout non è affidata alla
proprietà width di #pagina ma al padding
impostato per <body>
• La larghezza totale delle tre colonne non
raggiunge il 100% dello spazio disponibile, poiché
ciò potrebbe comportare problemi di
arrotondamento (dipendendo dalle dimensioni
della finestra) nel passaggio %  px
Diapositiva 158
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE
• Un esempio di problemi con l’arrotondamento è il
seguente: si ipotizzi che la larghezza di #pagina sia pari
a 802px e che la larghezza di #c1, #c2 e #c3 sia pari,
rispettivamente, a 35%, 50%, 25%.
• Gli elementi #c1 e #c3 dovrebbero dunque essere larghi
802×25÷100=200.5px, mentre l’elemento #c2 dovrebbe
essere largo 802×50÷100=401px
• Poiché il pixel non può essere spaccato in due, elementi
#c1 e #c3 sarebbero larghi non 200.5px ma 201px.
• La larghezza totale delle tre colonne sarebbe dunque pari
a 201+401+201=803px, la quale supererebbe di 1px la
larghezza di #pagina, per cui la terza colonna dovrebbe
disporsi sotto le prime due
Diapositiva 159
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE
• La soluzione proposta consiste nel rendere la
larghezza totale delle colonne pari al 99%,
lasciando un franco pari all’1% per assorbire
eventuali errori di arrotondamento
• Il franco si ha fra #c2 e #c3, rendendo flottanti le
due colonne a sinistra e a destra e regolando
larghezze e margini in modo tale che ci sia una
distanza pari all’1% fra #c2 e #c3
Diapositiva 160
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE
• Per realizzare lo sfondo delle tre colonne
non è possibile usare una sola
immagine poiché la larghezza delle
colonne non è più nota a priori
• Saranno dunque utilizzate due immagini
separate che saranno impostate come
sfondo di #pagina e #aux
Diapositiva 161
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE
• Ricordando che uno sfondo posizionato con le percentuali si dispone
in modo tale che il punto dell’immagine che si trova alle coordinate
X%,Y% sarà posto in posizione X%,Y% dell’area del padding del suo
contenitore, sarà sufficiente realizzare due immagini,
– la cui larghezza sia tale da coprire le attuali risoluzioni supportate
(ad esempio 4000px)
– la cui colorazione sia tale da risultare opache per la percentuale
occupata dalla colonna e trasparenti per la restante parte.
• Si è scelto di avere colonne laterali larghe il 25% dello spazio totale
• L’immagine per la prima colonna sarà opaca per i primi 1000px (in
orizzontale) e trasparente per i restanti 3000px (il rapporto è dunque
25%)
• L’immagine per la prima colonna sarà trasparente per i primi 3000px
(in orizzontale) e opaca per i restanti 1000px (il rapporto è dunque
75%)
Diapositiva 162
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE
• Il codice da utilizzare per impostare
gli sfondi è il seguente:
#pagina {
background:#FFC
url(3COLLIQ.SX.gif) 25% 0
repeat-y;
}
#aux {
background:transparent
url(3COLLIQ.DX.gif) 75% 0
repeat-y;
}
• Si noti che il colore di sfondo di #pagina fornisce lo sfondo per la
colonna centrale, mentre il colore di sfondo di #aux deve essere
trasparente per consentire la visualizzazione dello sfondo di #pagina
Diapositiva 163
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
SPAZIO FRA LE COLONNE
• La distanza fra il testo e i
bordi delle colonne è il
risultato dell’impostazione
dei margini con i quali è stata
realizzata la struttura a tre
colonne
#piede { background:#CCC; }
#testa { background:#CCC; }
h1 { font-size:1.2em; margin:0; padding:1em }
#c1 p, #c2 p, #c3 p { margin:0; padding:0.5em 0; }
#piede p { margin:0; padding:0.5em 1em; }
#c1, #c2, #c3, #piede { padding:0.5em 0; }
Diapositiva 164
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
LAYOUT LIQUIDO A COLONNE CON
BOX POSIZIONATI IN MODO
ASSOLUTO
Diapositiva 165
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LAYOUT A COLONNE
CON BOX POSIZIONATI IN MODO ASSOLUTO
•
Realizzare layout a colonne attraverso blocchi
posizionati in modo assoluto è relativamente
semplice ma implica un forte vincolo
1. Se si vuole gestire con efficacia il piè di
pagina è necessaria una colonna che sia
sempre e a priori la più lunga delle altre
2. Se si vuole gestire lo sfondo delle colonne
indipendentemente dall’altezza delle colonne
è necessaria una colonna che sia sempre e a
priori la più lunga delle altre
Diapositiva 166
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LAYOUT A COLONNE
CON BOX POSIZIONATI IN MODO ASSOLUTO
•
•
•
•
Il vincolo è dovuto al fatto che i blocchi posizionati in
modo assoluto non possono in nessun modo controllare
la posizione del piè di pagina (che nel caso di blocchi
flottanti era controllato tramite la proprietà clear)
Inoltre i blocchi posizionati in modo assoluto non
possono determinare l’altezza del loro contenitore,
usandone lo sfondo per realizzare le colonne
Una colonna a priori più alta delle altre potrebbe essere
però posizionata in modo statico e superare i problemi
suddetti
Tramite i margini laterali, la colonna statica potrebbe
lasciare lo spazio per il posizionamento dei blocchi
assoluti
Diapositiva 167
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LAYOUT A COLONNE
CON BOX POSIZIONATI IN MODO ASSOLUTO
•
•
•
•
Vedremo ora come realizzare un layout a colonne con blocchi
posizionati in modo assoluto
Si assume che non interessi avere il piè di pagina né che interessi
gestire gli sfondi indipendentemente dall’altezza delle colonne
Non ci sono differenze degne di nota fra layout liquidi o a larghezza
fissa
La struttura della pagina sarà la seguente:
<body>
<div id="testa"></div>
<div id="corpo">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
</body>
Diapositiva 168
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LE TRE COLONNE
•
Le istruzioni CSS essenziali sono:
#corpo {
width:100%;
position: relative;
}
#c1 {
position:absolute; top:0; left:0;
width:25%;
}
#c2 {
position:absolute; top:0; left:25%;
width:50%;
}
#c3 {
position:absolute; top:0; left:75%;
width:25%;
}
Diapositiva 169
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LE TRE COLONNE
•
•
•
•
Il blocco div#corpo è posizionato in modo relativo, in
modo da essere il riferimento per il posizionamento dei
tre blocchi in esso contenuti, div#c1, div#c2 e
div#c3, posizionati in modo assoluto
Per div#corpo è stata specificata una larghezza pari al
100% (questo in teoria non occorre ma corregge un
difetto di IE/Win)
I blocchi hanno una larghezza totale pari al 100%. Ciò
non costituisce un problema poiché ognuno di essi si
comporta indipendentemente dagli altri
La larghezza dei blocchi e il valore della proprietà left
sono tali da permettere il posizionamento dei blocchi
senza sovrapposizioni
Diapositiva 170
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LE TRE COLONNE
•
•
A questo punto è possibile
aggiungere dei bordi senza
preoccuparsi del box model
(entro certi limiti) poiché
eventuali aggiunte alla
larghezza dei box sono
“assorbite” dal
posizionamento assoluto
Per distanziare il testo dalle
colonne si può ancora
ricorrere al metodo del
padding nei paragrafi
Diapositiva 171
#c1{
border-right:1px dotted #900;
}
#c2{
border-right:1px dotted #900;
}
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
CENTRARE UN BOX NELLA PAGINA
Diapositiva 172
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA
CENTRARE UN BOX NELLA PAGINA
• Uno dei problemi che spesso si incontrano coi
CSS è l’apparente difficoltà di centrare un box
nella pagina o in un box contenitore
• In base alle specifiche CSS, per posizionare un
blocco al centro della pagina è sufficiente
specificare il valore auto per i margini laterali:
#box { margin : 1em auto 1em auto }
• Purtroppo, le vecchie versioni di Internet Explorer
per Windows hanno un modo diverso di centrare
il box che richiede di impostare al valore center
la proprietà text-align
Diapositiva 173
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA
CENTRARE UN BOX NELLA PAGINA
•
•
Questa originalità di Internet Explorer ha però un duplice effetto
negativo:
1.
È necessario utilizzare del codice ridondante per supportare le
vecchie versioni di Internet Explorer
2.
Chi affronta i CSS le prime volte, può “istintivamente” provare a
centrare un box attraverso la dichiarazione textalign:center.
Dato che IE/Win (versione 6 e precedenti) risponderà secondo
le aspettative di chi realizza il codice, in quest’ultimo spesso
nasce una duplice idea errata: «i box si centrano con textalign, ma Mozilla non è in grado di centrare il box»
Si noti che la proprietà text-align è specifica per il testo, dunque
il comportamento di Internet Explorer è del tutto arbitrario
Diapositiva 174
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA
CENTRARE UN BOX NELLA PAGINA
•
•
In pratica, per centrare un box nella pagina è necessario
il seguente codice:
body { text-align : center; }
#box {
margin : auto;
text-align : left;
}
Se il box da centrare ha una larghezza espressa in
percentuali può essere sufficiente agire sui margini
laterali del box o il padding del box contenitore:
body { padding : 10% 0 }
box { /* non è necessario impostare la larghezza */ }
ovvero
box { width : 80%; margin : auto 10% }
Diapositiva 175
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
FORMATTARE LE
LISTE DI LINK  MENU
Diapositiva 176
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU
• Uno metodi migliori per realizzare un menu in XHTML è
utilizzare liste di collegamenti:
<ul>
<li><a href="…">Collegamento 1</a></li>
<li><a href="…">Collegamento 2</a></li>
<li><a href="…">Collegamento 3</a></li>
<li><a href="…">Collegamento 4</a></li>
<li><a href="…">Collegamento 5</a></li>
</ul>
• Tuttavia, il classico aspetto delle liste rende poco
“attraente” un menu realizzato in questo modo
Diapositiva 177
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU
• Per ottenere un menu verticale dall’aspetto più
accattivante a partire da una lista, come prima cosa
dovremo letteralmente eliminare la formattazione “a lista”
ul { margin:0; padding:0; }
li { display:inline; }
Diapositiva 178
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU
• Quando si usano i CSS per gestire un menu di
collegamenti è possibile sfruttare le pseudo-classi
a:link, a:visited, a:hover, a:focus,
a:active per creare effetti roll-over senza
utilizzare il javascript, con ovvi vantaggi
• Avendo eliminato le varie proprietà della lista, per
fornire l’aspetto desiderato al menu dovremo
agire direttamente sui tag <a> e le loro pseudoclassi
Diapositiva 179
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU VERTICALI
•
Per realizzare menu verticali, oltre alle regole
precedentemente viste, sono utili le seguenti ulteriori
regole:
– a { display:block; padding:5px 1em }
• Tramite display:block i link diventano dei
blocchi, dunqe sono cliccabili per tutta la loro area
• Tramite il padding verticale si aumenta l’area
cliccabile verticale
– a:link,a:visited{text-decoration:none}
• Spesso nei menu la sottolineatura dei link non è
necessaria, anzi risulta spesso antiestetica ed
evidenzia un’area inferiore a quella effettivamente
attivabile
Diapositiva 180
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE
ul#tipo1 {
border:1px solid #900;bordertop:none;
}
#tipo1 a {
border-top:1px solid #900;
}
#tipo1 a:link, #tipo1 a:visited {
background:#FFC;color:#000;
}
#tipo1 a:hover, #tipo1 a:focus,
#tipo1 a:active {
background:url(freccetta.gif) #EEE
right center no-repeat;color:#900;
}
Diapositiva 181
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE
• I collegamenti appaiono in un elenco verticale separati da delle linee
orizzontali
• I collegamenti sono di colore nero su sfondo ocra
• Al passaggio del mouse, lo sfondo diventa grigio chiaro, il testo si
accende di colore rosso e sulla sinistra appare un’icona
rappresentante un freccia
• L’immagine non viene pre-caricata
• Per pre-caricare l’immagine ed evitare un piccolo ritardo al momento
della sua prima comparsa è sufficiente porla come sfondo di
ul#tipo1:
ul#tipo1 {
background: url(freccetta.gif) no-repeat;
}
• Così facendo, l’immagine sarà caricata poiché deve essere posta
come sfondo di ul#tipo1. Tuttavia l’immagine sarà coperta dallo
sfondo dei link stessi
Diapositiva 182
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU VERTICALI: EFFETTO PULSANTE
#tipo2{ border:1px solid #333; }
#tipo2 a:link,#tipo2 a:visited{
border:3px solid #EEE;
background:#EEE;
color:#000;
}
#tipo2 a:hover,#tipo2 a:focus{
border:3px outset #999;
background:#FFF;
color:#900;
outline-style: none;
}
#tipo2 a:active{
border:3px groove #333;
background:#DDD;
color:#f00;
}
Diapositiva 183
click*
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU VERTICALI: EFFETTO PULSANTE
•
•
•
•
•
•
In questo caso, sono stati sfruttati tre differenti tipi di bordo per avere:
– uno stato di riposo
– uno stato di selezione
– uno stato di attivazione
Al passaggio del mouse, tramite la dichiarazione border:3px outset
#999, il collegamento assumerà l’aspetto di un pulsante
Al momento dell’attivazione del collegamento, tramite la dichiarazione
border:3px groove #333, il collegamento assumerà l’aspetto di un
pulsante premuto
Agendo sul colore dei link e sugli sfondi, l’effetto è completato e perfezionato
Si noti che a riposo il bordo è piatto e dello stesso colore dello sfondo
(border:3px solid #EEE). Ciò è necessario per evitare che la comparsa
di bordi prima inesistenti provochi movimenti nelle voci del menu
Si noti infine che in luogo di agire sullo stile del bordo, è possibile agire sul
colore dei singoli lati di un bordo piatto, così da avere più controllo sul
risultato finale
Diapositiva 184
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE
• Per realizzare menu orizzontali possono essere
utilizzati diversi metodi come ad esempio:
– tag <a> flottanti
– tag <a> posizionati in modo assoluto
– tag <a> lasciati come elementi in linea
• Il metodo più diffuso e forse meno problematico è
quello di utilizzare tag <a> flottanti
Diapositiva 185
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE
• Il codice HTML utilizzato è il seguente:
<ul id="menu">
<li id="primo"><a href="#">Collegamento 1</a></li>
<li><a href="#">Collegamento 2</a></li>
<li><a href="#">Collegamento 3</a></li>
<li><a href="#">Collegamento 4</a></li></li>
</ul>
• Al primo elemento della lista è assegnato l’identificatore
primo per una più semplice gestione dei bordi
Diapositiva 186
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE
Il codice CSS utilizzato è il seguente:
ul#menu { margin:0;padding:0; }
#menu li { display:inline; }
ul#menu {
border-top:1px solid #900;border-bottom:1px solid #900;
color:#000;background:#eef;
float:left;width:100%;
}
#menu a {
float:left; padding:5px 15px;
border-right:1px solid #900;
}
#menu #primo a{ border-left:1px solid #900; }
#menu a:link,#menu a:visited{ color:#444; background:#eef; }
#menu a:hover,#menu a:focus,#menu a:active{
background:#900;
color:#FFF;
}
Diapositiva 187
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE
•
•
•
•
•
•
Innanzitutto si inseriscono le regole per azzerare la normale formattazione
della lista
I collegamenti associati al menu sono flottanti per cui si dispongono uno di
fianco all’altro
Tramite i bordi laterali, i collegamenti sono separati tra loro
Per contenere i collegamenti flottanti è bene che il box realizzato dal tag <ul>
sia anch’esso flottante. Bisognerà di conseguenza impostarne la larghezza.
I bordi superiori e inferiori sono realizzati tramite il box realizzato dal tag <ul>
Al passaggio del mouse si ha un effetto roll-over agendo su colore e sfondo
dei collegamenti
Diapositiva 188
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE
Se le diverse voci del menu sono
associate diverse aree del sito può essere
utile una soluzione del tipo “a scheda”:
<li class="on">…</li>
class="on"
#menu li.on a:link,
#menu li.on a:visited,
#menu li.on a:hover,
#menu li.on a:focus,
#menu li.on a:active{
padding-bottom:6px;
background:#FFF;color:#000;
margin-bottom: -1px;
position: relative;z-index: 10;
}
Diapositiva 189
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE
• Rispetto alle altre linguette, quella attiva ha il
valore del padding inferiore impostato a 6px
anziché 5px. Il pixel in eccesso viene gestito
tramite il margine inferiore
• Il colore dello sfondo è il medesimo dello sfondo
della pagina per avere l’effetto a linguetta
• Il posizionamento relativo e lo z-index servono
a gestire correttamente le sovrapposizioni
Diapositiva 190
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
TECNICHE DI SOSTITUZIONE DI TESTO
CON IMMAGINI (FIR)
Diapositiva 191
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
• In alcuni casi può essere utile gestire loghi,
banner e grafica in generale sia in forma testuale
sia in forma grafica
• Esistono tecniche CSS che permettono di
sostituire un testo con una immagine senza
ricorrere all’apposito tag <img />
• Le diverse tecniche consistono nello sfruttare gli
sfondi per inserire le immagini e nel nascondere il
testo in diversi modi
Diapositiva 192
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
• Si vuole ottenere il seguente risultato: convertire
una stringa in una immagine tramite CSS
ORGANIZZAZIONE LAICA PER LA
SALVAGUARDIA DEL PANDA
Diapositiva 193
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
<h1><span>ORGANIZZAZIONE LAICA PER LA
SALVAGUARDIA DEL PANDA</span></h1>
body{
position : relative;
z-index : 1;
}
h1{
width : 130px;
height : 150px;
background : url(panda.jpg);
font-size : 70%
}
h1 span {
position : relative;
z-index : -1;
}
Diapositiva 194
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
• La larghezza del box generato da
<h1> è pari alla dimensione
dell’immagine (130×150px)
• Per nascondere il testo, si porta
l’elemento <span> dietro <h1>
attraverso la proprietà z-index
• Essendo lo spazio occupato dal
testo maggiore dello spazio a
disposizione, occorre ridurre la
dimensione del testo
Diapositiva 195
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
• Qualora l’immagine non
fosse caricata, il testo
ritornerebbe visibile
• Il testo assolve dunque il
compito di testo alternativo
• A differenza di una stringa
contenuta nell’attributo
alt, il testo può essere
marcato tramite XHTML
Diapositiva 196
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
•
•
•
•
•
Nel caso ci fosse anche un collegamento
interno al tag <h1> tutto sarebbe altrettanto
semplice:
<h1>
<a href="…"><span> … </span></a>
</h1>
Si può tuttavia utilizzare <h1> come fosse
<body> e <a> come fosse <h1>
L’immagine di sfondo è applicata
all’elemento <a> anziché all’elemento
<h1>
L’oggetto con z-index=1 è l’elemento
<h1> anziché l’elemento <body>
È bene eliminare anche la sottolineatura
del collegamento poiché potrebbe
comunque apparire sopra l’immagine,
essendo l’elemento <span> interno al link
a essere posto dietro l’immagine e non il
link stesso
Diapositiva 197
h1{
width:130px;
height:150px;
font-size: 70%;
z-index: 1;
position: relative;
}
h1 span {
z-index: -1;
position: relative;
}
h1 a{
height:100%;
width:100%;
display:block;
text-decoration: none;
background:url(panda.jpg);
}
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ROLLOVER DI IMMAGINI SENZA JS E SENZA PRELOAD
ROLLOVER DI IMMAGINI SENZA JS E SENZA PRELOAD
• Associando le tecniche FIR ai collegamenti,
è possibile sfruttare le pseudo classi :hover
ecc. per creare degli effetti rollover che non
richiedono javascript
• Inoltre si può evitare di caricare in anticipo i
diversi stati dell’immagine sfruttando una
sola immagine per i diversi stati
• Si voglia ad esempio creare un effetto rollover col logo della OLSP
• In una unica immagine inseriamo due diversi
stati della medesima figura (in B&N e a
colori)
Diapositiva 198
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ROLL-OVER DI IMMAGINI SENZA JS E SENZA PRELOAD
ROLL-OVER DI IMMAGINI SENZA JS E SENZA PRELOAD
h1{
width:130px; height:150px;
font-size: 70%;
z-index: 1; position: relative;
}
h1 span {
z-index: -1;
position: relative
}
h1 a{
height:100%; width:100%;
display:block;
text-decoration: none;
background:url(panda2.jpg);
}
h1 a:hover,h1 a:focus, h1 a:active {
background-position: 0 -150px;
}
Diapositiva 199
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
NASCONDERE I CONTENUTI IN
MODO ACCESSIBILE
Diapositiva 200
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: NASCONDERE I CONTENUTI IN MODO ACCESSIBILE
NASCONDERE I CONTENUTI IN MODO ACCESSIBILE
•
•
•
Quando si realizza una pagina XHTML + CSS è bene specificare meccanismi di
navigazione interna, utili in caso di navigazione con programmi utente dalle ridotte
capacità grafiche
Questi meccanismi di navigazione, tuttavia, potrebbero essere inutili o poco chiari a chi
usasse programmi utente in grado di interpretare a pieno i CSS
Il modo più banale di nascondere tali contenuti via CSS è usare la dichiarazione
display : none associata ad un’apposita classe (ad es. .nascosto):
<h1>ORGANIZZAZIONE …</h1>
<p class="nascosto">
[<a href="#SKIP" accesskey=".">Salta il menu di navigazione</a>]
</p>
<ul>
<li><a href="#">…</a></li>
…
</ul>
<p><a id="SKIP"></a>Lorem ipsum…</p>
Diapositiva 201
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: NASCONDERE I CONTENUTI IN MODO ACCESSIBILE
NASCONDERE I CONTENUTI IN MODO ACCESSIBILE
• Tale regola potrebbe essere interpretata anche da screen reader
• Tali meccanismi potrebbero essere associati ad access-key che utili
indipendentemente dal programma utente
• Un metodo migliore per nascondere i contenuti potrebbe dunque
essere quello di seguito indicato:
.nascosto{
width:0;height:0;overflow:hidden;
position:absolute;top:-1000em;
}
• Le prime tre dichiarazioni dovrebbero essere sufficienti a generare un
box dall’ingombro nullo il cui contenuto è del tutto invisibile
• Tuttavia alcuni browser richiedono anche le ultime due dichiarazioni
che portano il box totalmente al di fuori dalla finestra del browser
Diapositiva 202
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
FORMATTARE I MODULI
Diapositiva 203
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE I MODULI
FORMATTARE I MODULI
• Nel formattare i moduli sarebbe possibile utilizzare i vari
attributi per la gestione dei diversi tipi di campi:
– <input type="text" />
– <input type="password" />
– <input type="radio" />
– <input type="submit" />
–…
• Attraverso un selettore del tipo input[type='...']
permetterebbe di distinguere i diversi elementi senza
ricorrere a classi o attributi id
Diapositiva 204
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE I MODULI
FORMATTARE I MODULI
•
•
•
Tra le cose più utili nella formattazione di un modulo
tramite i CSS è l’allineamento fra etichette e campi del
modulo
Fra i vari metodi possibili due sono i metodi più semplici:
1. allineamento tramite box flottanti
2. allineamento tramite i margini
La struttura XHTML di riferimento è la seguente:
<p><label …>…</label> <input type="text" … /></p>
<p><label …>…</label> <input type="text" … /></p>
Diapositiva 205
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: FORMATTARE I MODULI
FORMATTARE I MODULI
•
Tramite box flottanti
#f1 label {
display:block;float:left;
width:7em;
text-align:right;
padding-right:.5em;
}
•
Tramite i margini
#f2 label {
display:block;
line-height:1.4em;
height:1.4em; width:7em;
text-align:right;
}
#f2 input {
margin:-1.4em 0 0 8em;
display: block !important;
display: inline;
}
Diapositiva 206
L’etichetta ha una larghezza e un’altezza noti a
priori
Il campo, tramite i margini, è spostato in modo da
affiancare l’etichetta
Hack: Mozilla vuole display:block, ma con IE si
avrebbe un errore di formattazione
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
BANNER ESPANDIBILI CON I CSS
Diapositiva 207
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: BANNER ESPANDIBILI CON I CSS
BANNER ESPANDIBILI CON I CSS
• Ultimamente si sono visti diversi siti internet con
banner pubblicitari che si espandono al
passaggio del mouse
• Tramite CSS ciò può essere realizzato tramite le
solite pseudo-classi del tag <a>, senza Javascript
• Le soluzioni più semplici sono almeno 2:
– Tecniche FIR, in cui lo stato :hover permette
uno spazio maggiore per mostrare lo
sfondo/banner per intero
– Tramite il tag <img> e la proprietà
overflow:hidden del tag <a>
Diapositiva 208
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: BANNER ESPANDIBILI CON I CSS
BANNER ESPANDIBILI CON I CSS
• È didatticamente più interessante il secondo metodo:
<div id="banner">
<a href="…"><img src="b.jpg" … /></a>
</div>
<p>Lorem ipsum …</p>
• Poiché il blocco contenente l’immagine (<a>) dovrà
espandersi sopra al testo, è opportuno che questo sia
posizionato in modo assoluto e che esista un contenitore
di riferimento (anche per la posizione del testo
sottostante): div#banner
Diapositiva 209
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: BANNER ESPANDIBILI CON I CSS
BANNER ESPANDIBILI CON I CSS
#banner {
width:468px; height:60px;
position:relative;
}
#banner a:link,
#banner a:visited {
width:468px;height:60px;
position:absolute;
top:0;left:0;z-index:100;
overflow:hidden;
}
#banner a:hover,
#banner a:focus {
height:240px;
}
Diapositiva 210
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: BANNER ESPANDIBILI CON I CSS
BANNER ESPANDIBILI CON I CSS
• Il contenitore ha le dimensioni del banner ridotto ed è
posizionato in modo relativo per fornire un riferimento al
posizionamento assoluto del link
• Il link è posizionato in modo assoluto così da potersi
espandere liberamente
• Quando il link non è attivato la sua dimensione è pari a
quella del banner ridotto. Attraverso la dichiarazione
overflow:hidden l’immagine al suo interno (più alta di
un fattore 4) viene mostrata solo parzialmente
• Quando il collegamento è attivato, l’altezza del link
diventa tale da mostrare il banner per intero
Diapositiva 211
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
EMULARE I FRAME CON I CSS
Diapositiva 212
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: EMULARE I FRAME CON I CSS
EMULARE I FRAME CON I CSS
• Tramite CSS è possibile riprodurre
un’impaginazione simile a quella che si otterrebbe
con i frame
• La cosa sarebbe relativamente semplice con la
dichiarazione position:fixed, che però non è
supportata da Internet Explorer
Diapositiva 213
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: EMULARE I FRAME CON I CSS
FRAME VERTICALI
<div id="fix">
<ul> … </ul>
</div>
<div id="frame">
<p>Lorem ipsum …</p>
</div>
html,body{
height:100%;
margin:0;padding:0;
}
#fix {
position:fixed;
width:160px; height:100%;
overflow:auto;
padding:0 20px;
}
L’altezza di <html> e <body> è 100% per regolare l’altezza del
#frame {
blocco fisso
position:absolute;
left:200px;top:0;
Il blocco fisso utilizza la proprietà overflow per mostrare i contenuti
padding:0 20px
che non entrassero interamente nella finestra
}
Il secondo blocco è posizionato in modo assoluto per essere
indipendente dal blocco fisso
Diapositiva 214
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: EMULARE I FRAME CON I CSS
FRAME VERTICALI
•
Per Internet Explorer è necessario
aggiungere le seguenti regole:
html,body{
overflow:hidden;
}
#fix{
width /**/:200px;
position:absolute;
top:0;left:0;
}
#frame{
position:static;
margin-left: 200px;
height:100%; overflow:auto;
}
Diapositiva 215
• La prima regola elimina la barra
di scorrimento della finestra del
browser
• La seconda regola posiziona il
primo blocco in modo assoluto.
Sono ereditate le proprietà
sull’altezza e sulla barra di
scorrimento. La larghezza è
regolata in base al box model
errato, ma solo per IE5.x
(grazie al commento fra
dichiarazione e valore)
• La terza regola rende statico il
terzo blocco che gestirà
autonomamente un’eventuale
barra di scorrimento
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: EMULARE I FRAME CON I CSS
FRAME ORIZZONTALI
<div id="top">
…
</div>
<div id="frame">
<p>Lorem ipsum …</p>
</div>
html,body{
margin:0; padding:0;
}
#top {
position:fixed;
height:3em; width:100%;
line-height: 3em;
}
#frame {
padding:3em 20px 1em 20px
}
Diapositiva 216
Poiché il blocco posizionato in modo fisso si
comporta come un box posizionato in modo
assoluto che però non segue lo scorrimento della
pagina, affinché tutto funzioni è sufficiente che il
secondo blocco abbia il padding superiore pari
all’altezza del blocco superiore
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: EMULARE I FRAME CON I CSS
FRAME ORIZZONTALI
• Per Internet Explorer è necessario ricorrere a
degli script come IE7:
http://dean.edwards.name/IE7/
Diapositiva 217
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
STILI ALTERNATIVI
Diapositiva 218
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: EMULARE I FRAME CON I CSS
STILI ALTERNATIVI
• Esistono tre tipi di foglio di stile collegato:
• Fogli di stile permanenti
– Sono sempre attivi
• Fogli di stile preferiti: divengono preferiti i fogli di stile a cui è
associato un valore per l’attributo title del tag <link/>
– Sono attivi al momento di caricare la pagina
– Sono disattivati quando l’utente sceglie uno stile alternativo
(tramite gli appositi menu dei browser più evoluti)
• Fogli di stile alternativi: divengono alternativi i fogli di stile quelli
collegati tramite tag tag <link/> cui è associato l’attributo
rel="alternate stylesheet" ed un valore per l’attributo title
– Non sono attivi al momento di caricare la pagina
– Sono attivati quando l’utente sceglie lo stile alternativo
Diapositiva 219
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: EMULARE I FRAME CON I CSS
STILI ALTERNATIVI
• Esempio: www.zeldman.com
<style type="text/css"
media="all">@import
"/c/c04.css";</style>
<link rel="alternate
stylesheet"
type="text/css"
media="all"
title="darker"
href="/c/darker.css" />
<link rel="alternate
stylesheet"
type="text/css"
media="all"
title="lighter"
href="/c/lighter.css"
/>
Diapositiva 220
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: EMULARE I FRAME CON I CSS
STILI ALTERNATIVI
•
Per i browser che non supportano gli stili alternativi (come Internet Explorer) è
tuttavia possibile usare il Javascript
• In rete si trovano decine di script (http://www.alistapart.com/articles/alternate/)
• Il principio è quello di agire sulla proprietà disabled dell’oggetto <link/>
tramite javascript
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a=document.getElementsByTagName("link")[i]); i++)
{
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled =
false;
}
}
}
Diapositiva 221
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE
I CSS E LA LEGGE 04/2004
Diapositiva 222
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ESEMPIO PRATICO
LEGGE 04/2004 E CSS
• Alcuni requisiti della legge chiamano in causa,
direttamente o indirettamente, i CSS
• L’esempio proposto è stato realizzato tenendo a
mente tali requisiti
• Un template, tuttavia, è coinvolto, per sua stessa
natura, solo in un sotto insieme dei requisiti;
questo sottoinsieme comprende anche, ma non
solo, requisiti che coinvolgono i CSS.
Diapositiva 223
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ESEMPIO PRATICO
LEGGE 04/2004 E CSS
• Requisito n. 1
Enunciato: […] Utilizzare elementi ed attributi in modo
conforme alle specifiche, rispettandone l’aspetto
semantico. […] evitare di utilizzare, all’interno del
linguaggio a marcatori con il quale la pagina è realizzata,
elementi ed attributi per definirne le caratteristiche di
presentazione della pagina […] ricorrendo invece ai Fogli
di Stile CSS (Cascading Style Sheets) per ottenere lo
stesso effetto grafico;
• L’enunciato indica implicitamente (rispetto dell’aspetto
semantico) e direttamente che per formattare una pagina
è bene utilizzare i CSS
Diapositiva 224
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ESEMPIO PRATICO
LEGGE 04/2004 E CSS
• Requisito n. 4
Enunciato: Garantire che tutti gli elementi
informativi e tutte le funzionalità siano disponibili
anche in assenza del particolare colore utilizzato
per presentarli nella pagina.
• È bene evitare di affidare ai CSS in generale e al
colore in particolare un’informazione.
• Se ad esempio si elimina la sottolineatura ai link
differenziandoli dal testo solo per il colore si corre
il rischio di violare il requisito
Diapositiva 225
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ESEMPIO PRATICO
LEGGE 04/2004 E CSS
• Requisito n. 6
Enunciato: Garantire che siano
sempre distinguibili il contenuto
informativo (foreground) e lo
sfondo (background), ricorrendo
a un sufficiente contrasto (nel
caso del testo) […]
• Quando si definisce un colore
per il testo (o lo sfondo) è bene
verificare quali colori potrebbe
ereditare lo sfondo (o il testo)
Diapositiva 226
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ESEMPIO PRATICO
LEGGE 04/2004 E CSS
• Requisito n. 9
Enunciato: Per le tabelle dati usare gli elementi
(marcatori) e gli attributi previsti dalla DTD
adottata per descrivere i contenuti e identificare le
intestazioni di righe e colonne.
• Il rispetto di questo requisito permette di sfruttare
i CSS per formattare al meglio elementi strutturali
quali TH o CAPTION.
Diapositiva 227
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ESEMPIO PRATICO
LEGGE 04/2004 E CSS
• Requisito n. 11
Enunciato: Usare i fogli di stile per controllare la
presentazione dei contenuti e organizzare le
pagine in modo che possano essere lette anche
quando i fogli di stile siano disabilitati o non
supportati.
• Un errore piuttosto comune è utilizzare i CSS
senza tuttavia aver realmente separato i contenuti
dalla loro formattazione: molte pagine realizzate
con i CSS fanno un uso improprio dell’elemento
DIV trascurando del tutto la struttura della pagina
Diapositiva 228
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ESEMPIO PRATICO
LEGGE 04/2004 E CSS
• Requisito n. 12
• Enunciato: La presentazione e i contenuti testuali di una
pagina devono potersi adattare alle dimensioni della
finestra del browser utilizzata dall’utente senza
sovrapposizione degli oggetti presenti o perdita di
informazioni tali da rendere incomprensibile il contenuto,
anche in caso di ridimensionamento, ingrandimento o
riduzione dell’area di visualizzazione o dei caratteri
rispetto ai valori predefiniti di tali parametri.
• I CSS sono coinvolti indirettamente; il dibattito si
concentra sulla possibilità o meno di utilizzare layout a
larghezza fissa.
Diapositiva 229
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ESEMPIO PRATICO
LEGGE 04/2004 E CSS
• Requisito n. 21
• Enunciato: […] per facilitare la selezione e l’attivazione dei
collegamenti presenti in una pagina è necessario
garantire che la distanza verticale di liste di link e la
spaziatura orizzontale tra link consecutivi sia di almeno
0,5 em, le distanze orizzontale e verticale tra i pulsanti di
un modulo sia di almeno 0,5 em e che le dimensioni dei
pulsanti in un modulo siano tali da rendere chiaramente
leggibile l’etichetta in essi contenuta.
• Coinvolge indirettamente i CSS, ma non è chiaro se la
distanza indicata comprenda tutta l’area sensibile del link
o solamente il testo
Diapositiva 230
GIANLUCA TROIANI
INTRODUZIONE AI CSS
SECONDA PARTE: ESEMPIO PRATICO
LEGGE 04/2004 E CSS
• La verifica tecnica comprende la seguente analisi:
5) i contenuti della pagina siano fruibili in caso di
utilizzo delle funzioni previste dai browser per
definire la grandezza dei caratteri;
• Il punto non è affatto chiaro: vorrebbe indicare di
non utilizzare i pixel per dimensionare i caratteri
(per il noto problema di Internet Explorer per
Windows) tuttavia il testo non afferma ciò.
Diapositiva 231
GIANLUCA TROIANI