Lucidi d`introduzione al CSS, linguaggio per i `fogli di stile`

Transcript

Scaletta
Struttura logica & Layout fisico
CSS in un guscio di noce
Informatica applicata, 8a lezione
Eugenio Omodeo
Università degli Studi di Trieste.
Trieste, 30.03.2012
Eugenio Omodeo
Scaletta
Obiettivo generale
Esempio illustrativo
Proprietà e valori
Selettori
Applicazioni in cascata
Eugenio Omodeo
Scaletta
Obiettivo generale
Struttura e layout – I
Quello che dobbiamo fare è separare i contenuti dalla
loro presentazione.
Gigliotti, HTML 4.01, pag.128
Eugenio Omodeo
Scaletta
Obiettivo generale
Struttura e layout – II
Medesimo concetto, ma espresso in parole a mio parere un po’
fuorvianti:
Il compito fondamentale dell’HTML [· · · ] è fornire una
descrizione semantica (ossia conforme al significato) del
contenuto e definire un documento strutturato (ossia
con una gerarchia di elementi). Non si occupa della
presentazione, cioè di come il documento verrà
visualizzato in un browser: questo è il compito dei CSS
( Cascading Style Sheets), che non è argomento di
questo libro.
Niederst Robbins, HTML & XHTML, pag.1
Eugenio Omodeo
Scaletta
Obiettivo generale
Struttura e layout – III
Partiamo da un esempio per cercare di tracciare la distinzione fra
I
struttura logica e
I
layout fisico
di una pagina HTML.
Il significato dei contenuti della pagina si colloca ad un altro
livello ancora, quello della semantica, che per il momento non
intendo affrontare. . .
Eugenio Omodeo
Scaletta
Obiettivo generale
Esempio di pagina HTML – I
Eugenio Omodeo
Scaletta
Obiettivo generale
Esempio di pagina HTML – I
In questa pagina figura un commento che, per HTML, è un
“corpo estraneo” :
Eugenio Omodeo
Scaletta
Obiettivo generale
Esempio di pagina HTML – II
La struttura logica di quanto precede si può cosı́ riassumere:
I
Dopo un’intestazione,
I
gli elementi sono organizzati in un elenco
I
entro il quale ciascuna voce ha una porzione enfatizzata
( il numero di telefono )
Le scelte stilistiche sono interamente demandate al browser
Eugenio Omodeo
Scaletta
Obiettivo generale
Esempio di pagina HTML – III
Un browser ci mostrerà questo:
Eugenio Omodeo
Scaletta
Obiettivo generale
Esempio di pagina HTML – IV
Per far emergere le scelte stilistiche, abilitiamo il richiamo al CCS
che prima—tre lucidi fa—era un commento:
Eugenio Omodeo
Scaletta
Obiettivo generale
Esempio di pagina HTML – V
Tramite le scelte stilistiche, vogliamo descrivere il seguente
layout fisico:
I
intestazioni centrate, enormi e grigie;
I
le liste utilizzano “punti elenco” quadrati
I
l’enfasi va resa tramite grassetto corsivo
Eugenio Omodeo
Scaletta
Obiettivo generale
Esempio di pagina HTML – VI
La specifica di tale layout tramite Cascading Style Sheets, in
acronimo CSS, è:
Eugenio Omodeo
Scaletta
Obiettivo generale
Esempio di pagina HTML – VII
Grazie alla specifica CSS, lo stesso browser di prima ci mostrerà la
pagina cosı́:
Eugenio Omodeo
Scaletta
Selettori
CSS in un
guscio di noce
Eugenio Omodeo
Scaletta
Selettori
Concetti fondamentali dei CSS
I due concetti fondamentali dei CSS sono i selettori e le proprietà:
I selettori specificano i tag, nei diversi contesti ove i tag
possono comparire.
Le proprietà descrivono la rappresentazione fisica dei tag HTML,
che talvolta occorre adattare al contesto.
I alle proprietà dei selettori, si assegnano valori
A detta di Møller e Schwartzbach, Introduzione alle tecnologie
WEB pag.15, questi due concetti hanno influenzato anche le
successive tecnologie XML
Eugenio Omodeo
Scaletta
Selettori
Proprietà e valori in CSS
Esempi di proprietà e relativi valori ammessi:
color
display
line-height
font-size
font-style
text-align
red, yellow, rgb(212,120,20)
block, inline, list-item, none
normal, 1.2em, 120%
12pt, larger, 150%, 1.5em
normal, italics, oblique
left, right, center, justify
CSS offre 51 proprietà, che però volta a volta vanno scelte in base
al tag.
Eugenio Omodeo
Scaletta
Selettori
Selettori in CSS – I
I
I selettori semplici hanno lo stesso nome dei tag. Ad es., la
specifica CSS
b {color: red; font-size: 12pt}
i {color: red; font-size: 12pt}
dice che i tag ed , usualmente resi come grassetto e
corsivo, vanno resi rispettivamente
I
I
in rosso e corpo 12;
in verde.
Eugenio Omodeo
Scaletta
Selettori
Selettori in CSS – II
I
Un selettore composto descrive uno dei contesti entro cui può
comparire un tag. Ad es., la specifica CSS
table b {color: red; font-size: 12pt}
form b {color: yellow; font-size: 12pt}
dice come rendere il tag quando figura racchiuso (anche
a piú livelli di annidamento) in una tabella o in un form.
Eugenio Omodeo
Scaletta
Selettori
Selettori in CSS – III
I
Nella seguente specifica CSS:
html body table tr td form b {color: orange}
l’intera sequenza che precede la proprietà che si sta definendo
è un ( arzigogolato ) esempio di selettore. Come lo
interpretate?
Eugenio Omodeo
Scaletta
Selettori
Esempio pratico – IV
I
Quando si entra nel contesto di un tag <cite>, abitualmente
il carattere viene inclinato;
I
stesso effetto viene prodotto dal tag ;
I
ma allora un’enfatizzazione dentro una citazione non si vede
piú !
I
Possiamo rimediare indicando nel foglio di stile che
cite em {font-style: normal}
Eugenio Omodeo
Scaletta
Selettori
Selettori in CSS – V
I
Quando un contesto come sopra non basta, i tag HTML
possono venir contrassegnati da attributi class, che servono a
designare selettori specifici in un foglio di stile. Cosı́
b.gigantesco {font-size: 36pt}
si applicherà ai tag della forma

Eugenio Omodeo
Scaletta
Selettori
Selettori in CSS – V
I
Nel caso del tag a, CSS permette di usare quattro
pseudo-classi denominate
a:link
a:hover
a:active
a:visited
che designano i possibili stati di un collegamento ipertestuale:
(1) non ancora utilizzato; (2) sul punto di esserlo (in quanto
sfiorato dal puntatore del mouse); (3) cliccato; (4) già
esplorato almeno una volta.
Eugenio Omodeo
Scaletta
Selettori
Dov’è che le cose si fanno difficili?
In generale può capitare che piú selettori siano applicabili
a uno stesso tag HTML, il che solleva la questione di
quale insieme di valori delle proprietà applicare caso per
caso.
CSS risolve questo problema introducendo il complicato
meccanismo della specificità, che definisce un
ordinamento unico su tutti i selettori.
Informalmente, possiamo riassumerlo dicendo che “il
selettore piú complicato ha sempre la precedenza”.
Møller e Schwartzbach, Introduzione alle tecnologie WEB, pag.16
Eugenio Omodeo
Scaletta
Selettori
Esempio di applicazione di selettori – I
body {color: darkmagenta;}
b {color: red;}
b b {color: blue;}
b.foo {color: green;}
b b.foo {color: yellow;}
b.bar {color: maroon;}
Eugenio Omodeo
Scaletta
Selettori
Esempio di applicazione di selettori – II
Con il foglio di stile appena visto, di che colore risulterà ogni parola
di
<body bgcolor=”white”>
Hey!
Wow!
Incredibile!
Impressionante!
Ganzo!
Fantastico!

eccetera
</body>
Eugenio Omodeo
Scaletta
Selettori
Dove si specifica lo stile? – I
Le specifiche di stile possono risiedere
I
all’esterno dell’HTML, in un apposito foglio di stile (un file
.css), richiamato tramite tag <link> dall’interno della sezione
<head>
I
direttamente nell’intestazione (=sezione <head>) dello stesso
documento HTML
I
nell’attributo style di un singolo tag
( Analoga “ubiquitarietà” abbiamo riscontrato in JavaScript )
Eugenio Omodeo
Scaletta
Selettori
Dove si specifica lo stile? – II
Se ci sono specifiche su piú livelli, quale prevale?
Eugenio Omodeo

Lucidi d`introduzione al CSS, linguaggio per i `fogli di stile`

Transcript

Documenti analoghi

THEDARKROOM FIRENZE

scarica il file - INSTANT WEBSITES

da Guareschi, l`umorismo e la Storia, Atti del Convegno del 16 luglio

Soluzioni capitolo 11 1

Guscio di noce

travertino noce

X:\xampp\htdocs\www\prof. Uccellani\informatica\html\23 fogli di stile

myCSS. Manuale di registrazione.

E dai Paesi Ince uno sguardo contemporaneo sull`Est Europa