Lezione 4 (stampa)

Lezione 4
HTML e stili
All'inizio del web solo annotazioni strutturali
La decisione sullo stile di presentazione demandata ai browser
Progettazione di siti web
a.a. 2015/16
Fogli di stile: introduzione
Maria Simi
Marzo, 2016
HTML esteso con tag stilistici fonte di problemi
Tag proprietari e non standard
Trucchi e cattive pratiche
Mancanza di pulizia e ridondanza delle pagine
Scarsa aggiornabilità e consistenza
Difficile visualizzazione su dispositivi alternativi
[Learning web design,
design, J. Niederst
Manuale di riferimento del W3C]
La risposta: i fogli di stile
1996: definizione dei fogli di stile da parte del W3C (CSS
Level 1 o CSS-1)
Dal 1996 al 2000: scarso supporto dei browser
CSS-2 ben supportati da tutti i browser moderni salvo
alcune eccezioni
Il supporto non è ancora completo per i CSS3, ma vale la
pena iniziare ad usarli.
Uno stile per molti contenuti
I fogli di stile possono essere globali per il sito
Le regole stilistiche stanno in un posto solo e sono utilizzate da tutte le
pagine del sito
Facilità di sviluppo
più facile sviluppare siti consistenti dal punto di vista visuale
Facilità nella manutenzione del sito
se si vuole cambiare uno stile si cambia in un posto solo
1 di 7
Vantaggi dei CSS
Possibilità di applicare lo stesso stile a più contenuti
Possibilità di riutilizzo di uno stesso contenuto con stili
diversi
Facilità di sviluppo e manutenzione
Maggiore controllo stilistico
Stesso contenuto in più stili
Diversi fogli di stile possono essere applicati alla stessa
pagina
fogli di stili diversi per diversi media: lo schermo, la stampa, il
proiettore, il dispositivo mobile ...
stili diversi a seconda delle dimensioni dello schermo
Possibile il riutilizzo degli stessi contenuti
Lezione 4
Maggiore controllo stilistico
Con i fogli di stile si riescono a controllare aspetti stilistici
che non si possono controllare in altro modo
Le famiglie di tipi (font, dimensioni, interlinea)
Regole CSS: sintassi
Un foglio di stile contiene un insieme di regole stilistiche
Sintassi di una regola:
La sottolineatura dei link
La possibilità di HOVER sui link
Divisione della pagina in sezioni (div, span) con stili diversi
Controllo di margini e bordi
I colori, gli sfondi, il tiling, lo scorrimento
altro ...
Regole CSS
selettore {
proprietà
à: valore
valore;
;
propriet
proprietà
à: valore
valore;
;
propriet
…
proprietà
à: valore
propriet
}
Regole CSS: altri esempi
regola
dichiarazioni
Un esempio
body {
margin:
: 0;
margin
background:
: white
white;
;
background
font-family
family:
: helvetica
helvetica,
, arial
arial,
, sans
sans-serif
font
}
Selettori
Selettori per tipo di elemento (per tag)
si selezionano tutti gli elementi con un certo tag
h1 {color: blue}
Selettori ID e CLASS
per selezionare elementi che abbiamo caratterizzato (nel codice
HTML) con l’attributo ID oppure con l’attributo CLASS
Selettori contestuali
Si selezionano certi elementi sulla base del loro contesto (es. solo
quelli che compaiono dentro altri elementi)
2 di 7
h1 {
font-weight
weight:
: bold
bold;
;
font
font-size
size:
: 24px
font
}
p, li {
font-size
size:
: 12px
12px;
;
font
line-height
height:
: 150
150%
%
line
}
18px)
)
interlinea 1,5 (18px
Nota: Il punto e virgola separa le dichiarazioni, dopo l'ultima
non serve, anche se c'è non dà errore
Selettori di elementi singoli (per ID)
È possibile definire stili su singoli elementi HTML,
identificati da un nome unico (valore attributo id
id))
Esempio:
id=
="saluti"
"saluti">
>Saluti e baci ... </p>
<p id
#saluti {
font-size: 11px;
margin-top: 25px
}
oppure p#saluti
Nota: ci può essere un solo elemento con un certo id in una
pagina
Lezione 4
Selettori classe (CLASS)
Possiamo definire una classe da usare per specializzare
un tag esistente
Esempio di specializzazione di h2
h2::
HTML:
:
HTML
CSS:
:
CSS
class=
="red"
"red">
>Getting started
started</
</h2
h2>
>
<h2 class
h2.
.red {color
color:
: red
red}
}
h2
o definire una classe generica da usare per specializzare
un qualunque elemento:
Selettori contestuali
I selettori contestuali sono limitati nell’applicazione a un
contesto: un tag, un elemento … si presentano come
una sequenza di selettori
Possono essere:
Selettori discendenti
Selettori figlio
Selettori di adiacenza
HTML:
: <h2 class
class=
="smaller"
"smaller">
>Testo piccolo
piccolo<
</h2>
HTML
<p class="smaller">Tutto qui dentro è più piccolo</p
piccolo</p>
CSS:
: *.
*.smaller
smaller {font
font-size
size:
: 80
80%}
%}
CSS
L'albero del documento
<html>
<head>
<title>My
My home page</title>
<title>
page</title>
</head>
<body>
<h1>My
My <em>
<em>home
home</em>
</em> page
page</h1>
</h1>
<h1>
<p>
Welcome to my home page! Let me
tell you about my favorite
<em>composers
</em>:
:
<em>composers</em>
</p>
<div>
<ul>
<li> Elvis Costello </li>
<li> Johannes Brahms </li>
<li> George Brassens </li>
</ul>
</div>
</body>
</html>
Selettori figlio
Come un selettore discendente ma si applica solo ai figli
di un determinato elemento
background-color
color:
: gray
gray}
}
p > em {background
<p>Solo
Solo l
l’
’elemento <em>
<em>figlio
figlio<
</em> di p
<p>
<i>ma non quello che segue che invece è
un <em>nipote</em
></i
i></
></p
p>
<em>nipote</em></
Il simbolo “>” è detto combinatore
3 di 7
Selettori discendenti
Definiscono stili che si applicano solo ad elementi
all’interno di altri tag:
color:
: red }
h1 { color
em { color:
color: red }
h1 em { color
color:
: blue }
<h1>Questo
Questo titolo è <em>
<em>molto
molto<
</em> importante</h1
>
<h1>
importante</h1>
L’enfasi è blu nel contesto di un titolo rosso altrimenti è
rossa
ol a em { font
font-weight
weight:
: bold }
Il testo enfatizzato dentro un’ancora dentro una lista
ordinata viene reso in grassetto
Selettori di adiacenza
Si applica ad elementi che sono direttamente
consecutivi e allo stesso livello (fratelli)
padding-left
left:
: 20px
20px}
}
p {padding
padding-left
left:
: 0px
0px}
}
h1 + p {padding
I paragrafi sono normalmente rientrati con eccezione del
primo paragrafo immediatamente seguente un titolo di
primo livello.
Lezione 4
DIV e SPAN: elementi generici
Servono per creare un elemento HTML a cui applicare gli
stili. Una sorta di contenitore generico di porzioni di
documenti.
Ne esistono di due tipi
Elementi di tipo “blocco”: <div> ... </div> provocano una interruzione
di riga prima e dopo
Tre modi di usare gli stili
Foglio di stile in un file esterno e riferito nell' intestazione
del documento
Stili definiti nella testa del documento (embedded
(embedded))
Stili definiti sugli elementi del documento (inline
(inline))
mediante l'attributo style
Elementi "in linea": <span> ... </span>
Gli attributi
id:: per dare un nome unico
id
class:: per dire che appartiene a una certa classe (tipo)
class
Non abusarne: applicare stili a elementi standard, se
possibile.
Fogli di stile esterni
Passi da seguire:
Si crea il foglio di stile con un editore di testo
Si salva con estensione .css (es stile.css)
Nella sezione head della pagina HTML a cui vogliamo applicare lo stile:
<head>
…
type=
="text/css" href
href=
="stile.css" />
<link rel=
rel="stylesheet" type
…
</head>
Pagina normale normale Pagina con CSS
Fogli di stile inline :-O
Per cambiare gli stili localmente in una porzione di un
documento
Supponiamo che lo stile del documento preveda il font
arial, dimensione 12px, di colore nero …
color:
: red
red;
; font
font-style
style:
: italic
italic"
">
<p style=
style="color
Questo è importante e lo voglio mettere
in rosso e in corsivo!!
</p>
Pagina con CSS (inline)
4 di 7
Fogli di stile embedded
Se vogliamo definire uno stile che vale solo per il
documento:
<head>
…
type=
="text/css"
"text/css">
>
<style type
<!-body {
margin: 0;
font-family: helvetica, arial, sans-serif
}
-->
</style>
</head>
Nota:: I commenti servono per i browser che non supportano i CSS e per
Nota
evitare l’indicizzazione da parte dei motori di ricerca
Fogli di stile in cascata
Ma perché in cascata (cascading
)?
(cascading)?
Tutti gli aspetti stilistici sono definiti dai browser e
continuano a valere, a meno di ridefinizione
Ogni aspetto stilistico può essere definito più volte e ad
uno stesso elemento si possono applicare regole in
conflitto. Quale vince?
Vince sempre la definizione più specifica
Ma più specifica in che senso?
Secondo la struttura gerarchica del documento
Lezione 4
L'albero del documento
I selettori e l'albero
Ogni selettore seleziona un
sottoinsieme degli elementi
nell'albero
<html>
<head>
<title>My
My home page</title>
<title>
page</title>
</head>
<body>
<h1>My
My <em>
<em>home
home</em>
</em> page
page</h1>
</h1>
<h1>
<p>
Welcome to my home page! Let me
tell you about my favorite
<em>composers
composers</em>
</em>:
:
<em>
</p>
<div>
<ul>
<li> Elvis Costello </li>
<li> Johannes Brahms </li>
<li> George Brassens </li>
</ul>
</div>
</body>
</html>
Esempi
H1
LI
DIV
P EM
LI più specifico di UL
UL più specifico di DIV
DIV allo stesso livello di H1
P fratello di H1
Gli stili vengono ereditati a meno di ridefinizione
Precedenza tra sorgenti di stile
Precedenza temporale
Esiste inoltre la seguente precedenza tra stili definiti su
uno stesso elemento a seconda della provenienza. In
ordine di precedenza:
A parità di sorgente vale la regola stilistica più recente
Esempio 1: due fogli di stile collegati
<head>
"stile1.css">
>
<link rel=
rel="stylesheet" type=
type="text/css" href=
href="stile1.css"
rel=
="stylesheet" type
type=
="text/css" href
href=
="stile2.css">
<link rel
"stile2.css">
</head>
1. Stili definiti inline nel corpo del documento (tramite l'attributo
STYLE)
2. Stili definiti nella testa del documento, dei due tipi:
- Stili definiti in file esterni riferiti tramite LINK
In caso di conflitti vincono le regole in stile2
- Stili definiti nel tag STYLE nella testa del documento
Esempio 2: due regole nello stesso foglio di stile
3. Stili definiti dall’utente (con opzioni del browser)
color:
: red}
h1 {color
red}
blue}
}
h1 {color:
color: blue
4. Stili definiti dai browser (quelli di default)
Vince il colore blu
Esempio
<html>
<head>
type=
="text/css"
"text/css">
>
<style type
color:
: green
green}
}
h1 {color
</style>
rel=
="stylesheet" type
type=
="text/css" href
href=
="stile.css"
"stile.css">
>
<link rel
</head>
file stile.
stile.css:
css:
h1 {
style=
="color
color:
: red
red"
">
<body style
color:
: yellow
yellow;
;
color
...
}
<h1 style=
style="color:
color: blue"
blue">Come sono?</h1>
sono?</h1>
<p> Testo che segue il titolo.</p>
titolo.</p>
</body>
</html>
Esempio
html>
>
<html
<
<head
head>
>
<
<style
style type
type=
="text/css"
"text/css">
>
h1
h1 {color
color: : green
green}
}
</
</style
style>
>
<
<link
link rel
rel=
="stylesheet"
"stylesheet" type
type=
="text/css"
"text/css" href=
="stile.css"
"stile.css">
> href
</
</head
head>
> <
<body
body style
style=
="color: red"
"color: red">
> <h1 h1>
> <
h1 style=
style="color: blue">
"color: blue">Come sono?</
Come sono?</h1
<
<p>Testo che segue il titolo.
Testo che segue il titolo.</
</p
p>
</
</body
body>
>
</html
html>
>
</
stile.css
Esempio
5 di 7
Lezione 4
Sfruttate la cascata!
Regole in forma abbreviata
Esempio 1
font-weight
weight:
: bold}
h1 {font
bold}
weight:
: bold
bold}
}
h2 {fontfont-weight
weight:
: bold
bold}
}
h3 {fontfont-weight
h1,
, h2
h2,
, h3 {font
font-weight
weight:
: bold
bold}
}
h1
color:
: green
green}
}
h1 {color
align:
: center
center}
}
h1 {texttext-align
color:
: green
green;
;
h1 {color
text-align
align:
: center
center}
}
text
La ripetizione per h1 può non essere necessaria
color:
: green
green}
}
h1 {color
red}
}
h1 {color:
color: red
color:
: red
red}
}
h1 {color
Esempio 2
*.smaller
smaller {font
font-size
size:
: 9px
9px}
}
*.
font-size
size:
: 9px
9px}
}
.smaller {font
body {
font-family
family:
: verdana,
arial,
, sansfont
verdana, arial
sans-serif
}
font-family
family:
: verdana
verdana,
, arial,
sans-serif}
h1 {font
arial, sans
serif}
body {
margin:
: 0;
margin
margin-left
left:
: 20px
20px;
;
margin
}
tutti i margini a 0
a parte quello sx
I modelli
font-size
size:
: 36pt
36pt;
;
h1 {font
font-family
family:
: serif
serif;
;
font
font-style
style:
: normal
normal;
;
font
font-weight
weight:
: normal
normal;
;
font
fontfont-variant:
variant: normal;
normal;
line-height
height:
: normal
normal}
}
line
font:
: 36pt serif
serif}
}
h1 {font
Un anticipo del box model
Per capire meglio la filosofia dei CSS, al di là delle liste di
attributi e loro valori ...
Ogni elemento HTML occupa una porzione rettangolare
dello schermo, una scatola (element
(element box)
box)
Box model:
model: gli oggetti che si possono influenzare con i
CSS sono scatole rettangolari che si possono comporre e
annidare.
Ogni scatola ha un’area per il contenuto (un testo,
un’immagine), un padding (imbottitura), un bordo
bordo,, un
margine
Visual model:
model: ci dice come queste scatole vengono
sistemate nella finestra del browser (lo vedremo più
avanti)
È come se fossero 4 rettangoli uno dentro l'altro
Box model: la struttura
Tutti questi rettangoli, o loro parti, hanno proprietà che
possono essere influenzate tramite i CSS
I quattro lati dei rettangoli
margin-top
top:
: 8px
margin
margin-right
right:
: 10px
margin
margin-bottom
bottom:
: 12px
margin
margin-left
left:
: 14px
margin
margin:
: top right bottom left
margin
margin:
: 8px
margin
margin:
: 8px 8px 8px 8px
margin
margin:
: 8px 4px 2px
margin
margin:
: 8px 4px 2px 4px
margin
margin:
: 8px 2px
margin
margin:
: 8px 2px 8px 2px
margin
6 di 7
Lezione 4
Le proprietà dei box: margini
Valori: lunghezze, percentuali rispetto al contenitore,
auto
auto inserisce un margine grande quanto basta a
riempire il blocco contenitore
Per centrare un elemento di tipo blocco:
margin-left
left,
, margin
margin-right
right:
: auto
auto;
;
margin
Il blocco viene centrato perché il margine sinistro e
destro sono resi uguali per simmetria
Proprietà dei box: bordi
border-style::
border-style
none, hidden, dotted, dashed, solid, double, groove
(incavato), ridge (sporgente), inset (incavato), outset (a rilievo)
border-width::
border-width
thin, medium, thick (thin < medium < thick)
una misura (in px, em ...)
border-color::
border-color
trasparent o un colore
Stessa cosa per padding
padding,, che serve per distaccare il
contenuto da un eventuale bordo
Fogli di stili per media diversi
Possiamo per una stessa pagina richiamare fogli di stile
diversi
type=
="text/css"
<link rel=
rel="stylesheet" type
media=
="screen, projection" href
href=
="stile_schermo.css" />
media
In particolare possiamo avere un foglio di stile per lo
schermo, uno diverso per la stampa, uno per un
telefonino o palmare con browser …
<link rel=
rel="stylesheet" type=
type="text/css"
media=
="print" href
href=
="stile_stampa.css" />
media
Quelli ben supportati sono:
media="all", per tutti i media
media="print", per la stampa
media ="screen", per il video
Altri: projection, handheld, aural …
Conclusioni
Perché è una buona idea usare gli stili
Regole, selettori, attributi, valori
Stili esterni, embedded e inline
L'albero del documento
Regole di precedenza degli stili
Prossimamente
Esercizio sui selettori
Stili per la tipografia
7 di 7
Fogli di stili per media diversi: uso
Il primo è utilizzato per lo schermo o la proiezione
il secondo per la stampa (visibile con anteprima di
stampa).