Tecnologie di Sviluppo per il Web
Cascading Style Sheets (CSS):
Dettagli e Approfondimenti
versione 2.0
Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons
(vedi ultima pagina)
G. Mecca – [email protected] – Università della Basilicata
CSS >> Sommario
Dettagli e Approfondimenti

Sintassi
Commenti
Raggruppamenti
Selettori
Errori

Tipi di dato
Colori
Lunghezze

Tipi di Dispositivo
G. Mecca - Tecnologie di Sviluppo per il Web

Semantica
!important
Cascata
Il Modulo style
 Utilizzo degli
Standard
 Appendice

Elenco delle Proprietà
di CSS Livello 1
2
CSS >> Dettagli e Approfondimenti >> Idea Generale
Idea Generale
 CSS
(“Cascading Style Sheets”)
tecnologia per associare caratteristiche di
presentazione ad un documento HTML/XML
 In
particolare
consente di specificare le caratteristiche dei
riquadri associati agli elementi del docum.
 Sintatticamente
insieme di regole: selettore, dichiarazioni
dichiarazione: proprietà e valore
G. Mecca - Tecnologie di Sviluppo per il Web
3
CSS >> Dettagli e Approfondimenti >> Idea Generale
Idea Generale
h2
selettore
{
color: maroon;
font-size: 14pt;
proprietà
valore
regola
}
dichiarazione
img {
border: none;
}
G. Mecca - Tecnologie di Sviluppo per il Web
4
CSS >> Dettagli e Approfondimenti >> Idea Generale
Idea Generale
 Modello
dei riquadri
ad ogni elemento è associato un riquadro
elementi a livello di blocco ed elementi in
linea
 Struttura
del riquadro
contenuto
riempimento
bordo
margine
G. Mecca - Tecnologie di Sviluppo per il Web
5
CSS >> Dettagli e Approfondimenti >> Idea Generale
Modello dei Riquadri (“Box Model”)
margine
(margin)
bordo
(border)
top
top
left
left
left
right
right
contenuto
right
riempimento
(padding) top
bottom
bottom
bottom
G. Mecca - Tecnologie di Sviluppo per il Web
6
CSS >> Dettagli e Approfondimenti >> Sintassi
Sintassi
 Foglio
di stile
regole
commenti
regole chiocciola
 Commenti
/*
questo è un commento
 Regole
*/
chiocciola
@import, @media (>>)
G. Mecca - Tecnologie di Sviluppo per il Web
7
CSS >> Dettagli e Approfondimenti >> Sintassi
Sintassi
 Regole
<selettore> {<lista dichiarazioni>}
 Dichiarazione
<proprietà>: <valore>;
es: div {color: white; font-size: 12pt;}
 Raggruppamenti
sintassi compatta per più regole
div, p {color: white; font-size: 12pt;}
G. Mecca - Tecnologie di Sviluppo per il Web
8
CSS >> Dettagli e Approfondimenti >> Sintassi
Sintassi
 Selettori
semplici
<nome elemento> es: div
<nome elemento>#<id> es: div#footer
<nome elemento>.<classe> es: div.blocco
* tutti gli elementi
 Altri
selettori
pseudo-classi
selettori contestuali
G. Mecca - Tecnologie di Sviluppo per il Web
9
CSS >> Dettagli e Approfondimenti >> Sintassi
Sintassi
>> sito Sviluppo Web
 Pseudoclassi
classificano dinamicamente gli elementi in
base alle azioni dell’utente sull’interfaccia
link, visited: collegamenti non visitati, visitati
hover: collegamenti sorvolati dal mouse
active, focus
 Sintassi
<nome>:<pseudo classe>
es: a:hover {color: red;}
G. Mecca - Tecnologie di Sviluppo per il Web
10
CSS >> Dettagli e Approfondimenti >> Sintassi
Sintassi
 Selettori
contestuali
selezionano un elemento anche sulla base
della sua posizione nell’InfoSet
 E’
costituito di due parti
un selettore ordinario (nome, id, classe,...)
un “contesto” che definisce la posizione
nell’InfoSet
 Contesto
lista di selettori semplici
G. Mecca - Tecnologie di Sviluppo per il Web
11
CSS >> Dettagli e Approfondimenti >> Sintassi
Sintassi
 Selettore
constestuale
<contesto> <selettore semplice>
 Esempi
div p.indirizzo a:hover{color: red;}
div.footer img {border: none;}
 Attenzione
