Cascading Style Sheets Level 2

Transcript

1
CIM - WDT CSS2
2
CIM - WDT CSS2
Comunicazione, Innovazione, Multimedialità
Web Design & Technologies
Cascading Style Sheets
Level 2
Marco Porta
Marco Porta
Cosa sono i Cascading Style Sheet ?
Gli style sheet rappresentano un metodo semplice (ma potente) per definire l’”aspetto” dei
documenti HTML
descrivono come un documento deve essere rappresentato sullo schermo (o stampato, o, magari,
anche pronunciato dai non-visual user agents ... )
Principali vantaggi offerti dagli style sheet:




forniscono nuove possibilità per il controllo del rendering della pagina
sono semplici da definire
possono aumentare notevolmente la velocità di download delle pagine
permettono di ottenere codice HTML più flessibile e gestibile
I Cascading Style Sheet (CSS) sono in via di progressiva standardizzazione da parte del
W3C
il loro nome deriva dal fatto che più CSS possono essere specificati (“in cascata”) per lo stesso
documento
Marco Porta
3
CIM - WDT CSS2
Cascading Style Sheets – Livelli 1 e 2
Cascading Style Sheets – Level 1 (CSS1)
 raccomandazione ufficiale W3C: 17 dicembre 1996
 sito con la specifica ufficiale: http://www.w3.org/TR/REC-CSS1
 sono stati il primo tentativo di separare il più possibile lo stile di presentazione dei documenti
dal loro contenuto
 permettono di associare stili (quali font, colori, spaziature, ... ) ai documenti HTML
Cascading Style Sheets – Level 2 (CSS2)
 raccomandazione ufficiale W3C: 12 maggio 1998
 sito con la specifica ufficiale: http://www.w3.org/TR/REC-CSS2
 si basano sui CSS1 (con i quali sono quasi pienamente compatibili) e ne rappresentano
un’evoluzione
 sono media-specific style sheets: le presentazioni dei documenti possono essere adattate ai
