Fogli di stile: introduzione

Fogli di stile:
introduzione
Fabio Fioravanti
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
Adesso CSS-1 ben supportato dalla maggior
parte dei browser
Il supporto CSS2 non è ancora uniforme
CSS3 all’orizzonte
2
http://en.wikipedia.org/wiki/Comparison_of_lay
 Trident (IE), Gecko (Mozilla)

3
Problemi da superare

Abuso di HTML come linguaggio di annotazione stilistica
mancanza di pulizia delle pagine
 tag proprietari e non standard


Spreco di banda di comunicazione
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
 Hot topic: PDA, telefonini …

4
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 compatibilità
Maggiore durata nel tempo del progetto
Facilità di manutenzione
Maggiore controllo stilistico
5
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 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
6
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, lo scorrimento
altro ...
7
Regole CSS: sintassi
8
Regole CSS
selettore {
attributo1: valore1;
attributo2: valore2;
regola
…
attributok: valorek;}
dichiarazioni
Esempio:
body {
margin: 0;
background: white;
o meglio #ffffff
font-family: helvetica, arial, sans-serif }
possibili valori
alternativa generica
9
Regole CSS: altri esempi
h1 {
font-weight: bold;
font-size: 24px;
}
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
10
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>

11
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: due elementi nella stessa pagina non possono
avere stesso id
12
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 è blu nel contesto di un titolo rosso altrimenti è rossa.
13
Tre modi di usare gli stili
 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
14
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.
15
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
16
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>
17
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
I l documento è un oggetto che contiene altri oggetti che
contengono altr oggetti ...
18
L’albero del documento
<HTML>
BODY
<HEAD>
<TITLE>My home page</TITLE>
</HEAD>
H1
P
DIV
<BODY>
<H1>My home page</H1>
<P>Welcome to <em>my home page!</em> Let me
tell you about my favorite composers:</P>
EM
UL
<DIV>
<UL>
<LI> Elvis Costello </LI>
<LI> Johannes Brahms </LI>
<LI> Georges Brassens </LI>
LI
LI
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
Precedenza temporale


A parità di specificità, gli stili definiti su un elemento cancellano
quelli definiti precedentemente
In particolare esiste la seguente precedenza (decrescente):
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>
<body style="color: red">
...
<h1 style="color: blue">Come sono?</h1>
Testo che segue il titolo.
</body>
</html>

Nel file stile.css
h1 { color: brown; }
22
Matching dei selettori
Pattern
Meaning
*
Matches any element.
E
Matches any E element (i.e., an element of type E).
EF
Matches any F element that is a descendant of an E element.
E>F
Matches any F element that is a child of an element E.
E:first-child
Matches element E when E is the first child of its parent.
E:link
E:visited
Matches element E if E is the source anchor of a hyperlink of which the target is
not yet visited (:link) or already visited (:visited).
E:active
E:hover
E:focus
Matches E during certain user actions.
E+F
Matches any F element immediately preceded by an element E.
E[foo]
Matches any E element with the "foo" attribute set (whatever the value).
E[foo="warning"]
Matches any E element whose "foo" attribute value is exactly equal to "warning".
DIV.warning
HTML only. The same as DIV[class~="warning"].
E#myid
Matches any E element ID equal to "myid".
23
Attenzione alla virgola!

Ad esempio, il selettore P, LI è molto
diverso dal selettore P LI
24
Esempio complesso
DIV OL>LI P
 elemento P discendente di un LI che a sua
volta è figlio di un OL che a sua volta è un
discendente di DIV.
 Lo spazio vuoto opzionale intorno a “>” è
stato omesso.

25
Fase di transizione
Problemi di compatibilità
 Uso limitato e consapevole dei CSS per il
controllo della tipografia
 Le tabelle sono ancora usate per la
disposizione degli oggetti (layout)

26
CSS per la tipografia





Tipi dei caratteri (font)
Testo
Colori e sfondi
Margini
Tabelle
27
Forme abbreviate
Abbreviazioni
h1 {font-weight: bold}
h2 {font-weight: bold}
h3 {font-weight: bold}
h1 {color: green}
h1 {text-align: center}
h1 {color: green}
h1 {color: red}
h1,h2,h3 {font-weight: bold}
h1 {color: green;
text-align: center}
h1 {color: red}
h1 {36pt serif}
h1 {font-size: 36pt;
font-family: serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: normal}
*.smaller and .smaller
*[LANG=fr] and [LANG=fr]
*#myid and #myid
28
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
29
Attributi di font


