LINGUAGGI E TECNOLOGIE WEB - SisInfLab

Transcript

Corso di Laurea Magistrale in
Ingegneria Informatica
Corso di Linguaggi e Tecnologie Web
A. A. 2012 - 2013
LINGUAGGI E TECNOLOGIE WEB
CSS
Floriano Scioscia
1
LTW
A.A. 2012/13
DEE - Politecnico di Bari
CSS
• CSS (Cascading Style Sheets, fogli di stile in cascata)
costituisce uno dei fondamentali standard del W3C
• I fogli di stile sono stati progettati per consentire un
controllo preciso di caratteristiche legate all'aspetto con
cui è presentato un documento HTML od XML
• Tutte queste caratteristiche vengono così separate dal
contenuto vero e proprio del documento
• La peculiarità è nella parola "cascading": è prevista (ed
incoraggiata) la presenza di più fogli di stile, che agiscono
uno dopo l'altro, in cascata
• CSS è indipendente da un particolare insieme di elementi
ed attributi HTML, cosicché potrà supportare facilmente
nuove versioni del linguaggio
CSS - Floriano Scioscia
2
LTW
A.A. 2012/13
Versioni di CSS
• CSS level 1 o CSS1 (dicembre 1996) è stato concepito come
un linguaggio di formattazione visiva
– permette di specificare caratteristiche tipografiche e di presentazione per
gli elementi di un documento HTML destinato ad essere visualizzato
• CSS level 2 (raccomandazione W3C maggio 1998, versione 2.1
del luglio 2007)
– supporto per diversi media (es. fogli di stile audio per documenti destinati
alla lettura di una voce computerizzata)
– un linguaggio di layout sofisticato e complesso
• CSS level 3 (specifiche suddivise in moduli)
•
Le versioni più recenti dei Web browser più diffusi (IE 8+, Firefox 3+, Safari,
Opera, Chrome) supportano completamente CSS 2.1
•
Il supporto a CSS 3 è ancora molto frammentario
3
LTW
A.A. 2012/13
Integrare HTML e CSS
• HTML consente l'uso di un foglio di stile CSS in quattro
modi diversi:
1. come attributo nel tag di un particolare elemento HTML
N.B. è consigliabile non abusare di questa possibilità, per
mantenere la separazione tra presentazione e contenuto
2. descritto nell'intestazione del documento mediante il tag style
3. importato da un file esterno mediante il tag style
4. indicato dal tag link nell'intestazione del documento
• E' inoltre possibile assegnare gli stili agli elementi HTML in
tre modi:
1. a tutti gli elementi di un certo tipo (in base al nome dell'elemento)
2. a tutti gli elementi di una certa categoria (identificati dal valore
dell'attributo class)
3. ad uno specifico elemento (identificato dal valore dell'attributo id)
4
LTW
A.A. 2012/13
Uso dell'attributo style
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Esempio di utilizzo 1</title>
</head>
<body>
<h1 style="color:red;">
utilizzo dei css
</h1>
<p>
questo esempio mostra come modificare il
colore del testo con l’attributo style
</p>
</body>
</html>
5
LTW
A.A. 2012/13
Uso del tag style
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
<html>
<head>
<title>esempio di utilizzo 2</title>
<style type="text/css" media="screen">
h1 {color:blue;}
</style>
Tipo di supporto di
riproduzione a cui è destinato
</head>
lo stile. Alcuni valori possibili:
<body>
- screen (monitor di computer)
<h1>Uso dei CSS</h1>
- tv (televisore)
<p>
- handheld (palmare)
Questo esempio mostra come
modificare il colore del testo - print (stampa cartacea)
- braille (tastiere Braille per
usando il tag style
non vedenti)
</p>
- aural (lettura con voce
</body>
computerizzata)
</html>
- all (tutti i media possibili)
6
LTW
A.A. 2012/13
Uso della direttiva @import
<html>
<head>
<style type="text/css">
@import url(miostile.css)
</style>
</head>
<body>
<p>
Questo esempio mostra come modificare il colore del
testo usando il tag style con la direttiva import
</p>
</body>
miostile.css
</html>
h1 { color: blue; }
7
LTW
A.A. 2012/13
Riferimento mediante tag link
<html>
<head>
<link type="text/css" rel="stylesheet"
href="./miostile.css" />
</head>
<body>
<p>
Questo esempio mostra come applicare un foglio di
stile usando il tag link
</p>
</body>
miostile.css
</html>
h1 { color: blue; }
8
LTW
A.A. 2012/13
Sintassi CSS – 1
• Proprietà
– una caratteristica di stile assegnabile ad un elemento
– CSS1 prevede 53 proprietà diverse, CSS2 ben 121!
– color, font-family, margin, etc.
• Statement
– assegnazione di una proprietà CSS. Ha la sintassi
proprietà: valore
Esempi:
color: blue;
font-family: arial, verdana, sans-serif;
border: 1px #cdcdcd dashed;
9
LTW
A.A. 2012/13
Sintassi CSS – 2
• Selettore
– specifica un elemento o una classe di elementi HTML (o XML) al
fine di associarvi caratteristiche CSS
h1, p.heading, td[valign]
• Regola
– un blocco di statement associati ad un elemento attraverso l'uso
di un selettore. Ha la sintassi
selettore { statement1; statement2; … }
h1 {
color: blue;
}
• Commento
– è possibile inserire un commento racchiuso fra i simboli /* e */
/* Il mio primo commento */
10
LTW
A.A. 2012/13
Selettori CSS – 1
• Selettore di tipo ( e )
– seleziona tutti gli elementi e
– Esempi
body {
color: blue;
font-size: 12pt;
margin: 15px;
}
h1 { color: red; font-size: 18pt; }
• Selettori di prossimità ( e f, e > f, e + f )
– selezionano gli elementi f che siano rispettivamente discendenti,
figli diretti o immediatamente successivi ad elementi e
p a { color: #008082; }
a > strong { font-weight: bold; }
h3 + table { margin:10px; border: 2px double
red; }
11
LTW
A.A. 2012/13
Selettori CSS – 2
• Selettori di attributi ( e[foo] e[foo="bar"] )
– selezionano solo gli elementi e che posseggono l'attributo
specificato o in cui esso ha il valore indicato
a[href="http://www.poliba.it/"] { color:red }
• Selettori di classe ( e.c .c e#id )
– il primo equivale a e[class="c"]
– il secondo seleziona tutti gli elementi di classe c, qualsiasi sia il tipo
– il terzo equivale a e[id="id"]
h1.heavy { color: red; font-weight: bold; }
.content { color: black; font: monospaced; }
p#note { color: gray; font-size: 9pt; }
12
LTW
A.A. 2012/13
Selettori CSS – 3
• Selettore di pseudoelemento ( e:pe )
– è attivo solo in corrispondenza di una parte di ciascun elemento e
• before / after: vero prima/dopo il contenuto dell'elemento e
• first-line / first-letter: vero per la prima riga / lettera nell'elemento e
p:first-letter { font-size: 300%; font-family:
"script"; float: left; margin: -5px 3px 0 0; }
13
LTW
A.A. 2012/13
Selettori CSS – 4
• Selettore di pseudoclasse ( e:condition )
– seleziona un elemento solo se è verificata la condizione
• first-child: vero se l'elemento è il primo figlio di e
• link, visited: vero se l'elemento e è, rispettivamente, un link non
ancora visitato o un link già visitato
• hover, active, focus: vero se, rispettivamente, sull'elemento e passa il
mouse, il mouse è premuto, o l'elemento è selezionato per accettare
input
• lang(c): vero se per l'elemento e è specificata la lingua c
a:hover { color: red; text-decoration: none; }
• Simboli speciali:
– * (asterisco): selettore universale (seleziona tutti gli elementi)
– , (virgola): raggruppamento di selettori (più selettori possono
usare lo stesso blocco di statement se separati da virgola)
14
LTW
A.A. 2012/13
Tipi di dato – 1
• CSS prevede diversi tipi di dato per le proprietà di stile
• In generale un browser tende ad ignorare, se possibile,
una proprietà di stile mal definita
• Tipi di dato
– Interi e reali: rappresentano numeri assoluti
– Lunghezze: dimensioni espresse mediante una unità di misura
• px: pixel
• pt: punto tipografico, corrisponde a 1/72 di pollice, pari a circa 0,353
mm (molto usato per specificare la dimensione dei font, e.g. 12pt)
• em: unità di misura tipografica relativa (1 em corrisponde all'altezza in
punti tipografici del font attualmente usato)
• % : misura espressa in percentuale di spazio del blocco contenente, o
dell'intera area visibile della pagina per l'elemento body
• mm, cm, in: dimensione assoluta in millimetri, centimetri o pollici
15
LTW
A.A. 2012/13
Tipi di dato – 2
• Altri tipi di dato utilizzabili nei CSS
– URI: fa riferimento ad una risorsa in rete. Sintassi url(http://…)
– Colore: specificabile in tre modi
• nome per uno tra 16 colori predefiniti tra cui red, blue, white,
silver
• RGB: ognuna delle tre componenti (rossa, verde, blu) è un intero da 0 a
255, e.g. rosso puro è rgb(255,0,0)
• notazione esadecimale #rrggbb, e.g. rosso puro è #ff0000
– Stringa: una stringa posta tra virgolette semplici o doppie. Si usa la
barra rovesciata per includere le virgolette nella stringa
"Ho detto: \"Ciao\"."
16
LTW
A.A. 2012/13
Box model – 1
• Nel layout di un
documento HTML,
ogni elemento
occuperà un blocco
(box) rettangolare
sullo schermo
– in fase di
visualizzazione ne
vengono calcolati
posizione, dimensioni
e le altre
caratteristiche definite
nei fogli di stile in
base al box model
riportato a lato
17
LTW
A.A. 2012/13
Box model – 2
• Margin: la regione che separa un blocco dall'altro,
necessariamente trasparente
– margin-top, margin-bottom, margin-left, margin-right:
dimensioni del margine del blocco
– notazione abbreviata: margin: t r b l;
• Border: il bordo di un blocco
– border-top, border-bottom, border-left,
border-right, border-width:
dimensioni del bordo
– border-color: colore del bordo;
– border-style: può assumere i valori
none, dotted, dashed, solid, double,
groove, ridge, inset, outset.
– notazione abbreviata:
border: dim color style;
18
LTW
A.A. 2012/13
Box model – 3
• Padding: spazio vuoto fra il bordo del blocco ed il suo
contenuto. Ha lo stesso sfondo del contenuto
– padding-top, padding-bottom, padding-left, padding-right:
dimensioni del padding del blocco
– notazione abbreviata: padding: t r b l;
• Content: la regione in cui sta il contenuto dell'elemento
– background-color, background-image, background-repeat,
background-attachment, background-position: colore, immagine e
meccanismo di ripetizione dell'immagine di sfondo del blocco
19
LTW
A.A. 2012/13
Posizionamento dei box – 1
• Un riquadro contenuto all’interno di un altro blocco è
associato gerarchicamente al genitore
• Quattro possibili disposizioni dei blocco
– flusso verticale: ogni blocco va a nuova riga (e.g. paragrafi, tabelle)
– flusso orizzontale (inline), e.g. singole parole, elementi <a></a>
– fluttuante (float): un blocco allineato all'estrema sinistra / destra
all'interno del suo genitore; può essere affiancato da altri blocchi
– posizionamento assoluto: disposizione dei blocchi sullo schermo; è
indipendente dal flusso e può sovrapporsi ad altri blocchi
• E' possibile inserire un nuovo blocco con flusso verticale
mediante il tag div
• E' possibile inserire un nuovo inline mediante il tag span
20
LTW
A.A. 2012/13
Posizionamento dei box – 2
• display ( inline | block | list-item | run-in | … | none )
– tipo di box da utilizzare per l'elemento: un blocco, un inline, una
lista, una cella di tabella, etc.
• position ( static | relative | absolute | fixed )
– posizionamento rispetto al flusso del documento
• float ( left | right | none )
– definisce un box fluttuante
• z-index
– la posizione del box sull'asse z, perpendicolare allo schermo. Il
valore più alto è più “vicino” al lettore, e quindi nasconde i blocchi
sottostanti. Il valore predefinito è 0
– N.B.: per default lo sfondo di un box è trasparente
• top, bottom, left, right: coordinate del box
• width, height: dimensioni usabili invece di right e bottom
21
LTW
A.A. 2012/13
Visibilità dei box
• Diversi modi di alterare la visibilità di un box
• display: none
– Esclude il box dal layout della pagina, come se l'elemento non
esistesse affatto nel documento
• visibility ( visible | hidden )
– Rende visibile o invisibile il box (bordo, padding e contenuto), ma
esso occupa sempre il suo spazio nel layout della pagina
• opacity
– Indica il grado di trasparenza con cui è disegnato il box, da 0.
(completamente trasparente) a 1. (nessuna trasparenza)
• Variando queste proprietà tramite Javascript, possono
essere realizzate applicazioni Web con GUI (graphical user
interface) modificabili
22
LTW
A.A. 2012/13
Box model – esempio 1
...
href="./css_1.css" />
...
<div id="uno">
Primo blocco. Notare padding e width.
</div>
<div id="due">
Secondo blocco. Notare
l'effetto di margin e padding.
<span style="background-color:cyan;">
Questa linea ha uno sfondo diverso. </span>
</div>
<div id="tre">
Riquadro con posizionamento
assoluto, può sovrapporsi agli altri
</div>
...
css_1.css
#uno {
background-color: blue;
padding: 25px;
width: 80%;
color: white;
}
#due {
margin: 25px;
border: 2px red dashed;
padding: 0px;
width: 300px;
}
#tre {
background-color: gold;
position: absolute;
top: 60px; left: 320px;
width: 150px; height: 110px;
padding: 2px;
text-align: right;
}
23
LTW
A.A. 2012/13
...
...
<div id="uno">
</div>
<div id="due">
</div>
<div id="tre">
</div>
...
css_2.css
#uno {
padding: 25px;
width: 80%;
color: white;
}
#due {
margin: 10px;
padding: 0px;
width: 300px;
}
#tre {
z-index: -1;
position: absolute;
padding: 2px;
text-align: right;
}
24
LTW
A.A. 2012/13
...
...
<div id="uno">
</div>
<div id="due">
</div>
<div id="tre">
</div>
...
css_3.css
#uno {
padding: 25px;
width: 80%;
color: white;
display: none;
}
#due {
margin: 10px;
padding: 0px;
width: 300px;
opacity: 0.5;
}
#tre {
z-index: -1;
position: absolute;
padding: 2px;
text-align: right;
}
25
LTW
A.A. 2012/13
Stile dei font – 1
• font-family: indica il nome del font da utilizzare per il
testo e le alternative nel caso in cui il font non sia
presente nella macchina ospite. E' buona norma indicare
come ultima alternativa un carattere standard quali: serif
(con grazie), sans-serif (senza grazie), monospaced
(larghezza fissa)
– Nota: le grazie sono quegli abbellimenti tipografici delle lettere, che
dovrebbero servire a rendere più leggibile il testo
– Esempio
p { font-family: "tahoma" "arial" sans-serif; }
• font-style (normal | italic | oblique): imposta in corsivo o
in obliquo un testo
• font-variant (normal | small-caps): il valore small-caps
crea l'effetto maiuscoletto, normal non introduce
variazioni
26
LTW
A.A. 2012/13
Stile dei font – 2
• font-size: specifica le dimensioni del font; 4 modi possibili
– grandezze assoluta in un insieme di valori predefiniti
(xx-small | x-small | small | medium | large | x-large | xx-large)
– grandezza assoluta in punti, e.g. font-size: 12pt;
– grandezza relativa alle dimensioni predefinite del testo nel blocco
contenitore (smaller | larger)
– grandezza percentuale rispetto al valore predefinito per il testo nel
blocco contenitore, e.g. font-size: 110%;
• font-weight (normal | bold | bolder | lighter | 100 – 900)
–
–
–
–
specifica il “peso” del font, cioè quanto è marcato il tratto
bolder e lighter sono relativi al valore predefinito
gli altri valori sono pesi assoluti
100-900 è una scala che va dal peso minimo al massimo; non tutti
i valori da 100 a 900 sono disponibili per tutti i font, il peso
effettivamente adottato sarà il più vicino disponibile
27
LTW
A.A. 2012/13
Stile del testo
• text-indent: imposta l’indentazione in valore assoluto o
percentuale
• text-align (left | right | center | justify): imposta
l’allineamento del testo nel blocco di riferimento
• line-height: permette di impostare l'interlinea
• text-decoration (none | underline | overline | line-through
| blink): permette di decorare il testo
– i possibili valori sono: non decorato, sottolineato, sopralineato,
cancellato, lampeggiante
• letter-spacing e word-spacing: spaziatura tra lettere e tra
parole, specificata in valore
– assoluto, e.g. letter-spacing: 1em
– relativo al valore predefinito, e.g. word-spacing: +0.2em
28
LTW
A.A. 2012/13
Tabelle
• CSS permette di definire regole sofisticate per gli elementi
di una tabella
– gruppi di colonne, colonne, gruppi di righe, righe e singole celle
hanno proprietà analoghe a quelle del box model per i blocchi
29
LTW
A.A. 2012/13
Tabelle - esempio
• Applichiamo il seguente foglio di stile all'esempio di
tabella visto nelle slide su HTML:
table {
width: 100%;
background-color: #ffb400;
border: 10px double black;
font-family: "Forte" serif;
}
table caption {
color: green;
font-size: 150%;
font-variant: small-caps;
}
td {
color: blue;
background-color: #ffff80;
text-align: center;
padding: 5px;
}
30
LTW
A.A. 2012/13
Ereditarietà delle proprietà
• Se non viene specificata una proprietà, CSS assume un
valore predefinito che generalmente corrisponde a
"inherit", cioè eredita la proprietà dal contenitore in cui è
inserito l’elemento
<p style="color:red;">
Questo testo è rosso.
<em> Questo testo è
rosso e corsivo,
<span style="color: blue;">
mentre questo testo
è blu e corsivo.
</span>
</em>
</p>
31
LTW
A.A. 2012/13
Layout di pagina in puro CSS – 1
Esempio
32
LTW
A.A. 2012/13
Il documento HTML
<html>
<head>
<title> Creazione di un layout solo con CSS senza tabelle
</title>
<style type="text/css"> @import url(layout1.css);
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>1. Area dell'intestazione</h1>
</div>
<div class="menu">
<p>2. Area del menu principale</p>
</div>
33
LTW
A.A. 2012/13
Il documento HTML (continua)
<div class="menubar">
<p>3. Menu laterale</p>
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">Voce menu 1</a></li>
<li><a href="#">Voce menu 2</a></li>
</ul>
</div>
<div class="content">
<p>4. Contenuto principale [...]</p>
</div>
<div class="trailer">
5. Area di coda della pagina
</div>
</div>
</body>
</html>
34
LTW
A.A. 2012/13
Il foglio di stile
body {
font-family: "century schoolbook", "times new roman", serif;
}
div.container
width: 90%;
border: 1px
background:
}
h1 {
{ /* Stile del contenitore principale */
margin: .5em auto; /* centra in browser
solid black; text-align: left;
yellow; /* come il blocco float per il menu
margin: 0px;
padding: 0px; color: white;
.header { /* Stile dell'header del documento
padding: 1em; background: #99B7DB;
border-bottom: 1px solid black;
}
diversi da IE*/
laterale */
}
*/
35
LTW
A.A. 2012/13
Il foglio di stile (continua)
.menu { /* Stile del menu principale */
background: green;
margin-bottom: 0px;
padding-top: .5em;
text-align: center;
border-bottom: 1px solid black;
}
.menubar { /* Stile del
float: left;
width: 20%;
margin-top: 0px;
background: yellow;
}
menu laterale */
.menubar ul {
list-style-type: none;
margin-left: 0px;
padding-left: 1em;
}
36
LTW
A.A. 2012/13
.menubar a:hover {
color: red;
.menubar a {
text-decoration: none;
font-weight: bold;
}
}
/* link non sottolineati nel menu */
.content { /* Stile del corpo del testo
background: white;
margin-left: 20%;
padding: 1em;
border-left: 1px solid black;
}
*/
37
LTW
A.A. 2012/13
.trailer { /* Stile del footer del documento */
clear: both; /* evita blocchi float ai lati */
margin: 0px;
padding: .5em;
background: #99b7db;
font-size: 75%;
text-align: right;
border-top: 1px solid black;
}
38
LTW
A.A. 2012/13
Stili in cascata
• E' possibile definire più regole per gli stessi elementi; sono
applicate con un meccanismo a cascata. Nell'ordine:
– User Agent: il browser definisce (esplicitamente come preferenze
utente o implicitamente codificandole nel software) regole di stile
predefinite per gli elementi dei documenti
– User: se il browser lo consente, l'utente può fornire un proprio
foglio di stile per indicare regole di suo gradimento
– Author: l'autore delle pagine fornisce i fogli di stile per un
documento specifico, nei modi visti finora
• Nella cascata gli stili importati nell'header HTML con i tag link e
style precedono gli stili definiti nel tag di uno specifico elemento
con l'attributo style (quindi questi ultimi sopravanzano i precedenti)
– Regole !important: quando una regola (tipicamente dell'utente)
è seguita dalla parola-chiave !important, essa sopravanza una
analoga regola di senso diverso dell'autore
h1 { font-size: 18pt !important; }
39
LTW
A.A. 2012/13
CSS Media Queries
• In CSS 2, la distinzione tra diversi media a cui applicare fogli di
stile differenti è qualitativa e rigida → poco sfruttata sia dai
browser sia dai Web designer
• In particolare, la maggioranza di siti Web attuali si adatta
difficilmente alla grande varietà di schermi attualmente usati
(computer, smartphone, tablet, TV, etc.)
• CSS 3 ha pertanto esteso la specifica attraverso le Media
Queries (W3C recommendation, giugno 2012), che permettono
di adattarsi (anche dinamicamente) a parametri quantitativi:
–
–
–
–
dimensioni fisiche, dimensioni in pixel
risoluzione (in DPI/PPI, dots/pixels per inch, punti/pixel per pollice)
orientamento verticale/orizzontale
gamma di colori supportati
• Specifica già supportata dalle versioni più recenti di tutti i
principali browser per computer e dispositivi mobili
40
LTW
A.A. 2012/13
CSS Media Queries - principi
• Nell'attributo media del collegamento a un foglio di stile è possibile
inserire espressioni logiche composte da una o più condizioni
relative alle caratteristiche del mezzo
• Il foglio di stile verrà applicato solo se il mezzo verifica l'espressione
• Esempio:
– Adottare un foglio di stile per schermi con larghezza minore di 500 pixel e uno per
quelli con larghezza maggiore
<link href="./small.css" rel="stylesheet" media="screen and
(max-width: 500px)" />
<link href="./large.css" rel="stylesheet" media="screen and
(min-width: 501px)" />
• In questo modo è possibile progettare un layout e uno stile in grado
di adattarsi a diverse categorie di dispositivi (con granularità a
piacere), inclusi quelli che possono variare dinamicamente le loro
proprietà (risoluzione, orientamento, etc.)
– Tale approccio, di recente diffusione, è detto responsive Web design
41
LTW
A.A. 2012/13
CSS Media Queries - sintassi
• Una Media Query è composta da:
– Un tipo di media (all|aural|braille|handheld|print|
projection|screen|tty|tv)
– Una sequenza di condizioni in and logico tra loro (con la parola chiave
and)
– Più Media Query separate da virgola sono in or logico tra loro
• Tre possibili modi di applicare le Media Queries:
– Collegamento da pagina HTML a foglio di stile CSS
<link href="./small.css" rel="stylesheet" media="screen and (maxwidth: 500px), all and (max-width: 2cm)" />
– Direttiva @import per richiamare un foglio di stile CSS da un altro
@import url("small.css") screen and (max-width: 500px);
– Direttiva @media direttamente nel foglio di stile CSS
@media screen and (max-width: 500px) { .column { float: none; } }
42
LTW
A.A. 2012/13
CSS Media Queries - proprietà
•
•
•
•
•
width larghezza dell'area visibile della pagina
height altezza dell'area visibile della pagina
device-width larghezza dell'intero schermo-mezzo
device-height altezza dell'intero schermo-mezzo
aspect-ratio, device-aspect-ratio rapporto d'aspetto
(larghezza/altezza) dell'area visibile o dell'intero schermo
• color minimo numero di bit per pixel per componente RGB
– è pari a 0 per dispositivi monocromatici
– esempio: 256 colori, 8 bpp → 3 bpp R, 3 bpp G, 2 bpp B → color è pari a 2
• monochrome numero di bit per pixel per i livelli di grigio
– è pari a 0 per dispositivi a colori
• orientation:(portrait|landscape) orientamento verticale/orizzontale
• resolution risoluzione (in dpi oppure dpcm)
43
LTW
A.A. 2012/13
CSS Media Queries - condizioni
• Sulle proprietà quantitative possono essere imposte condizioni di
valore esatto, minimo o massimo
• In questi ultimi due casi si aggiungono i prefissi min- e max- al
nome della proprietà
• Esempi:
– Due stili diversi per stampa a colori e in gradazioni di grigio
• print and (color)
• print and (monochrome)
– Distinguere in base alla risoluzione (es. per discriminare TV, monitor di
computer e smartphone)
• screen and min-width:640px and min-height:480px and max-resolution:100dpi
• screen and min-width:800px and min-height:480px and min-resolution:101dpi
and max-resolution:200dpi
• screen and min-width:800px and min-height:480px and min-resolution:201dpi
44
LTW
A.A. 2012/13
Responsive Web design - esempio
•
Considerando l'esempio di layout di pagina in
puro CSS visto prima, aggiungiamo una
media query e una regola per ridisporre in
verticale il layout se l'orientamento è
verticale o la larghezza della pagina è piccola
(e.g. su cellulare)
@media all and (orientation: portrait),
screen and (max-width: 600px)
{
.header, .menu, .menubar,
.content, .trailer {
float: none; width: auto; margin: 0;
}
}
•
Questo genere di layout dinamico era in
precedenza implementato usando JavaScript,
con alcuni svantaggi:
– uniche proprietà accessibili: larghezza e altezza
– compatibilità cross-browser problematica
– funziona solo se JavaScript è abilitato
45
LTW
A.A. 2012/13
Convalida di CSS
• Il W3C offre un servizio di convalida (validation) di fogli
di stile CSS, per controllare se sono aderenti agli standard
– http://jigsaw.w3.org/css-validator/
• E' possibile sottoporre a convalida fogli di stile
– pubblicati sul web, semplicemente inserendone l'indirizzo
– residenti nel nostro filesystem, facendone l'upload
– inseriti direttamente in un'apposita area di testo
• In caso di successo si può aggiungere ad una pagina il
simbolo
46
LTW
A.A. 2012/13
Acid3 Test
• Pagina di test del Web Standards Project
http://acid3.acidtests.org/
• Suite di 100 test per valutare la compatibilità di un
browser con
–
–
–
–
HTML
CSS
DOM
Javascript
47
LTW
A.A. 2012/13
Riferimenti
• Specifiche
– E.J. Etemad (editor), Cascading Style Sheets (CSS) Snapshot 2010, W3C
Working Group Note 12 May 2011, http://www.w3.org/TR/CSS/
– B. Bos, T. Çelik, I. Hickson, H. Lie (editors), Cascading Style Sheets Level
2 Revision 1 (CSS 2.1) Specification, W3C Recommendation 7 June 2011,
http://www.w3.org/TR/CSS2/
– F. Rivoal (editor), Media Queries, W3C Recommendation 19 June 2012,
http://www.w3.org/TR/css3-mediaqueries/
• Testi
– G. Troiani, CSS Guida Completa, 2005, Apogeo
48

LINGUAGGI E TECNOLOGIE WEB - SisInfLab

Transcript

Documenti analoghi

Soluzioni capitolo 11 1

myCSS. Manuale di registrazione.

THEDARKROOM FIRENZE

WHAT ACTUALLY HAPPENS WHEN GRANULAR MATERIALS

Caso pillola Yasmin: «La sentenza del Tribunale federale dà

Corso Online Web Designer

Riassunto CSS Tutorial - isis einaudi

Lezione 1 (stampa)

informatica base Web content editor – primo livello diurno/serale