browser visuali, alle stampanti, ai dispositivi uditivi, ai sistemi braille, ...
Qualunque livello di CSS (l’1, il 2 e quelli futuri) utilizza la stessa sintassi di base
Marco Porta
4
CIM - WDT CSS2
Come specificare gli style sheet per un documento ?
Sono possibili tre metodi:
1. inclusione diretta nel documento HTML
2. link ad un CSS esterno (soluzione migliore)
Esempio:
Esempio:
<html>
<html>
<head>
<HTML>
<HEAD>
<title>La mia pagina</title>
<TITLE>La mia pagina</TITLE>
<styletype="text/css">
type="text/css">
<STYLE
h1
{
color:blue
blue} }
H1 { color:
</style>
</STYLE>
</HEAD>
</head>
<BODY>
<body>
...........
...........
...........
...........
</BODY>
</body>
</HTML>
</html>
<title>La mia pagina</title>
<link rel="stylesheet"
href="miocss.css"
type="text/css">
</head>
<body>
...........
...........
</body>
3. Integrazione nel tag
Esempio:
<p style="color: red">
Marco Porta
<head>
</html>
5
CIM - WDT CSS2
Elementi sintattici di base dei CSS
Statement
una at-rule o un rule-set (i CSS sono costituiti da una sequenza di statement ... )
At-rule
inizia con il carattere @ ed è immediatamente seguita da da un identificatore (una stringa)
Blocco
“qualcosa” racchiuso tra parentesi graffe ( { ..... } )
Rule set (o semplicemente rule, regola)
un selettore seguito da un blocco dichiarativo
Selettore
una combinazione di una o più stringhe associate ad un blocco dichiarativo, che precedono
Blocco dichiarativo
una sequenza di dichiarazioni separate dal carattere ‘;’ e racchiuse tra parentesi graffe
Dichiarazione
una proprietà seguita dal carattere ‘:’ e da uno o più valori (stringhe con un certo significato)
Proprietà
un identificatore
Marco Porta
6
E subito... un esempio
body {
color: black;
font-family: helvetica, sans-serif;
background: white;
margin: 2em;
}
h1, h2, h3, h4, h5, h6 {
text-align: left;
}
h1 {
clear: left;
margin-top: 2em;
text-align: center;
}
pre {
font-family: monospace;
margin-left: 1em;
font-size: 90%
}
body, h1, h2, ..., h6, pre sono selettori
color, font-family, background,
margin, text-align, clear,
margin-top, margin-left, fontsize e font-style sono proprietà
black, helvetica, sans-serif,
white, 2em, left, center,
monospace, 1em, 90%, right e
italic sono valori
color: black è una dichiarazione
{
clear: left;
margin-top: 2em;
text-align: center;
}
è un blocco dichiarativo
Marco Porta
CIM - WDT CSS2
7
CIM - WDT CSS2
8
CIM - WDT CSS2
Document tree di un documento HTML
È la scomposizione del documento secondo la gerarchia dei suoi elementi
Esempio:
<htmlL>
HTML
<head>
<title>Una pagina HTML</title>
</head>
<body>
<h1>La mia pagina</h1>
<p>Le quattro stagioni:</p>
<ul>
HEAD
TITLE
<li>Inverno</li>
<li>Primavera</li>
<li>Estate</li>
<li>Autunno</li>
BODY
H1
P
LI
UL
LI LI
</ul>
</body>
</html>
Marco Porta
Selettori
 Un selettore, tipicamente, è il nome di un elemento HTML o una combinazione di più
nomi di elementi
Esempi: h1, h2, ..., p, em, pre, body, img, a, h1 + h2, ...
 Se più selettori condividono lo stesso blocco dichiarativo, possono essere raggruppati
in una lista separata da virgole
Esempio:
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
è equivalente a:
h1, h2 { font-family: sans-serif }
 È possibile fare in modo che un selettore abbia uno stile diverso a seconda della sua
posizione gerarchica nel document tree
Esempio:
h1 { color: red }
em { color: red }
h1 em { color: blue }
significa che il colore del testo racchiuso tra la coppia di tag <EM> e </EM> in un documento
HTML sarà rosso, a meno che non si trovi a sua volta tra la coppia di tag <H1> e </H1>, nel
qual caso sarà blu
Marco Porta
9
CIM - WDT CSS2
... selettori (segue)
 È possibile specificare lo stile di un selettore quando figlio di un altro selettore
Esempio:
BODY > P { line-height: 1.3 }
definisce lo stile di tutti gli elementi P che sono figli di BODY
 È possibile specificare lo stile che un selettore deve avere quando è adiacente ad un
certo altro selettore
Esempio:
H1 + H2 { margin-top: -5mm }
riduce di 5 mm lo spazio verticale che separa un elemento H2 da un elemento H1 che sia
immediatamente precedente
 È possibile specificare lo stile da applicare ad un selettore in corrispondenza di certi
attributi definiti nel documento HTML
Esempio:
H1[title] { color: blue; }
significa che se è “settato” l’attributo title, il colore dell’elemento H1 deve essere blue
A[href="vision.unipv.it"] { color: red }
significa che se l’attributo href vale "vision.unipv.it", il colore del link deve essere red
Marco Porta
10
CIM - WDT CSS2
 È possibile specificare lo stile da applicare ad un selettore in corrispondenza di certe
classi definite nel documento HTML
Esempio:
h1.titolo_blu { color: blue; }
significa che quando l’attributo class di un elemento H1 è posto uguale a titolo_blu, il
colore del testo deve essere blue
<h1 class="titolo_blu">Un titolo ...</h1>
Esempio: *.verde { color: green }
significa che quando l’attributo class di un qualsiasi elemento vale verde, il colore del testo
per quell’elemento deve essere green
Esempio: p.verde.verdino { color: green }
significa che quando all’attributo class di un elemento P viene assegnata una lista di valori
che includono verde e verdino, il colore del testo deve essere green
Secondo questa regola, il testo dell’elemento P seguente sarebbe di colore green
<p class="verde giallo marrone verdino">
Marco Porta
11
CIM - WDT CSS2
 Pseudo-classe :first-child
Esempio: DIV > P:first-child { text-indent: 0 }
quando un elemento P è il primo figlio di un elemento DIV, viene eliminata l’indentazione
 Pseudo-classi :link e :visited
Esempio: A:link { color: red }
A:visited { color: blue }
specifica che un link non ancora visitato deve essere rosso, mentre un link già visitato deve
essere blu
 Pseudo-classi dinamiche :hover e :active
Esempio: A:hover
A:active
{ color: yellow }
{ color: blue }
specifica che: 1) quando il cursore del mouse (o di un altro dispositivo di puntamento) è sopra
un link, il link deve essere giallo; 2) quando un link sta per essere attivato (ad esempio, l’utente
ha premuto il pulsante del mouse ma non l’ha ancora rilasciato), il suo colore deve essere blu
Marco Porta
12
CIM - WDT CSS2
 Pseudo-classe :lang
Esempio: HTML:lang(fr) { quotes: '«' '»' }
HTML:lang(de) { quotes: '»' '«' }
specifica quali devono essere le “virgolette” aperte e chiuse a seconda che la lingua dichiarata
per il documento sia il francese o il tedesco
 Pseudo-elemento :first-line
Esempio: P:first-line { text-transform: uppercase }
specifica che la prima riga di ogni paragrafo deve essere tutta in maiuscolo
 Pseudo-elementi :before e :after
Esempio: P:before { content: "-->" }
inserisce prima di ogni paragrafo la stringa “--> “
 Pseudo elemento :first-letter
