CSS
Cristina Gena
[email protected]
http://www.di.unito.it/˜cgena/teaching.html
[email protected]
1
CSS: ereditarietà
Una importante proprietà dei fogli di stile CSS è l'ereditarietà:
ogni elemento "annidato" (incluso) in un altro ("figlio" di un altro)
ne eredita tutte le proprietà; per esempio:
In esame.html:
P
<p>l'esame si compone di due parti:
una <b>relazione scritta</b> e
B B
una <b>verifica orale</b></p>
I due elementi <B>...</B> sono "annidati" nell'elemento
<P>...</P> (sono figli di <P>) ⇒ ne ereditano le proprietà: se,
nel foglio di stile, ho definito:
p
{font-family:Verdana;
font-size:10pt;
color:blue}
anche il testo degli elementi <B>...</B> sarà Verdana, 10
punti, blu
[email protected]
2
CSS: le classi
E' possibile inoltre definire delle classi: insiemi di stili
"astratti" che possono poi essere associati, nel file .html, a
vari elementi (tag); per esempio:
p.white {font-family:Verdana;
font-size:10pt;
color:white}
classe che potrà essere richiamata solo all'interno del
tag <p class=“white”>
[email protected]
3
CSS: le classi
invece
.red{font-family: Verdana;
font-size12pt;
color:red;
font-weight:bold}
è una classe che potrà essere richiamata all'interno di
qualunque tag (per cui hanno senso quelle proprietà,
per esempio
<p class=“red”>
<span class=“red”>
<ul class=“red”>
[email protected]
4
CSS: gli indentificatori
ATTENZIONE
Se uno stile si applica ad un solo specifico elemento della
pagina si usa la proprietà ID.
#rosso{color: #F00}
<div id=" rosso ">
Se invece si prevede di usarlo più volte, ovvero su più
elementi della pagina, si usa una classe.
.rosso{color: #FF0000;}
<p class=" rosso">
<div class=" rosso ">
[email protected]
5
CSS: le pseudo-classi
Le pseudoclassi distinguono gli oggetti in base ad
alcune delle loro proprietà intrinseche, dunque
non richiedono una marcatura o una notazione
particolare per essere specificate
test/pseudoclassi.html
[email protected]
6
CSS: le pseudo-classi
a.dams:link, a.dams:visited {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-weight: bold;
}
a.dams:hover {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-weight: bold;
text-decoration:none
}
Nell’html:
<a href=“http://www.dams.unito.it" class="dams">
Corso di studi in Dams
</a>
[email protected]
7
CSS: gli pseudo-elementi
Gli pseudo-elementi selezionano una sotto-parte di
un elemento, senza che sia necessario introdurre
un'apposita marcatura xhtml
test/pseudoelementi.html
[email protected]
8
CSS: i Selettori
•  Selettore universale: *
* {…}
Il selettore universale serve a selezionare tutti
gli elementi di un documento.
•  Selettore di discendenza
#pippo p {…}
Questa regola si applica a tutti i paragrafi
contenuti in body
[email protected]
9
CSS: i Selettori
•  Selettore figlio
body > p {…}
Questa regola si applica a tutti i paragrafi
direttamente contenuti in body (solo il primo
livello di discendenza)
NO!
[email protected]
10
CSS: i Selettori
•  Selettore fratello
h1 + p {…}
I due elementi si trovano, nell’html, uno di
seguito all’altro
<h1>Titolo</h1>
<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>
[email protected]
11
CSS: il Selettore d’attributi
a[accesskey] {…}
a[title~=esterno] {…}
<a href=“http://www.di.unito.it”
title=“link esterno” accesskey=“9”>
[email protected]
12
Fogli di stile CSS
Cascading Style Sheets 2
http://www.w3.org/TR/CSS21/
http://www.w3schools.com/css/css_syntax.asp
[email protected]
13
3 proprietà speciali di Css
Sono display, float e clear
Display: Avevamo chiarito in quella sede la fondamentale
distinzione tra elementi blocco, inline e lista che è alla base
di (X)HTML. Quello che si era detto può essere rimesso in
discussione da questa proprietà: la funzione di display è di
definire il trattamento e la presentazione di un elemento.
Float: con questa proprietà è possibile rimuovere un elemento
dal normale flusso del documento e spostarlo su uno dei lati
(destro o sinistro) del suo elemento contenitore. Il contenuto
che circonda l'elemento scorrerà intorno ad esso sul lato
opposto rispetto a quello indicato come valore di float (in
pratica ripete ciò che faceva align con le immagini in HTML)
Clear: questa proprietà serve a impedire che al fianco di un
elemento compaiano altri elementi con il float. Si applica solo
agli elementi blocco.
esempi
[email protected]
14
CSS: alcune cose sui blocchi flottanti
•  Un box flottante se non ha una width specifica assume la
dimensione necessaria a contenere gli elementi al suo interno
•  Il box flottante è estratto dal normale flusso, e sta a
sinistra o a destra
•  Gli elementi che contengono i box flottanti si comportano
come se fossero vuoti
•  Quando più box flottanti sono disposti uno di seguito
all’altro si dispongono sulla stessa linea. Se non c’è spazio,
vanno a capo
[email protected]
15
CSS: alcune cose sui blocchi flottanti
Gli elementi che contengono i box flottanti si
comportano come se fossero vuoti
[email protected]
16
CSS: alcune cose sui blocchi flottanti
Se si vogliono evidenziare questi
elementi contenitori vanno resi
anche essi flottanti
[email protected]
17
CSS: La proprietà visibility
•  Ammette i seguenti valori:
–  visible
–  hidden: non si vede ma è presente nel flusso della pagina
–  collapse: rimuove intere righe o colonne di una tabella, ma
non è supportato da tutti i browser
NB: display:none non si vede e non è presente nel
flusso della pagina
[email protected]
18
Css il: posizionamento
E' con queste regole che si può pensare di realizzare il layout
delle nostre pagine solo con i CSS e giungere così alla
definitiva e reale separazione tra presentazione e struttura!
Position è la proprietà fondamentale per la gestione della
posizione degli elementi, di cui determina la modalità di
presentazione sulla pagina. Si applica a tutti gli elementi
(static, absolute, fixed, relative).
[email protected]
19
Posizionamento: cosa dice il w3c
http://www.w3.org/TR/CSS2/visuren.html#comparison
Boxes in the normal flow belong to a formatting context,
which may be block or inline, but not both simultaneously.
Block boxes participate in a block formatting context.
Inline boxes participate in an inline formatting context.
[email protected]
20
Posizionamento: cosa dice il w3c
http://www.w3.org/TR/CSS2/visuren.html#comparison
static
The box is a normal box, laid out according to the
normal flow. The 'left' and 'top' properties do not apply.
static riguarda il comportamento normale del box,
anche quando non si specifica position: static
[email protected]
21
Posizionamento: cosa dice il w3c
http://www.w3.org/TR/CSS2/visuren.html#comparison
relative
The box's position is calculated according to the normal flow
(this is called the position in normal flow). Then the box is
offset relative to its normal position. When a box B is
relatively positioned, the position of the following box is
calculated as though B were not offset
Offset: scostamento dal box rispetto alla posizione originale
assunta dal box stesso
L’offset si assegna tramite le proprietà top, right bottom, left
[email protected]
22
Posizionamento relativo
[email protected]
23
CSS: La proprietà z-index
•  Quando i blocchi si sovrappongono, l’ordine di
sovrapposizione può essere determinato con la proprietà zindex
•  I blocchi con z-index maggiore comprono quelli minori:
z-index: 10 copre z-index: 8;
[email protected]
24
Posizionamento: cosa dice il w3c
http://www.w3.org/TR/CSS2/visuren.html#comparison
absolute
The box's position (and possibly size) is specified with the
'left', 'right', 'top', and 'bottom' properties. These
properties specify offsets with respect to the box's
containing block. Absolutely positioned boxes are taken out
of the normal flow. This means they have no impact on the
layout of later siblings. Also, though absolutely positioned
boxes have margins, they do not collapse with any other
margins.
Un blocco posizionato in modo assoluto può essere collocato
in qualunque punto della pagina, indipendentemente dagli
altri elementi
25
[email protected]
CSS: Il posizionamento assoluto
•  Il blocco posizionato in modo assoluto è estratto dal normale
flusso della pagina
•  La collocazione del blocco assoluto è stabilita con le distanze
top, right bottom, left
•  Il box di riferimento secondo cui calcolare le suddette
distanze è il primo blocco progenitore posizionato in modo
non statico (absolute o relative) oppure l’elemento HTML
•  Se la proprietà width del blocco assoluto non è impostata,
esso sarà grande tanto quanto i suoi contenuti
[email protected]
26
CSS: Il posizionamento assoluto e IE
•  Su IE è sempre bene impostare la larghezza e/o l’altezza
del blocco contenente il blocco con posizionamento assoluto
per evitare problemi di cattiva interpretazione del browser.
[email protected]
27
Posizionamento: cosa dice il w3c
http://www.w3.org/TR/CSS2/visuren.html#comparison
fixed
The box's position is calculated according to the 'absolute' model,
but in addition, the box is fixed with respect to some reference.
In the case of continuous media, the box is fixed with respect to
the viewport (and doesn't move when scrolled). In the case of
paged media, the box is fixed with respect to the page, even if
that page is seen through a viewport (in the case of a printpreview, for example). Authors may wish to specify 'fixed' in a
media-dependent way. For instance, an author may want a box to
remain at the top of the viewport on the screen, but not at the
top of each printed page. The two specifications may be
separated by using an @media rule, as in:
@media screen { H1#first { position: fixed } }
@media print { H1#first { position: static } }
Il posizionamento fisso è simile a quello assoluto, ma il riferimento
per il posizionamento è sempre quello della finestra del browser.
28
NON è supportato da IE
[email protected]
Css: dentro il box
overflow: visible; autorizza il contenuto ad espandersi oltre il
suo contenitore. E' il valore impostato di default.
overflow: hidden; Si vieta al contenuto di oltrepassare il suo
contenitore. In questo caso il contenuto quindi verrà
'tagliato'.
overflow: scroll; Anche se il contenuto non eccede il
contenitore, il contenitore avrà le barre di scorrimento.
overflow: auto; Se necessario, il contenitore avrà una o tutte e
due le barre di scorrimento.
[email protected]
29
Esempi: la centratura di un blocco
Esempio di centratura orizzontale con due colonne
CAP4/4.4.html, CAP4/4.5.html
Esempio di centratura verticale CAP4/4.1.html
[email protected]
30
Esempi: layout a due colonne
•  Esempio di layout a due colonne con intestazione e piè di
pagina verticale CAP4/4.7.html
•  Stesso esempio con i bordi CAP4/4.9.html
•  Layout a due colonne colonne liquide senza bordi
CAP4/4.16.html, e con bordi CAP4/4.20.html
[email protected]
31
Esempi di menu
•  Si trovano tutti nella cartella CAP5
Si consiglia la lettura del libro
CSS guida completa
Di Gianluca Troiani
Apogeo
[email protected]
32