font-family




serif, sans-serif, cursive,
fantasy, monospace
font-style





font-variant


normal, small-caps

ultra-condensed, wider,
condensed, semicondensed, normal ...
font-size

normal, Italic, oblique
bold, bolder, lighter,100 ...
900
font-stretch

Famiglie generiche:


con o senza serif (grazie)
proporzionali o fisse
fantasy, handwriting
font-weight
Misura assoluta in pt, px,
large, small
Misura relativa: larger,
smaller, %, em
line-height: interlinea
30
Misure assolute e relative

Misure assolute




punti (pt) 1pt = 1/72 in
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
31
Pixel, punti, em?
I punti (pt) sono per la stampa.
 In teoria le misure relative sono migliori

 buona

portabilità
Le misure in pixel sono a volte più
affidabili
 A volte
il ridimensionamento mediante le
preferenze dei browser non funziona
 scarsa portabilità
32
Testo

text-indent: il rientro della prima riga di un blocco
 valori
assoluti in em, px, cm ...
 valori relativi in %

text-align
 valori:

center, right, left, justify
text-decoration
 underline,

overline, line-through
text-shadows
 h1
{text-shadow: 0.2em 0.2em}
33
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)
34
Ereditarietà




i discendenti ereditano alcune proprietà dai predecessori
(es: color); altre non vengono ereditate (es: background)
per sapere se una proprietà è ereditata fare riferimento
allo standard;
In CSS2 “inherit” è uno pseudo-valore che forza l’utilizzo
del valore ereditato
esempio:
body {
color: red;
background: black;
}
35
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


background-attachment


Valori: repeat, repeat-x, repeat-y, no-repeat
Valori: fixed, scroll
background-position

Valori: posizione in % o assoluta
36
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>
</tr>
</table>
37
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 }
38
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
39
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)
40
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

41
42
I modelli


Per capire meglio la filosofia dei CSS, al di là
delle liste di attributi e loro valori ...
Box model: gli oggetti che si possono
influenzare con i CSS sono scatole rettangolari
che si possono comporre.
 L’annidamento
delle scatole corrisponde grosso modo
all’annidamento degli elementi HTML

Visual model: ci dice come queste scatole
vengono sistemate nella finestra del browser.
43
Box model




Ogni elemento di HTML occupa una porzione
rettangolare dello schermo, una scatola (box)
Ogni scatola ha un’area per il contenuto (un
testo, un’immagine), un padding (imbottitura?) ,
un bordo, un margine
È come se fossero 4 rettangoli uno dentro l'altro
Tutte queste sezioni rettangolari hanno proprietà
che possono essere influenzate tramite i CSS
44
Box model: gli attributi
45
I quattro lati dei rettangoli
TOP 1
LEFT 4
margin-top: 1
margin-right: 2
margin-bottom: 3
margin-left: 4
RIGHT 2
margin: 1 2 3 4
margin: x
margin: x x x x
BOTTOM 3
Stessa cosa per border e padding
margin: x y
margin: x y x y
margin: x y z
margin: x y z y
46
Proprietà dei bordi

Border-width
thin, medium, thick (thin  medium  thick)
 una misura (in px, em ...)


Border-color
transparent
 un colore


Border-style


none, hidden, dotted, dashed, solid, double, groove (incavato), ridge
(sporgente), inset (box incavata), outset (box a rilievo)
Esistono anche, influenzabili separatamente

border-top-width, border-right-width, border-bottom-width, border-leftwidth, border-top-color, ..., border-top-style ...
47
Visual model

La sistemazione delle scatole nella finestra del
browser (viewport) è influenzata da:
 le
dimensioni e il tipo della scatola
 lo schema di posizionamento
 le relazioni tra gli oggetti

Blocco contenitore: la scatola che contiene
un’altra scatola. Le posizioni sono tipicamente
relative ai margini del blocco contenitore
48
Blocco contenitore iniziale

La radice dell’albero del documento, BODY,
corrisponde al blocco contenitore iniziale,
rispetto al quale gli altri sono posizionati
49
Tipi di blocchi

Esistono diversi tipi di elementi dal punto
di vista del posizionamento. Quelli più
importanti sono:
 gli
elementi blocco
 gli elementi inline