consente di ottenere particolari effetti tipografici. Esempio:
Marco Porta
13
CIM - WDT CSS2
Valori “particolari” (1): lunghezze
Si distinguono due tipi di unità di lunghezza: unità relative e unità assolute. Le unità
relative specificano la lunghezza relativamente ad un’altra proprietà di lunghezza
Le unità di lunghezza
relative sono:
em : la dimensione del font dell’elemento in cui l’unità è usata
ex :
l’altezza del carattere ‘x’ del font in cui l’unità è usata
px :
pixel
Esempi:
H1 { font-size: 1.2em }
definisce per l’elemento H1 una dimensione del font del 20% più grande della dimensione
“ereditata” dall’elemento
H1 { font-size: 1.5ex }
definisce per l’elemento H1 una dimensione del font pari a una volta e mezza l’altezza del
carattere ‘x’ del font “ereditato” dall’elemento
H1 { font-size: 13px }
definisce per l’elemento H1 una dimensione del font pari a 13 pixel
Marco Porta
14
CIM - WDT CSS2
... valori “particolari” (1): lunghezze (segue)
Le unità di lunghezza assolute sono:
in :
pollici
cm :
centimentri
mm :
millimetri
pt :
punti ( = 1/72 di pollice )
pc :
pica ( = 12 pt )
... sono utili solo quando le “proprietà fisiche” del mezzo di output sono note ...
Esempi:
H1
H2
H3
H4
H4
Marco Porta
{
{
{
{
{
margin: 0.5in }
line-height: 3cm }
word-spacing: 4mm }
font-size: 12pt }
font-size: 1pc }
/*
/*
/*
/*
/*
pollici */
centimetri */
millimetri */
punti */
pica */
15
CIM - WDT CSS2
Valori “particolari” (2): contatori
I contatori permettono di contare “qualcosa”
La proprietà counter-increment consente di specificare il nome di uno o più contatori
ed eventuali interi indicanti le entità degli incrementi (default = 1)
La proprietà counter-reset consente di settare uno o più contatori a 0 (default) o a
valori specificati
Esempio:
P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}
numera i paragrafi (P) per ogni “capitolo” (H1), a partire da 1
Il riutilizzo di un contatore in un elemento figlio crea una nuova istanza del contatore
stesso
Esempio:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
con più liste OL innestate, la numerazione ricomincia ogni volta da 1
Marco Porta
16
Valori “particolari” (3): colori
Il valore di un colore può essere una stringa o una specifica RGB
Le stringhe possono assumere i valori seguenti (definiti dall’ HTML 4.0): aqua, black,
blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white e yellow
Esempio:
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
Il modello RGB è usato nelle specifiche numeriche dei colori, che possono avvenire
secondo varie forme
Esempio:
EM
EM
EM
EM
Marco Porta
{
{
{
{
color:
color:
color:
color:
#f00 }
#ff0000 }
rgb(255,0,0) }
rgb(100%, 0%, 0%) }
/*
/*
/*
/*
#rgb (equivalente a #ff0000) */
#rrggbb */
range 0 - 255 */
range 0.0% - 100.0% */
CIM - WDT CSS2
17
CIM - WDT CSS2
La “cascata”
I CSS per un documento HTML possono avere tre diverse origini:
 l’autore del documento: l’autore può specificare gli style sheet per un certo documento in base
a proprie convenzioni
 l’utente: l’utente può avere la possibilità di specificare (direttamente o indirettamente) un proprio
style sheet al quale si devono conformare i documenti
 lo user agent (tipicamente il browser): lo user agent deve avere uno style sheet di default sul
quale basarsi quando né l’autore di un documento né l’utente ne definiscono uno
Potranno nascere conflitti tra le varie regole di stile
se i tre diversi style sheet specificano regole di stile diverse per lo stesso elemento HTML, quale
deve essere applicata?
Il modello a cascata dei CSS assegna diversi pesi ad ogni regola
quando più regole possono essere applicate, ha la precedenza quella con il peso maggiore
Per default, le regole nei CSS dell’autore hanno maggior peso di quelle nei CSS
dell’utente
le regole dei CSS dello user agent sono quelle col peso minore in assoluto
Marco Porta
18
CIM - WDT CSS2
“Cascading order” - risoluzione dei conflitti
Supponiamo che, per un certo elemento HTML, nei tre diversi tipi di style sheet vengano
specificati diversi valori relativi alla stessa proprietà. Per decidere quale valore deve
essere applicato vengono seguite le seguenti regole:
1. si guarda ai pesi: le regole degli author style sheet hanno la precedenza su quelle degli user
style sheet, le quali, a loro volta, hanno la precedenza su quelle del default style sheet
... le dichiarazioni !important rappresentano però un’eccezione ...
2. si guarda alla specificità del selettore (a cui l’elemento HTML appartiene): selettori più specifici
hanno la precedenza su selettori meno specifici
3. si sceglie l’ultima regola specificata: se permangono ambiguità per la scelta della regola, si
sceglie quella che è stata specificata per ultimo
Uno style sheet può importare altri style sheet: le regole dello style sheet “importatore”
hanno la precedenza su quelle degli style sheet importati
l’importazione avviene attraverso la at-rule @import (che deve precedere tutti i rule set dello style
sheet)
Esempio:
@import url("miocss.css");
@import "miocss.css";
Marco Porta
19
CIM - WDT CSS2
Dichiarazioni !important
Le dichiarazioni !important hanno la precedenza sulle “normali” dichiarazioni
Sia gli author style sheet che gli user style sheet possono contenere dichiarazioni
!important
le dichiarazioni !important dello user style sheet hanno la precedenza
... quindi, l’utente ha sempre “l’ultima parola” ...
Esempio:
1)
2)
3)
/* Dallo user style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }
4)
5)
6)
/* Dall’author style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
la regola 1) vince sulla 4)
Marco Porta
20
Calcolo della specificità di un selettore
Il calcolo della specificità di un selettore avviene in questo modo:




si conta il numero degli attributi ID presenti nel selettore ( = a )
si conta il numero degli altri attributi e pseudo-classi presenti nel selettore ( = b )
si conta il numero degli elementi presenti nel selettore ( = c )
si ignorano gli pseudo-elementi
Il numero dato dalla concatenazione di a, b e c fornisce la specificità del corrispondente
selettore
Esempio:
Marco Porta
1)
*
2)
3)
4)
5)
6)
LI
{...}
UL LI
{...}
UL OL+LI
{...}
H1 + *[REL=up]{...}
#ciao
{...}
{...}
/*
/*
/*
/*
/*
/*
/*
a=0
'*'
a=0
a=0
a=0
a=0
a=1
b=0 c=0 -> specificità =
0
significa "qualunque cosa"
1
2
3
b=1 c=1 -> specificità = 11
b=0 c=0 -> specificità = 100
*/
*/
*/
*/
*/
*/
*/
CIM - WDT CSS2
21
CIM - WDT CSS2
Ereditarietà
Alcuni valori possono essere ereditati dai figli di un elemento HTML nel document tree
Esempio:
<H1>Titolo molto <EM>importante</EM> </H1>
se non è stato specificato nessun valore per la proprietà color dell’elemento <EM>, la parola
“importante” avrà lo stesso colore del resto della frase (l’elemento <EM> eredita la proprietà
color dall’elemento <H1>)
... per fissare un certo valore di default per una proprietà del documento basta specificare tale
valore relativamente all’elemento HTML o BODY
Ogni proprietà può avere come valore anche inherit
Esempio:
BODY {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent;
per qualunque elemento che non sia
BODY, color varrà black (valore
ereditato da BODY) e il background sarà
trasparente
}
Marco Porta
22
Il foreground e il background
Il colore di foreground è tipicamente il colore del testo
la proprietà color permette di specificare il colore del contenuto testuale di un elemento
Esempio:
EM { color: red }
EM { color: rgb(255,0,0) }
Per il background di un elemento è possibile specificare sia un colore, sia un’immagine
attraverso la proprietà background
Esempio:
<HTML>
<HEAD>
<TITLE>Esempio di background
con immagine
</TITLE>
<STYLE type="text/css">
BODY { background: url("...") }
</STYLE>
</HEAD>
<BODY>
<P>Il mio bakground
</BODY>
</HTML>
Marco Porta
CIM - WDT CSS2
23
CIM - WDT CSS2
Proprietà del background
background-color
imposta il background ad un certo colore (transparent è il default)
Esempio: H1 { background-color: red }
background-image
imposta come background una certa immagine (none è il default)
Esempio:
BODY { background-image: url("miaimmagine.gif") }
P { background-image: none }
background-repeat
se è specificata un’immagine di background, specifica se l’immagine deve essere ripetuta sia
orizzontalmente che verticalmente (repeat, default), solo orizzontalmente (repeat-x), solo
verticalmente (repeat-y) o non ripetuta (no-repeat)
Esempio:
BODY {
background: white url("img.gif");
background-repeat: repeat-y;
background-position: center;
}
Marco Porta
24
CIM - WDT CSS2
... proprietà del background (segue)
background-attachment
se è specificata un’immagine di background, specifica se essa è fissa (fixed) rispetto al viewport
(la finestra del browser) o si muove col documento (scroll, default) quando viene effettuato uno
scrolling
background-position
se è specificata un’immagine di background, specifica la sua posizione iniziale. Può assumere i
seguenti valori:
lo stesso di 0% 0%
top left e left top
x% y% significa che il punto
<perc> <perc>
dell’immagine dato dalll’x%
della sua larghezza e dall’y%
della sua altezza (partendo da
sinistra e dall’alto) si deve
trovare in corrispondenza del
punto nell’area di padding
dato dalll’x% della sua
larghezza e dall’y% della sua
altezza
<lung> <lung>
2cm 3cm significa che l’angolo
superiore sinistro
dell’immagine deve essere
posto a 2 cm alla destra e 3
cm sotto l’angolo superiore
sinistro dell’area di padding
top, top center e center top
lo stesso di 50% 0%
right top e top right
lo stesso di 100% 0%
left, left center e
center left
lo stesso di 0% 50%
center e center center
right, right center e
center right
bottom left e left bottom
bottom, bottom center e
center bottom
bottom right e right bottom lo stesso di 100% 100%
Marco Porta
25
CIM - WDT CSS2
... proprietà del background (segue)
Esempio:
BODY
BODY
BODY
BODY
{
{
{
{
background-position:
right top }
top center }
center }
bottom }
/* 100%
0%
/* 50%
0%
/* 50% 50%
/* 50% 100%
*/
*/
*/
*/
Se l’immagine di background è fissa (cioè alla proprietà background-attachment è stato
assegnato il valore fixed), il posizionamento dell’immagine è fatto relativamente al viewport,
anziché rispetto all’area di padding
Se è specificato un solo valore (percentuale o lunghezza), tale valore si riferisce sempre alla
posizione orizzontale: la posizione verticale sarà pari a 50%
Esempio:
BODY { background-position: 25% }
background
consente di impostare “in un sol colpo” le varie caratteristiche del background
Esempio:
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
Marco Porta
26
CIM - WDT CSS2
I font
Quando il testo di un documento deve essere visualizzato, ogni carattere che lo compone
viene “mappato” dal visual user agent in un corrispondente glyph (l’effettiva
rappresentazione “artistica” del carattere secondo le caratteristiche di un certo font)
allora un font sarà un insieme di glyph che rispettano certi criteri
Prima di visualizzare un carattere, lo user agent deve affrontare i seguenti “problemi”:




esiste un font per quel carattere (specificato o ereditato)?
se esiste, è disponibile?
se il font esiste ed è disponibile, quali glyph corrispondono al carattere?
se il font non esiste o esiste ma non è disponibile, quali azioni devono essere intraprese? Deve
essere utilizzato un font diverso?
Sia nei CSS1 che nei CSS2 le caratteristiche dei font vengono specificate attraverso una
serie di proprietà
i CSS2, comunque, danno maggior “libertà”:
 a chi crea lo style sheet, permettendogli di descrivere meglio i font
 agli user agent, facilitando il processo di selezione dei font quando non sono immediatamente
disponibili
Marco Porta
27
CIM - WDT CSS2
Proprietà dei font
font-family
specifica una lista di “famiglie di font” e/o una lista di “famiglie generiche di font”. Una famiglia di
font identifica un ben preciso tipo di font (es.: “Tempus Sans ITC”), mentre una famiglia generica
identifica genericamente un font che deve soddisfare certe caratteristiche (serif, sans-serif,
cursive, fantasy e monospace)
Esempio:
BODY { font-family: "Tempus Sans ITC", "Heisi Mincho W3", Symbol, serif }
Supponiamo di voler visualizzare del testo contenente caratteri latini (famiglia Tempus Sans
ITC), caratteri giapponesi (famiglia Heisi Mincho W3) e simboli matematici (famiglia
Symbol). Quando deve visualizzare un carattere, lo user agent dovrebbe cercare il primo font
(tra quelli elencati) che:
 è fisicamente disponibile
 dispone di un glyph per quel carattere
 rispetta tutte le caratteristiche definite dalle altre proprietà del font
