Architettura dell’Informazione
7. - Cascading Style Sheets (CSS)
Paolo Milazzo
Dipartimento di Informatica, Universit`a di Pisa http://pages.di.unipi.it/milazzo
milazzo di.unipi.it
Master in Turismo e ICT
A.A. 2015/2016
Sommario
1
Introduzione ai CSS
2
CSS e HTML
Usare CSS in HTML
3
La sintassi di CSS Definizione
I tag <div> e <span>
Alcune propriet` a di base
4
Il modello visuale di CSS Il box model
Il posizionamento degli elementi
Introduzione ai CSS (1)
HTML ` e nato con l’idea di descrivere i contenuti in maniera separata rispetto agli aspetti di presentazione
Le prime versioni dei browser permettevano agli utenti di definire l’aspetto dei vari elementi dei documenti HTML visualizzati (dimensione dei font, colori, ecc...)
Successivamente la diffusione e l’evoluzione dei siti web ha reso sempre pi` u importante la gestione centralizzata degli aspetti di presentazione
La possibilit` a di visualizzare documenti HTML in dispositivi di natura diversa (PC, smartphones, ecc...) ha stimolato ulteriormente la separazione tra gli aspetti di contenuto e quelli di presentazione, promouovendo l’utilizzo di linguaggi di stile specializzati
Cascading Style Sheets (CSS) ` e il linguaggio di stile che, tra le
numerose proposte, si ` e imposto come “compagno” standard di
HTML
Introduzione ai CSS (2)
Esistono diversi livelli di specifica di CSS:
CSS level 1 (1991): ` e un linguaggio di formattazione visiva abbastanza semplice. Permette di specificare caratteristiche tipografiche e di presentazione di ogni elemento di un documento HTML
CSS level 2 (1998): attualmente in versione 2.1, ` e un linguaggio di layout sofisticato e complesso
CSS level 3 ` e stata sviluppata negli ultimi anni: migliora/estende la gestione di layout sofisticati, colori, sfondi, bordi, animazioni, trasformazioni, etc...
Il supporto dei browser a CSS ` e complesso e difficile da realizzare.
Attualmente, comunque, le versioni pi` u recenti dei principali browser
suportano completamente la versione 2.1 e quasi completamente la
versione 3.
Usare CSS in HTML (1)
CSS fornisce informazioni sull’aspetto di elementi di un documento HTML descritti tramite i tag
Si basa su regole simili alla seguente:
p { font-family: Arial; font-size: 12pt; } che stabilisce che tutti per visualizzare il contenuto di tutti i tag <p>
nel documento deve essere usato font Arial di dimensione 12 punti
Usare CSS in HTML (2)
HTML prevede l’uso di CSS in (almeno) tre modi diversi:
I
Posizionato direttamente nel tag di riferimento tramite l’attributo style
I
All’interno di un tag <style>
I
Importato da un file esterno usando il tag <link>
L’ultimo modo, che prevede di importare un documento CSS (detto foglio di stile) da un file esterno, consente di scrivere il codice CSS una volta sola per tutte le pagine di un sito
I
basta importare lo stesso file in tutti documenti HTML del sito
Vediamo degli esempi....
Usare CSS in HTML (3)
CSS posizionato direttamente nel tag di riferimento tramite l’attributo style:
< h t m l >
< h e a d >
< t i t l e > P a g i n a di p r o v a < / t i t l e >
< / h e a d >
< b o d y >
< h1 s t y l e = " c o l o r : b l u e ; " > Q u e s t o t i t o l o d e v e e s s e r e blu < / h1 >
< p > C o n t e n u t o d e l l a p a g i n a di p r o v a < / p >
< / b o d y >
< / h t m l >
In questo caso la regola CSS sarebbe
h1 { color: blue; }
ma nell’attibuto style si indica solo il contenuto tra parentesi
la regola CSS si applica solo a quello specifico tag <h1>, non a tutti
gli altri
Usare CSS in HTML (4)
CSS all’interno di un tag <style>:
< h t m l >
< h e a d >
< t i t l e > P a g i n a di p r o v a < / t i t l e >
< s t y l e t y p e = " t e x t / css " >
h1 { c o l o r : b l u e ; }
< / s t y l e >
< / h e a d >
< b o d y >
< h1 > Q u e s t o t i t o l o d e v e e s s e r e blu < / h1 >
< p > C o n t e n u t o d e l l a p a g i n a di p r o v a < / p >
< / b o d y >
< / h t m l >
Stesso risultato del precendnte, ma in questo caso se ci fossero altri
tag <h1> anche il loro contenuto diventerebbe blu.
Usare CSS in HTML (5)
CSS indicato dal tag <link>:
< h t m l >
< h e a d >
< t i t l e > P a g i n a di p r o v a < / t i t l e >
< l i n k t y p e = " t e x t / css " rel = " s t y l e s h e e t " h r e f = " e x t f i l e . css " >
< / h e a d >
< b o d y >
< h1 > Q u e s t o t i t o l o d e v e e s s e r e blu < / h1 >
< p > C o n t e n u t o d e l l a p a g i n a di p r o v a < / p >
< / b o d y >
< / h t m l >
dove extfile.css ` e il seguente
h1 { c o l o r : b l u e ; }
Stesso risultato del precendnte, tutti i titoli <h1> diventano blu.
Il file extfile.css pu` o essere “linkato” anche dalle altre pagine dello
stesso sito (per uniformare l’aspetto)
Gli attributi id e class
HTML prevede che tutti i tag di un documento possano avere attributi id e class
I
id deve essere associato ad un identificativo univoco di un’occorrenza di un tag nell’intero documento (non pu` o essere ripetuto)
I
class deve essere associato ad un identificativo di classe che pu` o essere usato pi` u volte nel documento
CSS pu` o usare i valori di id e class per specificare che una regola si applica ad uno specifico elemento del documento o a tutti gli
elementi della stessa classe (vedremo...)
La sintassi di CSS (1)
Un foglio di stile CSS ` e costituito da una sequenza di regole Ogni regola consiste di un selettore e di una o pi` u dichiarazioni racchiuse tra parentesi graffe (e ogniuna terminata da “;”)
Ogni dichiarazione consiste di una propriet` a ed un valore (separati da
“:”)
selettore { propriet` a
1:valore
1; propriet` a
2:valore
2; ...}
Il selettore ` e solitamente il tag di cui la regola specifica l’aspetto Le propriet` a sono caratteristiche di stile che possono essere associate agli elementi. Sono definite dalla specifica di CSS e sono in tutto 53 per CSS level 1 e ben 121 per CSS level 2
I valori dipendono dalla propriet` a a cui sono assengati...
p { font-family:Arial; font-size:12pt; }
La sintassi di CSS (2)
selettore { propriet` a
1:valore
1; propriet` a
2:valore
2; ...}
Il selettore pu` o avere tante forme, tra cui:
Selettore di tipo. Un tag (senza parentesi <,>): body, p, table, div, span, . . .
Selettore di classe. Pu` o avere due forme E.val e E#val.
Significano che la regola si applica a tutti gli elementi E in cui gli attributi class e id, rispettivamente, sono assegnati a val.
Inoltre ci sono altri selettori (che non vediamo) per selezionare un tag che
si trova dentro un altro tag, la prima riga di un paragrafo, la prima lettera
di un paragrafo, una parola su cui ` e posizionato il mouse, ecc...
Un Esempio
< h t m l >
< h e a d >
< t i t l e > P r o v a < / t i t l e >
< s t y l e t y p e = " t e x t / css " >
li . p a r i { c o l o r : red ; } li . d i s p a r i { c o l o r : b l u e ; } p # c h i u s u r a { font - s i z e : 7 5 % ; }
< / s t y l e >
< / h e a d >
< b o d y >
< p > E s e m p i o di l i s t a c o l o r a t a : < / p >
< ul >
< li c l a s s = " d i s p a r i " > P r i m o < / li >
< li c l a s s = " p a r i " > S e c o n d o < / li >
< li c l a s s = " d i s p a r i " > T e r z o < / li >
< li c l a s s = " p a r i " > Q u a r t o < / li >
< / ul >
< p id = " c h i u s u r a " > Una f r a s e di c h i u s u r a s c r i t t a in p i c c o l o ... < / p >
< / b o d y >
< / h t m l >
Il concetto di cascata
Un concetto molto importante in CSS ` e il concetto di cascata: regole successive che si possono applicare ad un elemento del documento HTML devono essere applicate in sequenza
Ad esempio, applicando in sequenza:
I
p { font-family: Arial; font-size: 12pt; }
I
p { color: red; font-size: 11pt; }
I
p { margin-left: 15pt; color: green; } otterremo lo stesso risultato di
I
p { font-family: Arial; font-size: 11pt;
margin-left: 15pt; color: green; } Questa funzionalit` a ` e utile in particolare in due casi:
I
Quando si prevede di applicare pi` u fogli di stile (usando pi` u volte il tag
<link>) allo stesso documento HTML
I
Quando si vogliono applicare regole generali (ad esempio a tutti i tag
<p>) + regole specifiche per singoli elementi tramite l’attibuto style
I tag <div> e <span> (1)
Con CSS si possono specificare regole di presentazione da associare a qualunque tag
Talvolta, per` o, si vorrebbero definire regole da applicare
I
ad un’intera porzione del documento HTML (che potrebbero includere molti tag diversi),
F Ad esempio, per impostare il colore di sfondo di un’area del documento
I
o a un piccolo frammento di testo all’interno di un paragrafo (che potrebbe non essere delimitato da un tag)
F Ad esempio, per impostare il font di una parola in mezzo al testo
Per rendere possibile la definizione di queste regole in HTML sono
stati definiti i tag <div> e <span>
I tag <div> e <span> (2)
Il tag <div> viene usato per delimitare un’area (anche rilevante) del documento HTML a cui applicare delle regole stilistiche comuni;
Esempi di utilizzo:
I
per suddividere il documento in sezioni, ognuna delimitata da un bordo colorato
I
per isolare l’area che contiene l’indice del sito in modo da posizionarla alla sinistra della pagina
Il tag <span> viene usato per identificare un piccolo frammento (tipicamente di testo) all’interno di un paragrafo, una lista, una tabella, ecc...
Esempi di utilizzo:
I
Per creare un’effetto evidenziatore su singole parole o porzioni di frase
I tag <div> e <span> (3)
Tecnicamente, la differenza tra <div> e <span> consiste nel fatto che:
I
<div> appartiene alla categoria degli elemento di tipo block (come i paragrafi, le tabelle, ecc...) , ovvero elementi che, se usati in sequenza, vengono visualizzati uno sotto l’altro con un po’ di spazio tra uno e l’altro
I
<span> appartiene alla categoria degli elementi di tipo inline (come
<strong>, <b>, ecc...), ovvero elementi che, se usati in sequenza, vengono visualizzati uno accanto all’altro
Gli attributi id e class potranno poi essere usati per differenziare le
varie occorrenze di <div> e <span> nel documento e applicarvi regole
di stile diverse
I tag <div> e <span> (4)
Facciamo un esempio di uso di <div> e <span>:
< h t m l >
< h e a d > < t i t l e > P r o v a div e s p a n < / t i t l e > < / h e a d >
< s t y l e t y p e = " t e x t / css " >
div . t i t o l o {
text - a l i g n : c e n t e r ; c o l o r : red ;
}
s p a n # qp {
b a c k g r o u n d - c o l o r : y e l l o w ; }
< / s t y l e >
< b o d y >
< div c l a s s = " t i t o l o " >
< h1 > T i t o l o p r i n c i p a l e < / h1 >
< h2 > S o t t o t i t o l o < / h2 >
< / div >
< div c l a s s = " c o r p o " >
< p > Q u e s t o & e g r a v e ; il c o r p o del d o c u m e n t o in cui e v i d e n z i a m o
< s p a n id = " qp " > q u e s t a p a r t e < / s p a n > t r a m i t e l ’ uso del tag s p a n < / p >
< / div >
< b o d y >
< / h t m l >
I tag <div> e <span> (5)
Il risultato dell’esempio:
Un po’ di esempi (1)
Per fare un po’ di esempi consideriamo il seguente (body di) documento HTML
< b o d y >
< h1 > R i c e t t a : la < s p a n c l a s s = " p i a t t o " > p a s t a al p o m o d o r o < / s p a n > < / h1 >
< p > V e d i a m o ora c o m e p r e p a r a r e un ’ o t t i m a < s p a n c l a s s = " p i a t t o " > p a s t a al p o m o d o r o . < / s p a n > I n n a n z i t u t t o , m e t t e r e a b o l l i r e in una p e n t o l a c a p i e n t e a b b o n d a n t e a c q u a . < / p >
< p > T a g l i a r e a f e t t i n e s o t t i l i la < s p a n c l a s s = " i n g r " > c i p o l l a < / s p a n >
e s o f f r i g g e r l a con l ’ < s p a n c l a s s = " i n g r " > o l i o < / s p a n > in una p a d e l l a f i n o a q u a n d o non sar & a g r a v e ; ben d o r a t a . In s e g u i t o a g g i u n g e r e i < s p a n c l a s s = " i n g r " > p o m o d o r i < / s p a n > e il
< s p a n c l a s s = " i n g r " > b a s i l i c o < / s p a n > . < / p >
< p > Q u a n d o b o l l e l ’ acqua , s a l a r l a e v e r s a r e gli < s p a n c l a s s = " i n g r " >
s p a g h e t t i < / s p a n > . Una v o l t a che gli s p a g h e t t i s o n o cotti , s c o l a r l i e a g g i u n g e r v i il s u g o di p o m o d o r o . < / p >
< / b o d y >
Un po’ di esempi (2)
Vediamo come il browser visualizza il documento HTML:
Un po’ di esempi (3)
Primo foglio di stile:
b o d y {
b a c k g r o u n d - c o l o r : # C C F F 8 8 ; font - f a m i l y : sans - s e r i f ; }
h1 {
c o l o r : red ;
text - a l i g n : c e n t e r ; }
Un po’ di esempi (4)
Secondo foglio di stile (nota: p:first-letter ` e un selettore che indica la prima lettera di un paragrafo)
s p a n . i n g r {
b a c k g r o u n d - c o l o r : y e l l o w ; }
p : first - l e t t e r {
font - s i z e : 3 0 0 % ; f l o a t : l e f t ; }
Un po’ di esempi (5)
Terzo foglio di stile (nota: span:hover ` e il selettore che indica il tag span su cui si ` e posizionato il mouse):
s p a n . ingr , s p a n . p i a t t o {
b a c k g r o u n d - c o l o r : y e l l o w ; }
s p a n : h o v e r {
b a c k g r o u n d - c o l o r : red ; }
p : first - l e t t e r {
font - s i z e : 3 0 0 % ; f l o a t : l e f t ; }
Alcune propriet` a di base
Alcune (buona parte) delle propriet` a che si possono usare nelle regole CSS sono illustrate nell’appendice di questa lezione (slides aggiuntive sul sito del corso).
L’elenco completo delle propriet` a si trova nella specifica di CSS definita
dal consorzio W3C o in numerosi siti e tutorial sul web.
Il modello visuale di CSS (1)
Il modello visuale di CSS (ovvero l’insieme di principi riguardo la disposizione degli elementi) ` e detto Box Model
Ogni elemento (tag) di un documento HTML ` e visto come una scatola che consiste di
I
Uno spazio di margine (margin)
I
Un bordo (border) che pu` o essere trasparente, una linea continua o tratteggiata, ecc...
I
Uno spazio di separazione del contenuto dal bordo (padding)
I
Il contenuto vero e proprio del tag (content)
Il modello visuale di CSS (2)
Esistono numerose propriet` a per specificare le caratteristiche di un tag secondo il box model
Ad esempio, si possono impostare
I
larghezza e altezza dell’elemento
I
aspetto del bordo (tipo di linea, colore, spessore, ecc...)
I
dimensione del margine e del padding
I
colore di sfondo
le propriet` a si possono applicare anche a un signolo lato della
“scatola” che rappresenta il tag
la descrizione dei dettagli di queste propriet` a pu` o essere trovata
nell’appendice di questa lezione (slides aggiuntive sul sito del
corso).
Un esempio di uso del box model (1)
Riprendiamo l’esempio:
< b o d y >
< h1 > R i c e t t a : la < s p a n c l a s s = " p i a t t o " > p a s t a al p o m o d o r o < / s p a n > < / h1 >
< p > V e d i a m o ora c o m e p r e p a r a r e un ’ o t t i m a < s p a n c l a s s = " p i a t t o " > p a s t a al p o m o d o r o . < / s p a n > I n n a n z i t u t t o , m e t t e r e a b o l l i r e in una p e n t o l a c a p i e n t e a b b o n d a n t e a c q u a . < / p >
< p > T a g l i a r e a f e t t i n e s o t t i l i la < s p a n c l a s s = " i n g r " > c i p o l l a < / s p a n >
e s o f f r i g g e r l a con l ’ < s p a n c l a s s = " i n g r " > o l i o < / s p a n > in una p a d e l l a f i n o a q u a n d o non sar & a g r a v e ; ben d o r a t a . In s e g u i t o a g g i u n g e r e i < s p a n c l a s s = " i n g r " > p o m o d o r i < / s p a n > e il
< s p a n c l a s s = " i n g r " > b a s i l i c o < / s p a n > . < / p >
< p > Q u a n d o b o l l e l ’ acqua , s a l a r l a e v e r s a r e gli < s p a n c l a s s = " i n g r " >
s p a g h e t t i < / s p a n > . Una v o l t a che gli s p a g h e t t i s o n o cotti , s c o l a r l i e a g g i u n g e r v i il s u g o di p o m o d o r o . < / p >
< / b o d y >
Un esempio di uso del box model (2)
Il foglio di stile:
h1 {
text - a l i g n : c e n t e r ; }
p {
w i d t h : 300 px ; m a r g i n : 20 px a u t o ; }
s p a n . i n g r {
b o r d e r : 2 px d a s h e d red ; p a d d i n g : 0 px 10 px ; }
Il posizionamento degli elementi (1)
Il box model consente di descrivere la dimensione, posizione e spaziatura di ogni elemento di un documento HTML
Il browser legge in sequenza i vari tag del documento HTML e visualizza i contenuti disponendo le corrispondenti “scatole” (box) in uno dei seguenti modi (a seconda del tag usato):
I
Gli elementi di tipo block (es. div, p, li, ecc...) vengono disposti l’uno sotto l’altro in successione verticale
I
Gli elementi di tipo inline (es. span, strong, ecc...) vengono disposti l’uno accanto all’altro in successione orizzontale Inoltre, usando opportune proprit` a CSS si pu` o
I
Visualizzare un elemento di tipo block come se fosse inline e viceversa
I
Impostare una visualizzazione float, in cui la scatola viene spostata all’estrema sinistra o destra, lasciando che le altre scatole vi girino intorno
I
Impostare una posizione assoluta per una scatola nella finestra del
browser (eventualmente nascondendo ci` o che gi` a occupava la posizione
specificata)
Il posizionamento degli elementi (2)
La propriet` a display consente di impostare la modalit` a di visualizzazione di un elemento
I
block,inline, none (elemento non visualizzato), e altri pi` u specifici Esempio: men` u disposto in orizzontale
a {
d i s p l a y : b l o c k ;
b o r d e r : 2 px s o l i d b l a c k ; b a c k g r o u n d - c o l o r : y e l l o w ; w i d t h : 100 px ;
m a r g i n : 20 px ; p a d d i n g : 20 px ; text - a l i g n : c e n t e r ; text - d e c o r a t i o n : n o n e ; }
< a h r e f = " ... " > H o m e < / a >
< a h r e f = " ... " > D o w n l o a d s < / a >
< a h r e f = " ... " > C o n t a t t i < / a >
Il posizionamento degli elementi (3)
La propriet` a position consente di specificare il tipo di
posizionamento dell’elemento all’interno della finestra del browser.
Possibili valori:
I
static (valore di default) segue il flusso normale di visualizzazione degli elementi
I
relative consente di specificare la posizione in maniera relativa rispetto al punto in cui l’elemento sarebbe visualizzato di default
I
fixed consente di specificare una posizione fissata relativa alla finestra del browser (l’elemento non viene “scrollato via” (rimane fermo) quando si agisce sulla barra di scorrimento)
I
absolute consente di specificare una posizione con coordinate assolute all’interno dello spazio messo a disposizione dall’elemento che lo contiene
Le posizioni (assolute e relative) sono espresse tramite le propriet` a
left,top,right e bottom
Il posizionamento degli elementi (4)
div # m e n u {
w i d t h : 300 px ; h e i g h t : 300 px ; b o r d e r : s o l i d ; p o s i t i o n : f i x e d ; top : 100 px ; l e f t : 30 px ; }
div # m e n u a {
b o r d e r : s o l i d red ; w i d t h : 150 px ; p o s i t i o n : a b s o l u t e ; }
a # a1 { top : 10 px ; l e f t : 10 px ; }
a # a2 { top : 100 px ; l e f t : 100 px ; }
a # a3 { top : 200 px ; l e f t : 50 px ; }
< div id = " m e n u " >
< a id = " a1 " h r e f = " ... " > H o m e < / a >
< a id = " a2 " h r e f = " ... " > D o w n l o a d s < / a >
< a id = " a3 " h r e f = " ... " > C o n t a t t i < / a >
< / div >
Il posizionamento degli elementi (5)
Con CSS ` e possibile anche “accumulare” elementi sulla sinistra (o sulla destra) usando la propriet` a float
Impostando float:left; l’elemento viene visualizzato all’estrema sinistra, con gli altri elementi disposti attorno ad esso
Se si setta la propriet` a float per pi` u elementi questi vengono
“impilati”, sulla sinistra (o sulla destra), eventualmente disposti su pi` u righe
Gli elementi si ridispongono, se necessario, quando si ridimensiona la finestra del browser
Per evitare che gli altri elementi del documento HTML si dispongano
attorno all’elemento floating si pu` o usare la propriet` a clear
Il posizionamento degli elementi (6)
Un esempio di floating:
p {
m a r g i n : 0 px ; }
p . c i t a z i o n e {
f l o a t : l e f t ; b o r d e r : s o l i d red ; font - s t y l e : i t a l i c ; m a r g i n : 10 px ; p a d d i n g : 20 px ; }
applicato a:
< p > Un po ’ di t e s t o di r i e m p i e m e n t o o r g a n i z z a t o in p a r a g r a f i < / p >
< p c l a s s = " c i t a z i o n e " > Una c i t a z i o n e da e v i d e n z i a r e < / p >
< p > Un po ’ di t e s t o di r i e m p i e m e n t o o r g a n i z z a t o in p a r a g r a f i < / p >
< p > Un po ’ di t e s t o di r i e m p i e m e n t o o r g a n i z z a t o in p a r a g r a f i < / p >
< p > Un po ’ di t e s t o di r i e m p i e m e n t o o r g a n i z z a t o in p a r a g r a f i < / p >
