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]