serif è la famiglia generica a cui lo user agent deve fare riferimento quando nessuna delle
famiglie elencate soddisfa i necessari requisiti
... cercherà il font disponibile che più si avvicina a quello richiesto ...
Marco Porta
28
CIM - WDT CSS2
... proprietà dei font (segue)
font-style
può valere normal (default), oblique e italic
font-variant
può valere normal (default) o small-caps (caratteri con un “look” tutto maiuscolo)
font-weight
può valere normal ( = 400, default), bold ( = 700) , bolder, lighter, 100, ..., 900
bolder = “appena più scuro del font ereditato”; lighter = “appena più chiaro del font ereditato”
Esempio:
P { font-weight: normal }
/* 400 */
H1 { font-weight: 700 }
/* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500, se disponibile */
font-stretch
può valere normal (default), wider, narrower, ultra-condensed, extra-condensed,
condensed, semi-condensed, semi-expanded, expanded, extra-expanded e
ultra-expanded
Marco Porta
29
CIM - WDT CSS2
... proprietà dei font (segue)
font-size
può essere un valore assoluto, un valore relativo, una lunghezza o una percentuale
valore assoluto: xx-small, x-small, small, medium (default), large, x-large, xx-large
valore relativo: smaller, larger (relativamente al font ereditato)
lunghezza: es.: 12pt
percentuale: es.: 150% (relativamente al font ereditato)
font
consente di impostare tutte le caratteristiche “in un sol colpo”
Esempio:
P
P
P
P
{
{
{
{
font:
font:
font:
font:
80% sans-serif }
x-large "new century schoolbook", serif }
bold italic large Palatino, serif }
oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }
Alla proprietà font possono anche essere assegnati i seguenti valori (che identificano un ben
preciso font con caratteristiche predeterminate):
caption (il font dei bottoni), icon (il font delle label delle icone), menu (il font dei menu),
message-box (il font delle finestre di dilogo), small-caption (il font dei “piccoli” controlli),
status-bar (il font usato nelle barre di stato)
Marco Porta
30
CIM - WDT CSS2
Selezione del font da parte dello user agent
Lo user agent ha a disposizione (almeno in teoria) quattro possibili modalità di selezione
del font:
 corrispondenza del nome: lo user agent utilizza un font, “esistente e accessibile”, avente come
nome esattamente il nome della famiglia specificata
 corrispondenza “intelligente” del nome: lo user agent utilizza un font, “esistente e accessibile”,