differenza con i raggruppamenti
in questo caso non c’è la virgola
G. Mecca - Tecnologie di Sviluppo per il Web
12
CSS >> Dettagli e Approfondimenti >> Sintassi
Sintassi

Semantica del selettore contestuale
corrisponde ai riquadri degli elementi con le seguenti
caratteristiche:
l’elemento corrisponde al selettore finale
nell’InfoSet c’è un antenato per ciascuno dei selettori
del contesto (riquadri che contengono il riquadro
dell’elemento)

Esempio
 div p.indirizzo a:hover{color: red;}
nell’InfoSet: div, p.indirizzo, a
G. Mecca - Tecnologie di Sviluppo per il Web
13
CSS >> Dettagli e Approfondimenti >> Sintassi
Sintassi
 Esempi
di Selettori
em {color: red;}
p em {color: red;}
p, em {color: red};
div.blocco em {color: red;}
a#email {color: red;}
div.blocco a#email {color: red;}
div.blocco a:hover {color: blue;}
div.blocco a#email:hover {color: blue;}
div span a#email:hover {color: blue;}
G. Mecca - Tecnologie di Sviluppo per il Web
14
CSS >> Dettagli e Approfondimenti >> Sintassi
Errori Sintattici

Comportamento del browser su errori
filosofia: ignorare le parti ignote
dichiarazioni con proprietà o valori non legali
regole chiocciola sconosciute
regole con errori sintattici (es: ; mancante)

Attenzione
questo a volte causa disorientamento

Nota
non esiste modo di distinguere un foglio di stile
CSS1 da uno CSS2
G. Mecca - Tecnologie di Sviluppo per il Web
15
CSS >> Dettagli e Approfondimenti >> Tipi di Dato
Tipi di Dato

Lunghezze
assolute
relative

Lunghezze principali
relative: em (dimensione pari alla dimensione del
font nel riquadro; eccezione: font-size)
assolute: pt (punti)

Moltissime altre lunghezze
meno importanti
G. Mecca - Tecnologie di Sviluppo per il Web
16
CSS >> Dettagli e Approfondimenti >> Tipi di Dato
Tipi di Dato
 Lunghezze
assolute
pt
in, cm, mm
pc (1 pica = 12 pt)
parole chiave: xx-small, x-small, small,
medium, large, x-large, xx-large; ogni
browser ha una dimensione assegnata a
ciascuna parola chiave
es: body { font-size: x-small; }
G. Mecca - Tecnologie di Sviluppo per il Web
17
CSS >> Dettagli e Approfondimenti >> Tipi di Dato
Tipi di Dato
 Lunghezze
relative
em, px, ex
ex (lungh. pari alla dimensione della lettera
“x” nel font dell’elemento; eccez.: font-size)
 Percentuali
riferimenti variabili al variare della proprietà
 Parole
chiave
larger, smaller es: strong { font-size:
larger; }
G. Mecca - Tecnologie di Sviluppo per il Web
18
CSS >> Dettagli e Approfondimenti >> Tipi di Dato
Tipi di Dato
 Colori
colori RGB
colori standard di HTML
 Colori
RGB
#<rr><gg><bb> es: #FFA012
<rr>: codifica esadecimale del livello di rosso
<gg>: codifica esadec. del livello di verde
<bb>: codifica esadecimale del livello di blu
G. Mecca - Tecnologie di Sviluppo per il Web
19
CSS >> Dettagli e Approfondimenti >> Tipi di Dato
Tipi di Dato
 Colori
standard di HTML
G. Mecca - Tecnologie di Sviluppo per il Web
20
CSS >> Dettagli e Approfondimenti >> Tipi di Dato
Tipi di Dato
 URI
