fogli di stile: introduzionefioravan/03-css.pdf · 4 problemi da superare abuso di html come...
TRANSCRIPT
Fogli di stile: introduzione
Fabio Fioravanti
2
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
3
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS) Trident (IE), Gecko (Mozilla)
4
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 …
5
Vantaggi dei CSS Separazione stile-contenuto
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
Aderenza agli standard Maggiore compatibilità Maggiore durata nel tempo del progetto
Facilità di manutenzione Maggiore controllo stilistico
6
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
7
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 ...
8
Regole CSS: sintassi
9
Regole CSS
selettore {attributo1: valore1;attributo2: valore2; regola
…attributok: valorek;} dichiarazioni
Esempio:body {
margin: 0;background: white; o meglio #fffffffont-family: helvetica, arial, sans-serif }
possibili valori alternativa generica
10
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
11
Selettori classe
Possiamo definire una sottoclasse di un tag esistente con un stile particolare. Esempio di specializzazione di h2h2.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>
12
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
13
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.
14
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
15
Fogli di stile esterni
Passi da seguire:1. Si crea il foglio di stile2. 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>
16
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
17
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>
18
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 ...
19
L’albero del documento<HTML> <HEAD> <TITLE>My home page</TITLE> </HEAD> <BODY>
<H1>My home page</H1> <P>Welcome to <em>my home page!</em> Let me tell you about my favorite composers:</P>
<DIV> <UL> <LI> Elvis Costello </LI> <LI> Johannes Brahms </LI> <LI> Georges Brassens </LI> </UL> </DIV> </BODY></HTML> Gli stili vengono ereditati a
meno di ridefinizione
BODY
H1 P DIV
LI LI LI
ULEM
20
I selettori e l'albero
Ogni selettore seleziona un sottoinsieme degli elementi nell'albero
EsempiH1 LIDIVP EM
BODY
H1 P DIV
LI LI LI
ULEM
21
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'ultimoCasi particolari: margin: 0; margin-left: 20px
22
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; }
23
Matches any E element ID equal to "myid".E#myid
HTML only. The same as DIV[class~="warning"]. DIV.warning
Matches any E element whose "foo" attribute value is exactly equal to "warning". E[foo="warning"]
Matches any E element with the "foo" attribute set (whatever the value). E[foo]
Matches any F element immediately preceded by an element E.E + F
Matches E during certain user actions. E:active
E:hoverE:focus
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:linkE:visited
Matches element E when E is the first child of its parent. E:first-child
Matches any F element that is a child of an element E.E > F
Matches any F element that is a descendant of an E element.E F
Matches any E element (i.e., an element of type E).E
Matches any element.*
MeaningPattern
Matching dei selettori
24
Attenzione alla virgola!
Ad esempio, il selettore P, LI è molto diverso dal selettore P LI
25
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.
26
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)
27
CSS per la tipografia
Tipi dei caratteri (font) Testo Colori e sfondi Margini Tabelle
28
Forme abbreviate
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 {font-size: 36pt; font-family: serif; font-style: normal; font-weight: normal; font-variant: normal; line-height: normal}
Abbreviazioni
h1,h2,h3 {font-weight: bold}
h1 {color: green; text-align: center}
h1 {color: red}
h1 {36pt serif}
*.smaller and .smaller*[LANG=fr] and [LANG=fr]*#myid and #myid
29
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
30
Attributi di font
font-family con o senza serif (grazie) proporzionali o fisse fantasy, handwriting
Famiglie generiche: serif, sans-serif, cursive,
fantasy, monospace font-style
normal, Italic, oblique font-variant
normal, small-caps
font-weight bold, bolder, lighter,100 ...
900 font-stretch
ultra-condensed, wider, condensed, semi-condensed, normal ...
font-size Misura assoluta in pt, px,
large, small Misura relativa: larger,
smaller, %, em line-height: interlinea
31
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
32
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ù
affidabiliA volte il ridimensionamento mediante le
preferenze dei browser non funzionascarsa portabilità
33
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}
34
Ancora testo
letter-spacing blockquote{letter-spacing: 0.1em}
word-spacing H1 {word-spacing: 1em}
text-transform 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)
35
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;
}
36
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
Valori: fixed, scroll background-position
Valori: posizione in % o assoluta
37
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>
38
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 }
39
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
40
Link
Link sottolineato o nona: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)
41
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
42
43
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.
44
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
45
Box model: gli attributi
46
I quattro lati dei rettangoliTOP 1
BOTTOM 3
RIGHT 2LEFT 4
margin-top: 1margin-right: 2margin-bottom: 3margin-left: 4
margin: 1 2 3 4
margin: xmargin: x x x x
margin: x ymargin: x y x y
margin: x y zmargin: x y z yStessa cosa per border e padding
47
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-left-width, border-top-color, ..., border-top-style ...
48
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
49
Blocco contenitore iniziale
La radice dell’albero del documento, BODY, corrisponde al blocco contenitore iniziale, rispetto al quale gli altri sono posizionati
50
Tipi di blocchi
Esistono diversi tipi di elementi dal punto di vista del posizionamento. Quelli più importanti sono:gli elementi bloccogli elementi inline
Esempi:P, UL, OL, DIV sono elementi di tipo blocco IMG, EM, STRONG, SPAN sono elementi
inline
51
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 testomesso qui per mostrare l’interruzionedi linea.
Testo prima.
Testo enfatizzato. Testo dopo.
52
Posizionamento Ci sono tre schemi di posizionamento delle scatole:
flusso normale: quello che uno si aspetta se non specificato diversamente
float (scatole fluttuanti)
posizionamento esplicito: la scatola viene posizionata rispetto all’oggetto contenitore
Le proprietà rilevanti sono position e float
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 asinistra per il fatto che il quadrato è stato dichiarato di tipo float right.
53
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
54
Dove posizionarsi(top, right, bottom, left)
top: 10px; right: 40%;
left: 30px;bottom: 40%;
55
Ristrutturare pagine esistenti
Una pagina vecchio stile da ristrutturare
Fase 1: Markup Ripristinare markup, dando un nome agli elementi
individuati Fase 2: Layout
Posizionare le scatole (solo CSS) Fase 3: Stile
aggiustare lo stile del contenuto (solo CSS)
56
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.
57
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.
58
Fase 3: stile
Adesso possiamo aggiustare gli stili degli elementi
Anche qui si cambia solo il foglio di stile Questa fase è meno problematica.
59
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
60
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).
61
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/
62
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/
63
Crediti
Maria Simi, a.a. 2003/04 Contenuti tratti da: [D. Siegel, J. Zeldman,
Manuale di riferimento del W3C]