Fogli di stile: introduzione

Corso di Laurea in Scienze della Formazione
Continua e Tecnologie dell‟Istruzione
Parte V
Fogli di stile - Css
Corso: Computer Graphics
Docente: Ing. Ivan Bruno
E-mail: [email protected]
Introduzione dei 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 da parte dei browser
Legge della “gravidanza di 18 mesi” [Zeldman]
Adesso cominciano ad essere praticabili: CSS-1 ben
supportato da:




Explorer 5 e maggiori
Opera 5 e maggiori
Netscape 6 e maggiori
Il supporto non è ancora completo
2
1
Problemi da superare

Abuso di HTML come linguaggio di annotazione stilistica



Spreco di banda di comunicazione





mancanza di pulizia delle pagine
tag proprietari e non standard
I tag stilistici occupano spazio nella pagina (font ripetuto per tutti i
paragrafi o tutte le celle di una tabella)
Le tabelle ritardano il caricamento
Le immagini al posto dei testi sono pesanti
Scarsa aggiornabilità e consistenza
Ostacolo al progresso


Difficile visualizzazione su browser non grafici
In futuro: PDA, telefonini …
3
Vantaggi dei CSS

Separazione stile-contenuto





Aderenza agli standard




Contenuto con il minimo di struttura necessario
Stili specificati a parte
Possibilità di applicare lo stesso stile a più contenuti
Possibilità di riutilizzo di uno stesso contenuto con stili
diversi
Maggiore durata nel tempo del progetto
Maggiore compatibilità
Facilità di manutenzione
Maggiore controllo stilistico
4
2
Facilità di manutenzione

I fogli di stile possono essere globali per il
sito


Le regole stilistiche stanno in un posto solo e
sono utlizzate da tutte le pagine del sito
Facilità di sviluppo e gestione


Più facile sviluppate siti consistenti dal punto di
vista visuale
Facilità nella manutenzione del sito: se si vuole
cambiare uno stile si cambia in un posto solo
5
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)
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
atro ...
6
3
Regole CSS: sintassi
7
Regole CSS
selettore {
attributo1: valore1;
attributo2: valore2;
…
attributok: valorek;}
regola
dichiarazioni
Esempio:
body {
margin: 0;
background: white;
o meglio #ffffff
font-family: helvetica, arial, sans-serif }
possibili valori
alternativa generica
8
4
Regole CSS: altri esempi
h1 {
font-weight: bold;
font-size: 24px;
}
in pixel
p, li {
font-size: 12px;
line-height: 150%;
interlinea 1,5 (18px)
}
Nota: Il punto e virgola separa le dichiarazioni, dopo
l'ultima non serve anche se non da' errore
9
Selettori classe

Possiamo definire una sottoclasse di un tag
esistente con un stile particolare.


Esempio di specializzazione di h2
h2.red {color: #ff0000}
<h2 class="red">Getting started</h2>
O una sottoclasse generica che si può utilizzare per
specializzare un qualunque elemento
Esempio di sotto-classe generica
.smaller {font-size: 9px}
<p class="smaller">Testo piccolo</h2>
<div class="smaller">Tutto qui dentro è
piccolo</div>

10
5
Selettori di elementi singoli


È possibile anche definire stili che si applicano solo
ad elementi HTML identificati da un ID
Esempio
#footer {
font-size: 11px;
margin-top: 25px
}
<div id="footer"> Saluti e baci ... </div>
Nota: ce ne può essere solo uno per pagina
11
Selettori discendenti

È possibile definire stili che si applicano solo in certi contesti
(nell’ambito di altri tag)
h1 { color: red }
em { color: red }
<h1>Questo titolo è<em>molto</em> importante</h1>
h1 { color: red }
em { color: red }
h1 em { color: blue }

L’enfasi è blù nel contesto di un titolo rosso altrimenti è rossa.
12
6
Tre modi di usare gli stili
1.
2.
3.
Foglio di stile in un file esterno e riferito nel
documento
Stili definiti nella testa del documento
(embedded)
Stili definiti nei tag del documento (inline)
mediante l'attributo style
13
Fogli di stile esterni

Passi da seguire:
Si crea il foglio di stile
2. Si salva con estensione .css (es stile.css)
3. Nella sezione head della pagina HTML a cui vogliamo
applicare lo stile:
<head>
…
<link rel="stylesheet" type="text/css"
href="stile.css">
…
</head>
1.
14
7
Fogli di stile embedded