Esempi:
 P,
UL, OL, DIV sono elementi di tipo blocco
 IMG, EM, STRONG, SPAN sono elementi
inline
50
Blocchi e inline


Blocchi: normalmente
(nel flusso normale)
provocano una
interruzione di linea
Inline: non provocano
una interruzione di
linea, ma tendono a
riempire tutta la riga.
Questo è un paragrafo di testo
messo qui per mostrare l’interruzione
di linea.
Testo prima.
Testo enfatizzato.
Testo dopo.
51
Posizionamento

Ci sono tre schemi di posizionamento delle scatole:


flusso normale: quello che uno si aspetta se non specificato
diversamente
float (scatole fluttuanti)
Questo è un
paragrafo di
testo che si
inserisce a
destra per il fatto che il quadrato
è stato dichiarato di tipo float
left.


Questo è un
paragrafo di
testo che si
inserisce a
sinistra per il fatto che il
quadrato è stato dichiarato di
tipo float right.
posizionamento esplicito: la scatola viene posizionata rispetto
all’oggetto contenitore
Le proprietà rilevanti sono position e float
52
La proprietà position

La proprietà position specifica la modalità di
posizionamento. I valori possibili sono:





static: la cosa normale, l’oggetto viene posizionato dove ci si
aspetta
relative: la posizione è data specificando uno spostamento
rispetto alla sua posizione “normale”
absolute: la posizione è specificata rispetto al blocco
contenitore
fixed: la posizione è fissa rispetto alla finestra del browser
Gli oggetti “posizionati” rspetto al contenitore (position
≠ static) usano le proprietà top, right, bottom, left per
dire dove
53
Dove posizionarsi
(top, right, bottom, left)
top: 10px;
bottom: 40%;
right: 40%;
left: 30px;
54
Ristrutturare pagine esistenti

Una pagina vecchio stile da ristrutturare

Fase 1: Markup
 Ripristinare
individuati

markup, dando un nome agli elementi
Fase 2: Layout
 Posizionare

le scatole (solo CSS)
Fase 3: Stile
 aggiustare
lo stile del contenuto (solo CSS)
55
Fase 1: markup
In questa fase ripuliamo la pagina dalle
tabelle e da tutti gli elementi stilistici.
 Ogni sezione individuata ha un nome e
corrisponde a a un elemento html o a un
div.

56
Fase 2: layout
Estendiamo il foglio di stile con regole di
posizionamento per i div, non tocchiamo
più la pagina HTML.
 È la fase più critica per problemi di
compatibilità tra i browser.

57
Fase 3: stile
Adesso possiamo aggiustare gli stili degli
elementi
 Anche qui si cambia solo il foglio di stile
 Questa fase è meno problematica.

58
Fogli di stili alternativi



Possiamo per una stessa pagina richiamare fogli di stili
diversi
Possiamo avere un foglio di stile diverso per la stampa
Cose tipiche da cambiare



#header { display: none}
diverso da visibility: hidden, in cui la scatola occupa spazio
font-size: 12pt
Ma anche contenuti diversi!!!


Numero di telefono nella versione per il cellulare
Informazioni per registrarsi solo nella versione online
59
Fogli di stile alternativi
<link rel="stylesheet"
type="text/css" media="screen"
href=“stile_schermo.css"/>
<link rel="stylesheet"
type="text/css" media=“print"
href=“stile_stampa.css"/>
 Il primo è utlizzato per lo schermo, il secondo
per la stampa (visibile con anteprima di
stampa).
60

Riferimenti
 http://www.w3.org/Style/CSS/
 http://css.html.it/guide/leggi/2/guida-css-di-base/

Altre risorse
 http://meyerweb.com/
 http://www.richinstyle.com/
 http://www.alistapart.com/
 http://www.csszengarden.com/tr/italiano/

Validator
 http://jigsaw.w3.org/css-validator/
61

Editor
 TopStyle,

DreamWeaver, HTML-Kit
Online editors
 http://www.fonttester.com/
 http://www.pixy.cz/apps/webedit/
 http://cssmate.com/csseditor.htm
 http://www.cssfly.net/
 http://www.qrone.org/cssdesigner.html
 http://www.realeditor.com/editor/
62
Crediti
Maria Simi, a.a. 2003/04
 Contenuti tratti da: [D. Siegel, J. Zeldman,
Manuale di riferimento del W3C]

63