che si avvicina il più possibile a quello richiesto (non essendoci corrispondenza del nome)
 sintesi del font: lo user agent crea il font, secondo le caratteristiche specificate
 download dal Web: lo user agent “scarica” il font dal Web (come avviene per le immagini, per i
suoni, ecc.)
Marco Porta
31
CIM - WDT CSS2
Proprietà del testo
text-indent
specifica l’indentazione della prima linea di testo in un blocco. Può assumere il valore di una
lunghezza o di una percentuale
Esempio:
P { text-indent: 3em }
text-align
specifica come deve essere allineato il contenuto di un blocco. Può assumere i valori left,
right, center, justify, o un certo valore stringa (solo per l’allineamento del testo nelle
colonne di una tabella)
Esempio:
DIV.center { text-align: center }
Marco Porta
32
CIM - WDT CSS2
... proprietà del testo (segue)
text-decoration
può assumere i seguenti valori:
none :
nessuna decorazione
underline :
testo sottolineato
overline :
testo con una linea sopra
line-through :
testo con una linea nel mezzo
blink :
testo lampeggiante
text-shadow
accetta una lista di “effetti ombreggiatura” da applicare al testo, secondo l’ordine specificato. Ogni
effetto è identificato da un offset e, opzionalmente, da un raggio e da un colore. Questa proprietà
non è supportata dai CSS1
Esempio:
Marco Porta
33
CIM - WDT CSS2
letter-spacing
specifica quale deve essere lo spazio orizzontale tra le lettere. Può valere normal (default) o
assumere il valore di una lunghezza, che è da intendersi come spazio aggiuntivo oltre al normale
Esempio: H1 { letter-spacing: 0.3em }
word-spacing
specifica quale deve essere lo spazio orizzontale tra le parole. Può valere normal (default) o
assumere il valore di una lunghezza, da intendersi come spazio aggiuntivo oltre al normale
Esempio: H1 { word-spacing: 1em }
text-transform
controlla le lettere maiuscole e minuscole del testo di un elemento. Può assumere i seguenti valori:
capitalize :
il primo carattere di ogni parola diventa maiuscolo
uppercase :
tutti i caratteri di tutte le parole diventano maiuscoli
lowercase :
tutti i caratteri di tutte le parole diventano minuscoli
none :
nessuna trasformazione (default)
Marco Porta
34
white-space
definisce come devono essere gestiti gli spazi all’interno del testo. Può assumere i seguenti
valori:
normal :
gli spazi consecutivi vengono interpretati come un
unico spazio (default)
pre :
gli spazi consecutivi vengono lasciati inalterati e il
“ritorno a capo” avviene solo in corripondenza dei
“line break”
nowrap :
gli spazi consecutivi vengono interpretati come un
unico spazio ma vengono ignorati i line break
Esempio
PRE { white-space: pre }
P { white-space: normal }
Marco Porta
CIM - WDT CSS2
35
CIM - WDT CSS2
Il box model
Ad ogni elemento nel document tree corrisponde un’area rettangolare, detta box
Ogni box è suddiviso in una content area (in cui c’è l’effettivo contenuto) ed in eventuali
aree di padding, di bordo e di margine
LM = Left Margin
RP = Right Padding
TB = Top Border
.................
.................
Lo stile del background della content
area e della padding area è
determinato dalla proprietà
background dell’elemento che
genera il box; lo stile di background
della border area dipende dalle
border properties;
la margin area è sempre trasparente
Marco Porta
36
... il box model - un esempio
UL { background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
}
LI {
color: black;
background: gray;
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px;
list-style: none
}
LI.withborder {
border-style: dashed;
border-width: medium;
border-color: black;
}
<HTML>
<HEAD>
<TITLE>Esempio box</TITLE>
<LINK rel="stylesheet" href="miocss.css" type="text/css">
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is longer to illustrate wrapping.
</UL>
</BODY>
</HTML>
Marco Porta
CIM - WDT CSS2
37
CIM - WDT CSS2
Proprietà dei margini
Le proprietà margin-top, margin-bottom, margin-left e margin-right
impostano il valore per i corrispondenti margini
margin consente di impostare tutti e quattro i margini “in un sol colpo”
 se è specificato un solo valore, questo viene applicato a tutti i margini
 se sono specificati due valori, si riferiscono, rispettivamente, ai margini superiore e inferiore e ai
margini sinistro e destro
 se sono specificati tre valori, si riferiscono, rispettivamente, al margine superiore, ai margini
sinistro e destro e al margine inferiore
 se sono specificati quattro valori, si riferiscono, rispettivamente, al margine superiore, al
margine destro, al margine inferiore e al al margine sinistro
Esempio:
BODY { margin: 2em }
/* tutti i margini a 2em */
BODY { margin: 1em 2em }
/* margini sup e inf = 1em */
/* margini destro e sinistro = 2em */
BODY { margin: 1em 2em 3em } /* margine sup = 1em, margine des = 2em */
/* margine inf =3em, margine sin = 2em */
Marco Porta
38
Proprietà delle aree di padding
Le proprietà padding-top, padding-bottom, padding-left e padding-right
specificano il valore per le corrispondenti aree di padding
padding consente di impostare il valore per tutte e quattro le aree “in un sol colpo”
 se è specificato un solo valore, questo viene applicato a tutte le aree
 se sono specificati due valori, si riferiscono, rispettivamente, alle aree superiore e inferiore e
alle aree di sinistra e di destra
 se sono specificati tre valori, si riferiscono, rispettivamente, all’area superiore, alle aree di
sinistra e di destra e all’area inferiore
 se sono specificati quattro valori, si riferiscono, rispettivamente, all’area superiore, all’area di