Se vogliamo definire uno stile che vale solo per il documento:
<head>
…
<style type="text/css">
<!-body {margin: 0;
font-family: helvetica, arial, sans-serif
}
-->
</style>
</head>
I commenti servono per i browser che non
supportano i CSS e per evitare
l’indicizzazione da parte dei motori di ricerca
15
Fogli di stile inline


Per cambiare gli stili localmente in una porzione di
un documento
Supponiamo che lo stile del documento preveda il
tipo Arial, dimensione 12px, di colore nero …
<p style="color: red; font-style:
italic">
Questo è importante e lo voglio
mettere
in rosso e in corsivo!!
</p>
16
8
Fogli di stile “in cascata”





Ma perché in cascata?
Tutti gli aspetti stilistici sono definiti dai browser e
valgono a meno di ridefinizione
Ogni elemento stilistico può essere ridefinito (anche
più volte) e vince sempre la definizione “pìù
specifica”
... a parità di specificità la definizione più recente
Ma più specifica in che senso?


Secondo la struttura gerarchica del documento
Il documento è un oggetto che contiene altri oggetti che
contengono altr oggetti ...
17
Il concetto di cascata


Gli attributi di un elemento vengono presi non da uno (il primo,
l'ultimo, ecc.) dei fogli di stile, ma composti dinamicamente sulla
base del contributo di tutti, in cascata.
Ad esempio, avendo tre fogli di stile, che riportano ciascuno una
delle seguenti regole,




P { font-family: Arial; font-size: 12 pt; }
P {color: red; font-size: 11 pt; }
P {margin-left: 15 pt; color: green;}
… gli attributi dell'elemento P saranno equivalenti a:

P{
font-family: Arial;
font-size: 11 pt;
margin-left: 15 pt;
color: green;
}
18
9
L‟albero del documento
<HTML>
BODY
<HEAD>
<TITLE>My home page</TITLE>
</HEAD>
H1
P
DIV
<BODY>
<H1>My <em>home</em> page</H1>
<P>Welcome to my home page!
Let me tell you about my
EM
UL
favorite composers:</p>
<DIV>
<UL>
<LI> Elvis Costello </LI>
<LI> Johannes Brahms </LI>
LI
LI
LI
<LI> Georges Brassens </LI>
</UL>
</DIV>
</BODY>
Gli stili vengono ereditati a
</HTML>
meno di ridefinizione
19
I selettori e l'albero


Ogni selettore seleziona un sottoinsieme
degli elementi nell'albero
BODY
Esempi
H1
P
DIV
H1
LI
EM
UL
DIV
P EM
LI
LI
LI
20
10
Precedenza temporale


A parità di specificità, gli stili definiti su un elemento
cancellano quelli definiti precedentemente
In particolare esiste la seguente precedenza:




Stili definiti inline nel corpo del documento (BODY o tramite
l'attributo STYLE di altri tag come Hx, DIV, P, ...)
Stili definiti nella testa del documento
 Stili definiti in file esterni riferiti tramite LINK
 Stili definiti nel tag STYLE nella testa del documento
Stili definiti dai browser (quelli di default)
Se nello stesso foglio di stile definisco due volte lo
stesso elemento vale l'ultimo
Casi particolari: margin: 0; margin-left: 20px
21
Esempio
<html>
<head>
<style type="text/css">
h1 {color: green}
</style>
<link rel="stylesheet" type="text/css"
href="stile.css">
</head>
file stile.css
h1 {color: yellow;
<body style="color: red">
font-family: arial
}
...
<h1 style="color: blue">Come sono?</h1>
Testo che segue il titolo.
</body>
</html>
22
11
CSS per la tipografia





Tipi dei caratteri (font)
Testo
Colori e sfondi
Margini
Tabelle
23
Ancora sulle regole: forme
abbreviate
h1 {font-weight: bold}
h2 {font-weight: bold}
h3 {font-weight: bold}
h1 {color: green}
h1 {text-align: center}
Abbreviazioni
H1, H2, H3 {font-weight:
bold}
H1 {color: green;
text-align: center}
h1 {color: green}
h1 {color: red}
H1 {color: red}
*.smaller {
font-size: 9px}
.smaller {
font-size: 9px}
h1 {font-size: 36pt;
font-family: serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: normal}
H1 {36pt serif}
24
12
Font


I caratteri possono essere visualizzati in stili
tipografici diversi, associando ad essi delle immagini
(gliph)
Un tipo (font) è un insieme coordinato di gliph, che
possono essere o non essere disponibili sulla
macchina locale



Per questo motivo bisogna dare delle alternative
Per questo motivo a volte i caratteri speciali previsti dallo
standard (anche se compresi dal browser) non sono
visualizzati
Famiglia di font: un insieme coordinato di font
25
Attributi di font

font-family




font-style


serif, sans-serif, cursive,
fantasy, monospace



normal, small-caps

ultra-condensed, wider,
condensed, semicondensed, normal ...
font-size

normal, Italic, oblique
bold, bolder, lighter,100 ...
900
font-stretch

font-variant

font-weight

Famiglie generiche:


con o senza serif (grazie)
proporzionali o fisse
fantasy, handwriting

Misura assoluta in pt, px,
large, small
Misura relativa: larger,
smaller, %, em
line-height: interlinea
26
13
Misure assolute e relative

Misure assolute




punti (pt)
pixel (punti sullo schermo)
xxsmall, x-small, small, medium, large, x-large, xx-large
Misure relative



valore %, larger, smaller ...
1 em è pari alla dimensione del font in punti (la dimensione
della M): specificare 0.8em significa un carattere che è
l’80% di quello del padre
1 ex è pari all’altezza di una lettera minuscola
27
Pixel, punti, em?


I punti (pt) sono per la stampa.
In teoria le misure relative sono migliori





Preferenze dei browser per aggiustare dimensioni
Netscape 4 per MAC ignora le misure in % se usate per le
dimensioni dei font
Alcune versioni di Netscape 4 li trattano come pixel
Netscape 4 ignora gli em. IE3 li tratta come pixel
Le misure in pixel sono le più affidabili

A volte il ridimensionamento mediante le preferenze dei
browser non funziona
28
14
Modello visuale di CSS (1)


La visualizzazione di un documento con CSS avviene identificando lo
spazio di visualizzazione di ciascun elemento del documento.
Ogni elemento è definito da una scatola all'interno del quale sta il
contenuto. Le scatole sono in relazione alle altre come segue:
 Le scatole degli elementi contenuti stanno dentro alla scatole
dell'elemento genitore.
 Flusso normale di tipo blocco: le scatole sono poste l'una sopra
l'altra in successione verticale (come paragrafi).
 Flusso normale di tipo inline: le scatole sono poste l'una accanto
all'altra in successione orizzontale (come parole della stessa riga)
 Flusso di tipo float: le scatole sono poste all'interno del contenitore e
poi spostate all'estrema sinistra o destra della scatola, lasciando che
le altre scatole vi girino intorno.
 Posizionamento assoluto: le scatole vengono poste nella posizione
indicata indipendentemente dal flusso e da quel che la zona già
visualizza (eventualmente nascondendo ciò che sta sotto).
29
Modello visuale di CSS (2)

Alcune proprietà controllano il tipo di posizionamento e di
scatola:

DISPLAY (inline | block | list-item | run-in | … | none): il tipo di scatola da
utilizzare per l'elemento: un blocco, un inline, una lista, una
cella di tabella, ecc. Si noti che in HTML molti elementi hanno
un valore display predeterminato, che NON può essere
cambiato da un valore diverso.




Inline: l’oggetto occupa una scatola organizzata orizzontalmente
all’interno del suo contenitore
Block: l’oggetto occupa una scatola organizzata verticalmente
rispetto al suo contenitore.
List-item, marker: parti di un elemento di lista, ecc
Z-INDEX:la posizione nello stack di scatole potenzialmente
sovrapposte. Il valore più alto è più vicino al lettore, e quindi
nasconde gli altri. N.B.: per default il valore di background delle
scatole è trasparente.
30
15
Modello visuale di CSS (3)

POSITION (static | relative | absolute | fixed): il posizionamento rispetto al
flusso del documento.







Static (default): la scatola segue la posizione di flusso normale che
avrebbe naturalmente
Relative: attraverso proprietà come left e top sposto di un delta la
posizione della scatola rispetto alla sua posizione naturale.
Absolute: una posizione assoluta su canvas (scrolla), indicata
attraverso le proprietà top, left, right, bottom, width, height.
Fixed: una proprietà assoluta sulla finestra (non scrolla), indicata
attraverso le proprietà top, left, right, bottom, width, height.
FLOAT (left | right | none): un float è una scatola scivolata all'estrema
destra o sinistra del contenitore muovendo le altre per farle
posto.
TOP, BOTTOM, LEFT, RIGHT: coordinate della scatola
WIDTH, HEIGHT: dimensioni usabili invece di right e bottom.
31
Un esempio di posizionamento (1)
32
16
Un esempio di posizionamento (2)







p.abs { position: absolute; top: 40px; left: 210px;
width: 190px; background:white;
border-style: solid; border-width: 1px;}
p { display: block; border-style: solid;
border-width: 1px; }
b,i { display:inline; border-style: solid;
border-width: 1px; background:yellow;}
span.left { border-style: solid; border-width: 1px;
float:left; font-size: 200%;}
<P>Alcune parole di un paragrafo che si estende per <span
class="left">righe e righe</span>, cos&igrave; da far
vedere come si comporta su pi&ugrave; righe.</P>
<P>Secondo paragrafo che contiene altre parole e un pezzo
in <b>grassetto</b> ed uno in <i>corsivo</i>.</p>
<p class="abs">Terzo paragrafo posizionato in maniera
assoluta dove capita </p>
33
Elementi della scatola
34
17
Elementi della scatola (2)

Margini: la regione che separa una scatola dall'altra, necessariamente
trasparente.


Border: la regione ove visualizzare un bordo per la scatola.



border-top, border-bottom, border-left, border-right, border-width, border-color:
dimensioni ed aspetto del bordo.
border-style: può assumere come valori none, dotted, dashed, solid, double,
groove, ridge, inset, outset.
Padding: la regione di respiro tra il bordo della scatola ed il contenuto. Ha il
colore dello sfondo.


margin-top, margin-bottom, margin-left, margin-right: dimensioni del margine
della scatola.
padding-top, padding-bottom, padding-left, padding-right: dimensioni del padding
della scatola.
Content: la regione dove sta il contenuto dell'elemento.

background-color, background-image, background-repeat, backgroundattachment, background-position: colore, immagine e meccanismo di ripetizione
dell'immagine di sfondo della scatola.
35
Testo

text-indent: il rientro della prima riga di un blocco



text-align


valori: center, right, left, justify
text-decoration


valori assoluti in em, px, cm ...
valori relativi in %
underline, overline, line-through
text-shadows

h1 {text-shadow: 0.2em 0.2em}
36
18
Ancora testo

letter-spacing


word-spacing


H1 {word-spacing: 1em}
text-transform


blockquote{letter-spacing: 0.1em}
capitalize, uppercase, lowercase
white-space



normal (le sequenze di spazi e gli “a capo” sono ignorati)
pre (le sequenze di spazi e gli “a capo” sono rispettati)
nowrap (spazi ignorati, a capo soppressi)
37
Colori e sfondi

Due stili che vanno specificati insieme
 color: il colore del testo
 sfondo




background-color: un colore o „transparent‟
background-image: un‟immagine specificata da un URL
gli sfondi non si ereditano ma sono normalmente trasparenti
Sfondi degli elementi
 background-repeat

Valori: repeat, repeat-x, repeat-y, no-repeat

background-attachment

background-position


Valori: fixed, scroll
Valori: posizione in % o assoluta
38
19
Tabelle
<table>
<caption>Tabella 3x3</caption>
<tr id="row1"><th>Header 1</th>
<td>Cell 1</td><td>Cell 2</td></tr>
<tr id="row2"> <th>Header 2</th>
<td>Cell 3</td><td>Cell 4</td></tr>
<tr id="row3"><th>Header 3</th>
<td>Cell 5</td><td>Cell 6</td>
</table>

NOTA: specifica per riga
Aggiungiamo un po’ di stile con i CSS ...
39
Tabelle e CSS
TH { vertical-align: center;
text-align: center;
font-weight: bold; font-size: x-large }
TD { vertical-align: middle }
TABLE {border: 1px solid black }
TR#row1 { text-align: left }
TR#row2 { text-align: center }
TR#row3 { text-align: right }
CAPTION { caption-side: top }
HTML
40
20
Margini


Blockquote e le liste (ol, ul)
normalmente rientrano il
testo contenuto
Lo spazio intorno può
essere controllato con le
proprietà:





margin
margin-left
margin-right
margin-top
margin-bottom
blockquote {
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 0em;
font-style: italic;}
o anche:
blockquote {
margin: 1em 0em 1em
0em;
font-style: italic;}
In senso orario a partire da top
41
Link

Link sottolineato o non
a:link {text-decoration: underline;}
a:link, a:visited {text-decoration:
none}
a:hover {background: cyan}
a:hover {color: red}

Link, visited, hover sono chiaramente
specializzazioni di a. Ma perché i due punti?


non sono proprio classi come le altre ...
sono pseudo-classi perché si basano su proprietà che
sono esterne al documento (es. un link è stato visitato)
42
21
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
Gli stili per la tipografia
43
22