Fogli di stile: introduzioneMaria Simi, a.a. 2003/04

Contenuti tratti da: [D. Siegel, J. Zeldman, Manuale di riferimento del W3C]

22 aprile 2023 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

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

22 aprile 2023 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 In futuro: PDA, telefonini …

22 aprile 2023 4

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 durata nel tempo del progetto Maggiore compatibilità

Facilità di manutenzione

Maggiore controllo stilistico

22 aprile 2023 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 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

22 aprile 2023 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, il tiling, lo scorrimento atro ...

22 aprile 2023 7

Regole CSS: sintassi

22 aprile 2023 8

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

22 aprile 2023 9

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

22 aprile 2023 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>

22 aprile 2023 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: ce ne può essere solo uno per pagina

22 aprile 2023 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 è blù nel contesto di un titolo rosso altrimenti è

rossa.

22 aprile 2023 13

Tre modi di usare gli stili

1. Foglio di stile in un file esterno e riferito nel documento

2. Stili definiti nella testa del documento (embedded)

3. Stili definiti nei tag del documento (inline) mediante l'attributo style

22 aprile 2023 14

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> Pagina normale Pagina con CSS

22 aprile 2023 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 evitarel’indicizzazione da parte dei motori di ricerca

22 aprile 2023 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>

Pagina normale Pagina con CSS (inline)

22 aprile 2023 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 ...

22 aprile 2023 18

L’albero del documento<HTML> <HEAD> <TITLE>My home page</TITLE> </HEAD> <BODY> <H1>My <em>home</em> page</H1>

<P>Welcome to my home page! 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

22 aprile 2023 19

I selettori e l'albero

Ogni selettore seleziona un sottoinsieme degli elementi nell'albero

Esempi

H1 LIDIVP EM

BODY

H1 P DIV

LI LI LI

ULEM

22 aprile 2023 20

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'ultimoCasi particolari: margin: 0; margin-left: 20px

22 aprile 2023 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>HTML

22 aprile 2023 22

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)

22 aprile 2023 23

CSS per la tipografia

Tipi dei caratteri (font)

Testo

Colori e sfondi

Margini

Tabelle

22 aprile 2023 24

Ancora sulle regole: 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}

*.smaller {font-size: 9px}

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}

.smaller {font-size: 9px}

H1 {36pt serif}

22 aprile 2023 25

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

22 aprile 2023 26

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

22 aprile 2023 27

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

22 aprile 2023 28

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

22 aprile 2023 29

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}

22 aprile 2023 30

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)

22 aprile 2023 31

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

22 aprile 2023 32

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 HTML

Aggiungiamo un po’ di stile con i CSS ...

22 aprile 2023 33

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

22 aprile 2023 34

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

22 aprile 2023 35

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)

22 aprile 2023 36

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