sintassi particolare: url(“<uri reference>”)
esempio: @import url(“stili/altro.css”)
esempio:
body {background-image:
url(“icons/sfondo.gif”)
le virgolette sono opzionali (comportamento
variabile dei browser)
G. Mecca - Tecnologie di Sviluppo per il Web
21
CSS >> Dettagli a Approfondimenti >> Tipi di Media
Tipi di Dispositivo (“Media Types”)

CSS2 introduce il concetto di “media”
è possibile specificare il dispositivo di riferimento per
un gruppo di regole
il browser applica o meno le regole sulla base del
tipo di dispositivo usato in quel momento

Tipi di Media
screen, handheld, tty, tv
print, projection
braille, embossed, aural
all
G. Mecca - Tecnologie di Sviluppo per il Web
22
CSS >> Dettagli e Approfondimenti >> Tipi di Media
Tipi di Dispositivo (“Media Types”)
 Specifica
del tipo di dispositivo
attributo “media” dell’elemento link
 <link rel=“stylesheet” type=“text/css”
href=“primo.css” media=“screen” />
 <link rel=“stylesheet” type=“text/css”
href=“secondo.css” media=“all” />
 Regole
“chiocciola” (“at-rules”)
@import
@media
G. Mecca - Tecnologie di Sviluppo per il Web
23
CSS >> Dettagli e Approfondimenti >> Tipi di Media
Tipi di Dispositivo (“Media Types”)

@import
include le regole di un foglio in un altro
es: in “secondo.css” @import url(“primo.css”);
deve essere la prima dichiarazione del foglio
è possibile specificare il tipo di media
es: @import url(“primo.css”) handheld;

@media
specifica il dispos. per cui vale un blocco di regole
es: @media print { body {font-size: 10pt;}... }
G. Mecca - Tecnologie di Sviluppo per il Web
24
CSS >> Dettagli e Approfondimenti >> Semantica
Semantica
 In
generale
vari fogli di stile per un documento (standard,
autore, utente)
vari valori per una proprietà dell’elemento
 Semantica
due meccanismi fondamentali
ereditarietà dei valori delle proprietà dagli
antenati nell’infoset
cascata (ordine di applicazione dei valori)
G. Mecca - Tecnologie di Sviluppo per il Web
25
CSS >> Dettagli e Approfondimenti >> Semantica
Semantica
 Qualificatore
di priorità delle dichiarazioni
!important
es: p { font-size: 1.5em !important }
 Altera
la priorità nella cascata
dichiarazioni importanti prima delle normali
dichiarazioni importanti dell’utente prima
delle dichiarazioni dell’autore (importanti e
non – CSS2)
G. Mecca - Tecnologie di Sviluppo per il Web
26
CSS >> Dettagli e Approfondimenti >> Semantica
Semantica

Algoritmo
scelta del valore per una proprietà di un riquadro

I passo
trova tutti i valori possibili per la proprietà
tutte le dichiarazioni per la proprietà in questione che
si applicano al riquadro per il dispositivo utilizzato

II passo
ordina rispetto all’origine
utente importanti, autore importanti, autore, utente,
standard
G. Mecca - Tecnologie di Sviluppo per il Web
27
CSS >> Dettagli e Approfondimenti >> Semantica
Semantica
 III
passo
ordina rispetto alla specificità
prima selettori più specifici, poi meno
specifici (id prima di classe prima di nome...)
regola numerica complessa
 IV
passo
ordina per ordine di comparizione nello stile
prevalgono le dichiarazioni che compaiono
per ultime
G. Mecca - Tecnologie di Sviluppo per il Web
28
CSS >> Dettagli e Approfondimenti >> Il Modulo style
Il Modulo style di XHTML
 Nota
in XHTML Basic il foglio di stile è esterno al
documento XHTML
viene collegato con l’elemento link
 In
XHTML 1.0 Strict
è possibile immergere parte delle regole
CSS direttamente nel documento XHTML
modulo style e relativo attributo
G. Mecca - Tecnologie di Sviluppo per il Web
29
CSS >> Dettagli e Approfondimenti >> Il Modulo style
Il Modulo style di XHTML
 Attenzione
stiamo uscendo al di fuori di XHTML Basic
per usare queste funzionalità è necessario
cambiare il DTD (XTHML 1.0 Strict)
 Inoltre
metodologicamente è sconsigliabile
mischiare nello stesso documento codice
HTML e codice CSS
ne parliamo solo per completezza
G. Mecca - Tecnologie di Sviluppo per il Web
30
CSS >> Dettagli e Approfondimenti >> Il Modulo style
Il Modulo style di XHTML
 Modulo
style
un unico elemento: style
serve a specificare una serie di regole CSS
si aggiunge al modello di contenuto di head
nota: le regole sono interne al documento e
non riutilizzabili in altri documenti
elemento
attributo
style
type, media, title #PCDATA
…
G. Mecca - Tecnologie di Sviluppo per il Web
modello di contenuto
31
CSS >> Dettagli e Approfondimenti >> Il Modulo style
Esempio
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Pagina di Esempio</title>
<style type=“text/css” title=“stile interno”>
h1 {
color: blue;
font-family: Arial;
}
img {
border-style: none;
}
</style>
</head>
...
G. Mecca - Tecnologie di Sviluppo per il Web
32
CSS >> Dettagli e Approfondimenti >> Il Modulo style
Il Modulo di Attributo di Stile

Una ulteriore possibilità
XHTML 1.0 contiene un ulteriore modulo

Attributo style
attributo che si aggiunge a tutti gli elementi del corpo
(body ed elementi di flusso)
consente di specificare ulteriori regole CSS
specifiche per l’elemento

Esempio
<h1 style=“color:blue; font-family:Arial”>Titolo</h1>
>> esempioRiquadri.html
G. Mecca - Tecnologie di Sviluppo per il Web
33
CSS >> Dettagli e Approfondimenti >> Utilizzo degli Standard
Utilizzo degli Standard
 Per
trovare una proprietà di interesse
per prima cosa verificare il documento
contenente lo standard di CSS livello 1
si tratta di un elenco di proprietà, dei possibili
valori, e dei riquadri a cui si applicano
 Se
non è prevista da CSS 1
consultare lo standard relativo a CSS 2
molte più proprietà, ma meno supportato
G. Mecca - Tecnologie di Sviluppo per il Web
34
CSS >> Dettagli e Approfondimenti >> Utilizzo degli Standard
Utilizzo degli Standard

Attenzione
>> esempioCSS-finale.html
>> esempioCSS-treColonne.html
è una tecnologia molto potente
si riescono ad ottenere ottimi effetti grafici

Esempi
ombreggiature ed effetti di “spessore”
sostituzione completa delle tabelle
attenzione all compatibilità con i vecchi browser

Siti con esempi di stili in linea
es: http://www.glish.com/css/
G. Mecca - Tecnologie di Sviluppo per il Web
35
CSS >> Sommario
Riassumendo

Sintassi
Commenti
Raggruppamenti
Selettori
Errori

Tipi di dato
Colori
Lunghezze

Tipi di Dispositivo
G. Mecca - Tecnologie di Sviluppo per il Web

Semantica
!important
Cascata
Il Modulo style
 Utilizzo degli
Standard
 Appendice

Elenco delle Proprietà
di CSS Livello 1
36
CSS >> Dettagli e Approfondimenti >> Appendice
Elenco delle Proprietà di CSS Livello 1

Font
'font-family'
'font-style'
'font-variant'
'font-weight'
'font-size'
'font'
G. Mecca - Tecnologie di Sviluppo per il Web

Colori e Sfondo
'color'
'background-color'
'background-image'
'background-repeat'
'backgroundattachment'
'background-position‘
'background'
37
CSS >> Dettagli e Approfondimenti >> Appendice
Elenco delle Proprietà di CSS Livello 1

Testo
'word-spacing'
'letter-spacing'
'text-decoration'
'vertical-align'
'text-transform'
'text-align'
'text-indent'
'line-height'
G. Mecca - Tecnologie di Sviluppo per il Web

Varie
'display'
'white-space'
'list-style-type'
'list-style-image'
'list-style-position'
'list-style'
38
CSS >> Dettagli e Approfondimenti >> Appendice
Elenco delle Proprietà di CSS Livello 1

Riquadri
 'width‘, 'height'
 'float‘, 'clear'
 'margin-top'
 'margin-right'
 'margin-bottom'
 'margin-left'
 'margin'
 'padding-top'
 'padding-right'
 'padding-bottom'
 'padding-left'
 'padding'
G. Mecca - Tecnologie di Sviluppo per il Web
 'border-top-width'
 'border-right-width'
 'border-bottom-width'
 'border-left-width'
 'border-width'
 'border-color'
 'border-style'
 'border-top'
 'border-right'
 'border-bottom'
 'border-left'
 'border'
39
Termini della Licenza
Termini della Licenza

This work is licensed under the Creative Commons AttributionShareAlike License. To view a copy of this license, visit
http://creativecommons.org/licenses/by-sa/1.0/ or send a letter to
Creative Commons, 559 Nathan Abbott Way, Stanford, California
94305, USA.

Questo lavoro viene concesso in uso secondo i termini della
licenza “Attribution-ShareAlike” di Creative Commons. Per ottenere
una copia della licenza, è possibile visitare
http://creativecommons.org/licenses/by-sa/1.0/ oppure inviare una
lettera all’indirizzo Creative Commons, 559 Nathan Abbott Way,
Stanford, California 94305, USA.
G. Mecca - Tecnologie di Sviluppo per il Web
40
Scarica

Dettagli e Approfondimenti () - Corso di Laurea in Informatica