destra, all’area inferiore e all’area di sinistra
Esempio:
H1 {
background: white;
padding: 1em 2em;
}
Marco Porta
L’elemento H1 avrà white come colore di
background della content area e della padding area
La larghezza delle aree di padding superiore e
inferiore sarà 1em, mentre la larghezza delle aree di
padding di sinistra e di destra sarà 2em
CIM - WDT CSS2
39
CIM - WDT CSS2
Proprietà dei bordi
Le proprietà border-top-width, border-right-width, border-bottom-width e
border-left-width specificano il valore per le corrispondenti aree di bordo
possono assumere i valori “qualitativi” thin, medium e thick o un valore esplicito; borderwith consente di impostare il valore per tutte e quattro le aree di bordo (secondo modalità
analoghe a quelle viste per i margini e per le aree di padding)
Le proprietà border-top-color, border-right-color, border-bottom-color e
border-left-color specificano il colore per le corrispondenti aree di bordo
border-color consente di impostare il colore per tutte e quattro le aree di bordo (secondo le
“solite” modalità)
Le proprietà border-top-style, border-right-style, border-bottom-style e
border-left-style specificano lo stile per le corrispondenti aree di bordo
border-style consente di impostare lo stile per tutte e quattro i bordi (secondo le “solite”
modalità)
Sono disponibili gli stili: none(default), hidden, dotted, dashed, solid, double, groove,
ridge, inset, outset
Marco Porta
40
CIM - WDT CSS2
... proprietà dei bordi (segue)
È possibile riassumere tutte le caratteristiche dei bordi utilizzando le proprietà
border-top, border-right, border-bottom e border-left
Esempio:
H1 { border-bottom: thick solid red }
il bordo inferiore di un elemento H1 avrà thick come valore per la proprietà border-bottomwidth, solid come valore per la proprietà border-bottom-style e red come valore per la
proprietà border-bottom-color
La proprietà border permette di impostare la stessa larghezza, lo stesso stile e lo stesso
colore per tutti e quattro i bordi
Esempio:
P { border: solid red }
è equivalente a
P { border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Marco Porta
41
CIM - WDT CSS2
Generazione dei box
Si distinguono due tipi di elementi HTML: gli elementi di tipo block-level, che generano box
principali di tipo block (“contenitori” dei loro box discendenti), e gli elementi di tipo inlinelevel, che generano box di tipo inline
gli elementi block-level sono quelli che nei “media visivi” (browser, stampanti, ... ) vengono
rappresentati come “blocchi” separati (es.: l’elemento <P>); gli elementi inline-level sono quelli che
invece non sono rappresentati come blocchi separati (es.: l’elemento <EM>)
La proprietà display consente di specificare come un elemento HTML deve essere
disposto nel visual user agent
display
può
assumere
questi
valori:

block :
l’elemento genera un box principale
inline :
l’elemento genera box di tipo inline
list-item :
l’elemento genera un blocco principale e
un “list-item” inline box
marker :
dichiara che il “generated content” prima o
dopo l’elemento è di tipo marker
none :
l’elemento non genera box
run-in e
compact :
generano box principali o box inline a
seconda del contesto
table, inlinetable, ...
fanno in modo che l’elemento si comporti
come un elemento di tabella
Esempio:
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
Marco Porta
42
CIM - WDT CSS2
Controllo della dimensione dei box
width, height
specificano, rispettivamente, la larghezza e l’altezza della content area dei box generati da
elementi di tipo block-level. Possono assumere il valore auto (default, la larghezza o l’altezza è
determinata automaticamente, in base ad altre proprietà), un valore lunghezza o un valore
percentuale
Esempio:
P {
width: 100px;
height 200px
}
min-width, max-width, min-height, max-height
specificano le dimensioni (larghezza e altezza) minime e massime che un box può avere.
min-width e min-height possono assumere il valore 0 (default), un valore lunghezza o un
valore percentuale. max-width e max-height possono assumere il valore none (default, non è
posto nessun limite massimo), un valore lunghezza o un valore percentuale
Marco Porta
43
CIM - WDT CSS2
Controllo della posizione dei box
Nei CSS2, un box può essere disposto secondo tre diversi schemi di posizionamento:
 posizionamento a flusso normale: comprende particolari formattazioni per box di tipo block e
box di tipo inline, il posizionamento relativo per i box di tipo inline e il posizionamento di blocchi
di tipo compact e run-in
 posizionamento flottante: secondo questo modello, un box viene prima disposto secondo lo
schema a flusso normale, e poi traslato a sinistra o a destra il più possibile
 posizionamento assoluto: secondo questo modello, ad un box viene assegnata una ben precisa
posizione rispetto al blocco che lo contiene
Gli schemi di posizionamento possono essere selezionati attraverso la proprietà
position, che può assumere i seguenti valori:
static :
il box è disposto secondo lo schema a flusso normale
relative :
il box è disposto secondo lo schema a flusso normale, ma con
posizionamento relativo
absolute :
la posizione del box è specificata attraverso le proprietà left, right, top
e bottom (che specificano gli offset rispetto al blocco contenitore del box
fixed :
la posizione del box è calcolata secondo lo schema assoluto, ma in più il
box è fisso rispetto a qualche riferimento (ad esempio, la finestra del
browser; quando viene fatto uno scrolling della finestra, il box rimane fermo)
Marco Porta
44
CIM - WDT CSS2
Posizionamento a flusso normale
Formattazione per i box di tipo block
 i box vengono disposti uno di seguito all’altro, verticalmente, partendo dall’alto del blocco
“contenitore”
 la distanza verticale tra due box adiacenti è determinata dalla proprietà margin
 il bordo sinistro (o destro, per un allineamento a destra) del box tocca il bordo sinistro (o destro)
del blocco contenitore
Formattazione per i box di tipo inline
 i blocchi vengono disposti uno di seguito all’altro, orizzontalmente, partendo dall’alto del blocco
“contenitore”
 vengono rispettati i margini, i bordi, i “padding”
 i box possono essere allineati verticalmente secondo varie modalità
Posizionamento relativo
 i blocchi vengono traslati rispetto ad un riferimento
Marco Porta
45
CIM - WDT CSS2
Posizionamento flottante
Secondo lo schema del posizionamento flottante, il box, una volta disposto secondo il
flusso normale, viene opportunamente traslato a sinistra o a destra
<HTML>
<HEAD>
<TITLE>Float example</TITLE>
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
</HEAD>
<BODY>
<P><IMG src=img.gif>
Some sample text that has
no other...
</BODY>
Esempio:
</HTML>
La proprietà float permette di specificare se un box deve essere traslato a sinistra
(left), a destra (right) o non deve essere traslato (none)
La proprietà clear consente di specificare quali lati di un box (di tipo block) disposto
secondo il modello flottante non possono essere adiacenti ad altri box (può assumere i
valori left, right, both e none)
Marco Porta
46
CIM - WDT CSS2
Posizionamento assoluto
Nello schema di posizionamento assoluto, un box è esplicitamente traslato rispetto al suo
blocco “contenitore”
Posizionamento assoluto di tipo fixed
è una sottocategoria del posizionamento assoluto. L’unica differenza sta nel fatto che il blocco
contenitore di riferimento è il viewport (la finestra del browser); se sul viewport viene fatto uno
scrolling, il box non si muove ( effetto simile a quello ottenibile con i frame)
Esempio:
<HTML>
<HEAD>
<TITLE>A frame document with CSS2</TITLE>
BODY { height: 8.5in }
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0; bottom: auto;
left: 0;
}
#sidebar { position: fixed;
width: 10em;
.............
Marco Porta
47
CIM - WDT CSS2
48
CIM - WDT CSS2
Esempi di posizionamento dei box
<HTML>
<HEAD>
<TITLE>Confronto tra gli schemi di posizionamento</TITLE>
</HEAD>
<BODY>
<P>Inizio del contenuto del body.
<SPAN id="outer">
Inizio del contenuto di 'outer'.
<SPAN id="inner">
Contenuto di 'inner'.
</SPAN>
Fine del contenuto di 'outer'.
</SPAN>
Fine del contenuto del body.
</P>
</BODY>
</HTML>
Marco Porta
... esempi di posizionamento dei box (segue)
Proviamo con gli stili seguenti:
BODY { line-height: 200% }
#outer {
color: red;
background-color: yellow;
}
#inner {
color: blue;
background-color: fuchsia
}
#outer {
position: relative;
top: -20px;
color: red;
}
#inner {
position:relative;
top: 15px;
color: blue;
}
#outer {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
color: red;
}
#inner {
color: blue;
}
#outer {
color: red;
}
#inner {
position: absolute;
top: 200px;
left: -30pxpx;
height: 130px;
width: 130px;
color: red;
}
Marco Porta
#outer {
color: red;
}
#inner {
float: right;
width: 120px;
color: blue;
}
49
CIM - WDT CSS2
Effetti particolari: l’overflow
In certi casi, un box può uscire dai confini del suo blocco contenitore (ad esempio, perché
il blocco è troppo piccolo, oppure perché il box è posizionato in modo assoluto, oppure ... )
la proprietà overflow permette di specificare se il contenuto di un elemento di tipo block-level
deve essere “tagliato” oppure no quando il suo box esce dai confini. overflow può assumere i
valori: visible (default), hidden, scroll e auto (valori che influenzano la presenza o
assenza delle barre di scorrimento... ).
Esempio:
DIV {
width : 100px;
height: 100px;
border: thin solid red;
}
BLOCKQUOTE {
width : 125px;
height : 100px;
margin-top: 50px;
margin-left: 50px;
border: thin dashed black
}
DIV.attributed-to {
text-align : right;
}
<DIV>
<BLOCKQUOTE>
<P>I didn't like ...
<DIV class="attributed-to">
-Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>
visible
Marco Porta
50
CIM - WDT CSS2
Effetti particolari: il clipping
Una regione di clipping definisce quale “porzione” del contenuto di un elemento è visibile
la proprietà clip (applicabile ad elementi che definiscono la proprietà overflow) può avere i
valori auto (area di clipping pari a tutto il box dell’elemento, default) o shape (consente di definire
un’area di clipping rettangolare, attraverso la specifica dei margini superiore, destro, inferiore e
sinistro)
Esempio:
P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }
Marco Porta
51
CIM - WDT CSS2
Liste
Il tipo e l’aspetto delle liste può essere controllato attraverso le seguenti proprietà:
list-style-type
consente di scegliere il tipo di lista. Può valere: disc (default) | circle | square |
decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek
| lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew |
armenian | georgian | cjk-ideographic | hiragana | katakana | hiraganairoha | katakana-iroha | none
list-style-image
permette di specificare un’immagine come “bullet” per la lista
Esempio:
UL { list-style-image: url("http://png.com/ellipse.png") }
list-style-position
permette di specificare un rientro per la lista e può valere outside (default) o inside
list-style permette di impostare contemporaneamente le varie proprietà
Marco Porta
52
Tabelle
Esempio:
TH { text-align: center; font-weight: bold }
TH { vertical-align: baseline }
TD { vertical-align: middle }
TABLE
{ border-collapse: collapse }
TR#row1 { border-top: 3px solid blue }
TR#row2 { border-top: 1px solid black }
TR#row3 { border-top: 1px solid black }
Marco Porta
CIM - WDT CSS2

Cascading Style Sheets Level 2

Transcript

Documenti analoghi

Layout cover per box dvd slim.indd

Impiego Appropriato dei font

z4m plus copia.cdr

comando elettrico a piede foot eletric drive

usare i caratteri (pratica)

Valspar bv e la Sicurezza

Serie BOX - Sunerg Solar

Respect - Beat Sheet

News dal mondo