i file css esterni vengono trattati dal browser
come file separati, quindi il caricamento della
pagina è più veloce (non occorre
scaricare ogni volta il file css)
Tipi di Selettori
Semplici
I selettori possono specificare un elemento
Raggruppamenti
più elementi
Classi
elementi con uno specifico attributo class o id
Pseudo classi
elementi in uno specifico stato o posizione
Pseudo elementi
parte del contenuto di un elemento
Contestuali
elementi che appaiono in contesto relativo ad altri elementi
Selettore Semplice
Il selettore più comune è il nome di un elemento
La regola si applica a tutti gli HTML elements del tipo del selettore
Esempio: h1
h1 { text-align: center;}
Raggruppamento di Selettori
Se abbiamo regole identiche che si applicano ad elementi diversi
Nel caso di id la regola si applica all'unico elemento nel documento il cui attributo coincide con la stringa che segue il simbolo #
Pseudo Classi
Per elementi la cui rappresentazione può variare a seguito dell'interazione dell'utente con la pagina
a:link non visitato, link non attivo
a:hover mouse sopra
a:active attivato (cliccato col mouse o attivato con altro dispositivo)
a:visited visitato
:focus "l'oggetto a fuoco" (l'oggetto selezionato)
:first-child il primo figlio dell'elemento
:left le pagine a sinistra di un documento (generalmente per la stampa)
:right le pagine a destra
Pseudo Elementi
La prima lettera di un paragrafo
p:first-letter { font-size: 300%; }
La prima linea di un paragrafo
p:first-line { font-variant: small-caps; }
before, after: si applica prima / dopo il contenuto dell'elemento.
Selettori Contestuali
Se la formattazione dipende dalla posizione all'interno di altri elementi (per esempio se dipende dall'elemento padre) è possibile scrivere regole che si applicano agli elementi contenuti all'interno di altri specifici elementi
Anteporre il nome dell'elemento avo (e padre) a quello dell'elemento al quale vogliamo applicare la proprietà di stile specifica.
p cite { color: red; }<p>paragrafo con <cite>citazione</cite> interna</p>
Risultato:
paragrafo con citazione interna
Altri selettori
Selettore universale (*):
*: La regola si applica a tutti gli elementi nel documento
Selettori contestuali (A D P>F F + PF):
Basati sugli elementi figli, fratelli, genitori
Avo Discendente D discendente di A
Padre>Figlio F figlio di P
Fratello+PrimoFratello PF primo fratello di F
H2+P { color: red; }
Selettori di attributi (E[attr] E[attr="valore"]):
E[attr] elementi E che hanno un attributo attr
E[attr="valore"] elementi E che hanno un attributo attr il cui valore è "valore"
A[NAME] { color: green; }
Modello di formattazione
CSS definisce un modello di visualizzazione bidimensionale
Gli elementi da visualizzare sono inseriti in rettangoli immaginari detti scatole (box)
Box
Le scatole hanno delle proprietà che permettono di definire
altezza, larghezza, dimensione e posizione
aree relative a margini, cuscinetti (margini interni - padding), bordi (trasparenti per default)
La larghezza della scatola è data dalla somma della larghezza del contenuto (ovvero dell'elemento testo o immagine) + quella delle aree dei padding, bordi e margini.
Box
Margini: la regione che separa una scatola dall'altra, necessariamente trasparente
margin-top, margin-bottom, margin-left, margin-right: dimensioni del margine della scatola
Border: la regione ove visualizzare un bordo per la scatola (trasparente per default)
border-top, border-bottom, border-left, border-right, border-width, border-color: dimensioni ed aspetto del bordo
border-style: può assumere come valori none, dotted, dashed, solid, double, groove (incavo), ridge (rilievo), inset, outset
Padding: la regione di respiro tra il bordo della scatola ed il contenuto - Ha il colore dello sfondo
padding-top, padding-bottom, padding-left, padding-right: dimensioni del padding della scatola
Content: la regione dove sta il contenuto dell'elemento
background-color, background-image, background-repeat, background-attachment, background-position: colore, immagine e meccanismo di ripetizione dell'immagine di sfondo della scatola
Tipi di elementi
Elementi "Block"; (blocco) sono elementi che sono mostrati in un blocco per conto proprio
p (paragrafo), div (blocco generico), pre (blocco preformattato), address (autore della pagina), blockquote (citazione lunga)
possono essere inclusi solo da altri elementi blocco.
Elementi "Inline" sono elementi che non provocano un a capo e possono essere inclusi da qualsiasi altro elemento
a (ancora, collegamento), em (enfasi), strong (maggiore enfasi) span (generico elemento inline), dfn (definizione), code (frammento di programma), samp (output d'esempio), kdb (testo inserito dall'utente), var (variabile di programma), cite (breve citazione), q (citazione lunga), abbr, acronim (abbreviazioni ed acronimi), sup, sub (testo in apice e in pedice), bdo (bidirectional override)
Elementi "List-item" sono elementi con un marcatore (punto elenco, numero)
Posizionamento
Come si inseriscono le scatole nello spazio di visualizzazione:
Flusso normale di tipo blocco: una sopra l'altra in successione verticale (come paragrafi)
Flusso normale di tipo inline: una accanto all'altra in successione orizzontale (come parole della stessa riga)
Flusso di tipo float: all'interno del contenitore e poi spostate all'estrema sinistra o destra della scatola, lasciando che le altre scatole vi girino intorno
Posizionamento assoluto: nella posizione indicata indipendentemente dal flusso e da quel che la zona già visualizza (eventualmente nascondendo ciò che sta sotto)
Modello visuale di CSS
proprietà che controllano il tipo di posizionamento e quello di scatola:
display (inline | block | list-item | ... | none): il tipo di scatola da utilizzare per l'elemento: blocco, inline, lista, cella di tabella, ...
position (static | relative | absolute | fixed): il posizionamento rispetto al flusso del documento
float (left | right | none): un float è una scatola scivolata all'estrema destra o sinistra del contenitore muovendo le altre per farle posto
z-index: la posizione nello stack di scatole potenzialmente sovrapposte. Il valore più alto è più vicino al lettore, e quindi nasconde gli altri - default background delle scatole = trasparente
top, bottom, left, right: coordinate della scatola
width, height: dimensioni usabili invece di right e bottom
Un esempio di posizionamento
un blocco allineato a destra
un blocco allineato a sinistra
un paragrafo che si estende su alcune righeper mostrare come sono posizionati vari elementi all'interno della pagina XHTML
ancora un paragrafo con elementi inline grassetto e italic
div in posizione assoluta
Un esempio di posizionamento
<div> <div style="display:block; float:right;background:#ffeeee;border-style: solid; border-width: 1px;">un blocco <br/> allineato<br/> a destra</div> <div style="display:block; float:left;background:#ffeeee;border-style: solid; border-width: 1px;">un blocco <br/> allineato a sinistra </div>
<p style="display:block; border-style: solid; border-width: 1px;">un paragrafo che si estende su alcune <span style="display:inline; border-style: solid; border-width: 1px; font-size: 200%;">righe</span>per mostrare come sono posizionati vari elementi all'interno della pagina XHTML</p> <p style="display:block; border-style: solid; border-width: 1px;">ancora un paragrafo con elementi inline <span style="display:inline; font-weight:bold; border-style: solid; border-width: 1px;">grassetto</span> e <span style="display:inline; font-style:italic; border-style: solid; border-width: 1px;">italic</span> <div style="display:block; position:absolute; top:180px; left: 280px; width: 150px; background:#eeeeff;border-style: solid; border-width: 1px;">div in posizione assoluta</div>
</p>
</div>
<div> e <span>
<div> (division) è
un elemento block-level
<span> (span of words)
è un elemento inline
molto utili se usati con l'attributo
class
permettono, in pratica, di creare nuovi HTML
element
<div class="nomeclasse">
<p>
In una div possono comparire elementi inline, e anche
<span class="specificaSpan"> parole che assumono le caratteristiche</span>
assegnate alla classe "specificaSpan".<br />
La div può avere caratteristiche di visualizzazione particolari.
</p>
</div>
html5 introduce delle specializzazioni di div: nav, footer, ... sono elementi strutturali che potranno essere usati per specificare parti strutturali della pagina
Il testo
Del testo è possibile controllare sia gli aspetti relativi al font che quelli relativi all'organizzazione del testo nella scatola di riferimento:
Usate per definire la larghezza, altezza, dimensione di parole e lettere, spazi, indentazione di testo, altezza di lineem margini, padding, larghezze di bordi, ...
Le misure possono essere specificate in tre modi:
Unità assolute in (inches), cm, mm, pt (points), pc (pica)
Unità relative bigger, +1
Percentuali 50%
Unità di misura relative
CSS mette a disposizione tre metodi per specificare le unità relative di misure
em: la larghezza della lettera m del font corrente
ex: l'altezza della lettera x del font corrente
px: la grandezza di un pixel
In questo esempio lo spessore dei bordi destro e sinistro dell'elemento p corrisponderanno alla larghezza della lettera m del font corrente,
i bordi superiore e inferiore alla metà dell'altezza della lettera x del font corrente:
E' sconsigliato usare la misura di lunghezza in pixel per vari motivi:
La grandezza dei pixel varia con la risoluzione
Con il passare del tempo i monitor incrementano la densità di punti
Con l'aumentare della risoluzione la specifica del pixel può rendere illeggibile il testo
Le misure possono essere specificate in percentuale rispetto al valore della grandezza dell'elemento padre
p:first-letter { font-size: 300%; }
em { font-size: 120%; }
Esercizio
Realizzare una pagina XHTML 1.1 con tre blocchi di testo
senza tabelle (a meno che non contengano dati e siano all'interno di un blocco)
senza posizionamenti assoluti
Tre proprietà CSS possono avere valori URL: background-image, list-styleimage, list-style
Anche regola @import usa un valore URL
Letterali URL inseriti dentro url()
Permesse tutte le forme relative e assolute di URL body { background-image: url (http://www.isti.cnr.it/sfondo.gif) }
table { background-image: url(/immagini/img1.gif) }
tr { background-image: url(../immagini/img2.gif)}
td { background-image: url(immagine.gif)}
Le URL si possono includere tra apici singoli o doppi body { background-image: url ("http://www.isti.cnr.it/sfondo.gif") }
table { background-image: url("/immagini/img1.gif") }
tr { background-image: url('../immagini/img2.gif')}
td { background-image: url('immagine.gif')}
Escape
Parentesi, virgole, spazi, apici singoli (') e doppi (") .negli URI devono essere precedute da un carattere backslash:
'\(', '\)', '\,' (escaped)
oppure sostituite dall'entità corrispondente:
spazio
%20
,
%2C
'
%27
"
%22
(
%2B
)
%2C
Valori di Color
E' possibile assegnare colori agli elementi (quasi tutti) della pagina con la proprietà color
Il valore di color può corrispondere a
una parola chiave, CSS definisce 16 nomi di colore:
olive
purple
red
silver
teal
white
yellow
aqua
black
blue
fuchsia
gray
green
maroon
navy
una tripla RGB come valore decimale, esadecimale o in percentuale
Forme abbreviate
In molti casi è possibile riassumere in un'unica proprietà i valori di molte proprietà logicamente connesse
Si usa una sequenza separata da spazi di valori, secondo un ordine prestabilito. Se si mette un valore solo esso viene assunto da tutte le proprietà individuali. Ad esempio:
margin per margin-top, margin-left, margin-bottom, margin-right
border per border-top, border-left, border-bottom, border-right
padding per padding-top, padding-left, padding-bottom, padding-right
font per font-style, font-variant, font-weight, font-size, line-height, . font-family
p { font: bold italic large Palatino, serif }
body { margin: 1em 2em 3em 4em; }
body { margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 4em;
}
body { padding: 2em; }
body { padding-top: 2em;
padding-right: 2em;
padding-bottom: 2em;
padding-left: 2em;
}
Ereditarietà
Con CSS non è necessario specificare le proprietà di ogni elemento
Ove non presenti regole specifiche, ogni elemento erediterà lo stile dell'elemento padre
Con questa regola
h1 { color: red; }
e questa parte di codice xhtml
<h1>Un <em>titolo</em><h1>
"titolo" sarà rosso e corsivo (corsivo perchè em per definizione viene cosi rappresentato ma potrebbe non essere così)
Ma se specificata anche la seguente regola
em { color: green; font-style: normal; }
Allora questa sostituirà lo stile ereditato da <h1>
e "titolo" sarà di colore verde, non rosso, e non corsivo ma normale
Valori ereditati
Se non specificata una proprietà, CSS assume un valore di default
A parte pochi casi, questo è sempre ereditato, ovvero la proprietà assume lo stesso valore che ha nella scatola contenitore dell'elemento in questione
Tra i valori non ereditati:
display (per HTML è sempre il valore naturale dell'elemento, block per p o h1, inline per strong, em o a, mentre per XML è inline)
background (sempre transparent)
La dichiarazione !important
CSS permette sia agli autori che agli utenti di esprimere preferenze sulle regole di presentazione
Le regole degli autori sostituiscono le regole dei lettori a meno che il lettore non usi una dichiarazione !important. Per esempio la seguente regola diche che l'elemento p deve essere colorato di blu anche se l'autore del documento ha richiesto che sia in un colore differente
Daltra parte font-family deve essere serif solo se l'autore non ha detto diversamente
p { color: blue !important; font-family: serif;}
Se però la regola dell'autore è stata dichiarata !important con CSS1 vinceva la regola dell'autore. Con CSS2 è cambiato e vince la regola del lettore
E' possibile definire regole multiple per gli stessi elementi, e adottare un meccanismo a cascata per la loro applicazione:
User Agent: il browser definisce (o esplicitamente o implicitamente codificandole nel software) le regole di default per gli elementi dei documenti
User: l'utente può fornire un ulteriore foglio di stile per indicare regole di proprio piacimento. Tipicamente è una funzione del browser
Author: l'autore delle pagine fornisce, nei modi visti in precedenza, i fogli di stile del documento specifico
Regole !important : Quando una regola utente (tipicamente) è seguita dalla keyword !important, essa sopravanza una analoga regola di senso diverso dell'autore
Ordine della cascata
In generale le regole più specifiche vincono. Esempio:
<p> bla bla
<cite id="id1" class="particolare">
bla bla bla
</cite>
</p>
Le regole più specifiche sono preferite. Pertanto quella che seleziona l'elemento cite per il suo id sarà preferita a quella che seleziona cite per il suo class
Una regola che seleziona cite per il suo class sarà preferita a quella che seleziona cite contenuto negli elementi p
Infine, se nessuna di queste regole è applicata, sarà selezionata una regola generica cite
Se non c'è un selettore che si appaia, viene ereditata la proprietà dall'elemento padre
Se non c'è nessun valore ereditato dal padre viene usato il valore di default
A parità di specificità si applica l'ultima in ordine di apparizione
Il foglio di stile esterno arriva dopo in ordine e quindi vince
Ordine della cascata (3.2 Raccomandazione)
Cercare tutte le dichiarazioni che si applicano all'elemento/proprietà in questione. Le dichiarazioni si applicano se il selettore si abbina con l'elemento in questione. Se non si applicano dichiarazioni, viene usato il valore ereditato. Se non viene ereditato il valore (questo è il caso per l'elemento "html"e per le proprietà che non eredita), viene usato il valore iniziale
Ordinare le dichiarazioni per peso esplicito: le dichiarazioni marcate '!important' pesano di più delle dichiarazioni non marcate (normali)
Ordinare per origine: i fogli di stile dell'autore superano quelli del lettore che superano i valori di default dello UA (user agent). Un foglio di stile importato ha la stessa origine del foglio di stile da cui è importato
Ordinare per specificità del selettore: selettori più specifici supereranno regole più generali. Per cercare la specificità, contare il numero di attributi ID nel selettore (a), il numero degli attributi CLASS nel selettore (b), e il numero di nomi di tag nel selettore (c). La concatenazione dei tre numeri (in un sistema numerico con base larga) da la specificità. Esempi :
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */
Pseudo-elementi e pseudo-classi sono contate come normali elementi e classi rispettivamente
Ordinare per l'ordine specificato: se due regole hanno lo stesso peso quella specificata per ultima vince. Le regole negli style sheet importati sono considerate prima di quelle nello stesso foglio di stile
Ordine della cascata
peso dichiarazione nell'attributo "style" = peso dichiarazione con selettore basato su id specificato alla fine del foglio di stile
Sebbene la specificità è la stessa per entrambe le dichiarazioni, la dichiarazione nell'attributo "stile" supera quella dell'elemento 'style' per la regola 5
Liste e sottoliste numerate (CSS2)
ul, ol { counter-reset: item }
li { display: block; }
li:before { content: counters(item, "."); counter-increment: item }
numera liste e sottoliste nel formato
1 1.1 1.1.1 ...
La proprietà color è ereditata dagli elementi figli
Nell'esempio tutti gli elementi figli di p saranno di colore nero, ad eccezione di em
Keyword - Parole chiave
Esistono parole chiave che si applicano a proprietà diverse ma non è sempre cosi:
le parole chiave definite in CSS possono variare a seconda della proprietà a cui si applicano.
Esempio:
il valore di border-left-style può essere una parola chiave come . none, dotted, dashed, solid, double, groove, ridge, inset, outset.
valore che può essere associato anche alle proprietà
border-right-style, border-top-style, . border-bottom-style, e border-style
Elementi Block, Inline e List Item
Gli elementi in CSS 1 sono divisi in quattro tipi:
Il tipo di un elemento viene stabilito dalla proprietà display
Questa proprietà può assumere quattro valori:
block
inline
list-item
none (invisible)
CSS2 ha aggiunto altri tipi
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
...
none
In CSS1, il valore di default è block, ovvero l'elemento stà in una scatola separata dalle altre.
In in CSS 2 il valore di default è cambiato a inline il che significa che il contenuto dell'elemento è inserito sequenzialmente nel flusso subito dopo l'elemento che lo precede.
Molti browser usano CSS 2 per default (inline)
Elementi Block, Inline e List Item
In HTML, em, strong, b, i, e a sono elementi inline em, strong, b, i nella riga sopra sono elementi inline, non sono separati dal resto del testo
In generale, gli elementi block-level elements sono separati dagli altri elementi da un a capo
In HTML p, blockquore, h1..h6 sono tutti esempi di elementi block-level
Gli elementi list-item sono elementi block-level con un marcatore che li precede
In HTML, li è un elemento list-item
Elementi con proprietà display impostata a none sono invisibili e non mostrati sullo schermo. Non influiscono sulla posizione degli altri elementi visibili sullo schermo
In HTML, title, meta, e head dovrebbero avere una proprietà display = none
In XML, display: none è spesso usata per le meta informazioni
List Items (LI)
La proprietà list-item mette a disposizione altre tre proprietà:
list-style-type
list-style-image
list-style-position
Tramite la proprietà list-style posso impostare le tre precedenti proprietà con una singola regola (forma abbreviata)
list-style-type
La proprietà list-style-type determina il tipo di carattere marcatore posto a sinistra del contenuto dell'elemento da visualizzare (bullet). I valori sono:
Un elemento che definisce una tabella (block-level)
inline-table (TABLE)
Un elemento che definisce una tabella inline
table-row (TR)
un elemento che descrive una riga di celle
table-row-group (TBODY)
un elemento che raggruppa 1 o + righe
table-header-group (THEAD)
Come table-row-group, ma per la visualizzazione il gruppo è mostrato prima di tutte le altre righe e gruppi di righe e dopo top caption
table-footer-group (TFOOT)
Come table-row-group, ma per la visualizzazione il gruppo è mostrato dopo di tutte le altre righe e gruppi di righe e prima di bottom caption
table-column (COL)
un elemento che descrive una colonna di celle
table-column-group (COLGROUP)
Specifica che un elemento raggruppa una o + colonne
table-cell (TD, TH)
un elemento che trappresenta una cella
table-caption (CAPTION)
specifica una legenda (intestazione o didascalia) per la tabella
Il foglio di stile di default per le tabelle
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
Tabelle: selettori di colonna
Proprietà che si applicano a colonne e gruppi di colonne
border
Le varie proprietà dei bordi si applicano alle colonne solo se la proprietà 'border-collapse' nell'elemento table è impostata a 'collapse'
background
Imposta lo sfondo per le celle nella colonna, ma sono se le celle e la colonna hanno sfondo trasparente
width
Larghezza minima della colonna
visibility
Se impostata con valore 'collapse', nessuna cella nella colonna verrà visualizzata. Inoltre la larghezza della tabella diminuisce di un valore pari alla larghezza di questa colonna. Altri valori non hanno effetto
whitespace
La proprietà whitespace determina la significatività degli dei caratteri spazio, tabulazione, a capo
I possibili valori sono
normal
pre
nowrap
Il valore di default, normal, significa che più spazi sono condensati in uno solo
Il valore pre funziona come l'elemento pre (preformattato) in HTML
Tutti gli spazi sono considerati significativi e riprodotti fedelmente
(sarebbe bene usare in combinazione con un fonto monospace)
Il valore nowrap considera significativi gli a capo ma condensa gli altri caratteri in un unico spazio
p { display: block; white-space: pre; font-family: monospace; }
font
proprietà di base per specificare i font:
font-family
font-style
font-variant
font-weight
font-size
Un solo attributo "font" permette di impostare tutte le proprietà (forma abbreviata)
font-family
font-family: elenco di tipi di carattere o di famiglie di tipi di carattere separati da virgola
tipo di carattere: un particolare tipo. Helvetica, Tahoma, "Times New Roman"
(nomi di font che contengono spazi tra doppi apici)
famiglie di tipi di carattere:
serif, sans-serif, cursive, fantasy, monospace
il browser per ogni famiglia ha un elemenco di nomi di font corrispondenti utilizzerà il font installato nel computer locale
Tipo di carattere (se non trova il primo usa il secondo, ...)
body { font-family: "Times New Roman", Courier, Tahoma }
Famiglia (se non trova la prima usa la seconda, ...)
body { font-family: serif, fantasy }
Tipo o famiglia (se non trova 1o usa 2o, ...)
body { font-family: serif, Helvetica, fantasy }
Famiglie di tipi di carattere
serif (con grazie) "Times New Roman" (Palatino, ...)
cursive (grafia a mano) "Shelley" (ZapfChancery, ...)
fantasy (decorativo) "Comic Sans",
monospace (spaziatura fissa) "Courier"
font-style
Tre possibili valori:
normal (detto anche Roman)
italic italico
oblique simile ad italic ma generato dal computer inclinando il font attraverso un algoritmo
Questa regola imposta il font-style italic per l'elemento cite
cite { font-style: italic;}
font-variant
Due possibili valori:
normal normale
small-caps maiuscoletto
Se non esiste una versione di maiuscoletto riduce le lettere maiuscole alla dimensione delle lettere minuscole
esempio la seconda parola usa lo stile font-variant:small-caps
Prova Prova
font-weight
Spessore del carattere (definisce quanto deve tendere al "bold" o al "light")
normal
bold
100
200
300
400
500
600
700
800
900
Esistono anche
bolder
lighter
Si riferiscono allo spessore dell'elemento genitore (più spesso, più leggero)
Esempio
h1, h2 { font-weight: bold}
font-size
Determina l'altezza e la larghezza di un carattere tipico del font
Può essere specificata come parola chiave, come valore assoluto, come valore relativo o come percentuale rispetto al carattere dell'elemento padre
Parole chiave (valore assoluto)
xx-small
x-small
small
medium
large
x-large
xx-large
Si preferisce usare le parole chiave piuttosto che impostare un valore assoluto perch&eagrave; in questo modo sono relative al font di base della pagina. (Posso impostare un font di base della pagina e tutti gli altri saranno di dimensioni relative a questo, l'utente può scalare i font sulla base delle proprie esigenze in modo sicuro)
Valori relativi (rispetto alla grandezza del font dell'elemento padre) b { font-size: larger } (b sostituito da strong in xhtml2) (smaller, larger,)
b avrà un valore di font-size più grande dell'elemento padre
font-size
Percentuale dell'elemento padre
Il fonto usato per l'elemento b è di dimensione pari al 150% dell'elemento padre
b { font-size: 150% }
Valore assoluto di misura
Oltre ad usare pixel, centimetri e pollici, l'unità più comune è il punto
il valore di font-size per l'elemento p (e per i figli che ereditano) è di 14 punti.
p { font-size: 14pt }
E' consigliabile non usare unita di misura assoluta per impostare la dimensione dei font
La dimensione varia tra le diverse piattaforme e risoluzioni utilizzabili
Inoltre se l'utente volesse aumentare o diminuire la dimensione lo può fare solo se tutte le misure sono in proporzione ad un valore di base
Esercizio
Realizzare una pagina XHTML 1.1 con un form impaginato senza tabelle
Una soluzione utilizzate con varie tecniche WCAG 2.0
background
Lo sfondo di un elemento (background) può essere impostato con un colore o con una immagine
Nel caso di una immagine questa può essere posizionata in modi differenti relativamente al contenuto dell'elemento
Esistono queste proprietà di base
background-color
background-image
background-repeat
background-attachment
background-position
La proprietà background permette di impostare tutti i valori in una unica regola
background-image
background-image
none (the default)
URI (indirizzo di una immagine)
p { background-image: url(immagine.gif); }
background-repeat
Indica come sono sistemate le immagine sullo schermo
Valori possibili:
repeat
repeat-x
repeat-y
no-repeat
Mostrare una sola immagine foto.gif come sfondo dell'elemento p impostando background-repeat a no-repeat
p { background-image: url(foto.gif);
background-repeat: no-repeat; }
repeat-x ripete l'immagine lungo l'asse x
p { background-image: url(foto.gif);
background-repeat: repeat-x; }
background-attachment
Generalmente l'immagine sullo sfondo è attaccata al documento
Quando si scorre il documento l'immagine scorre con questo
Con la proprietà background-attachment è possibile specificare se lo sfondo deve scorrere con il testo o deve rimanere fisso
Con background-attachment impostato a fixed, il documento scorre ma l'immagine rimane fissa
body { background-attachment: fixed;
background-repeat: no-repeat; }
background-position
L'angolo in alto a sinistra dello sfondo è allineato per default allo stesso angolo dell'elemento a cui è associato
E' possibile allinearlo in modo differente specificando
la percentuale della larghezza e dell'altezza dell'elemento padre
la misura in valore assoluto
Usando una delle seguenti parole chiave:
top
center
bottom
left
center
right
Altezza e larghezza in percentuale rispetto all'elemento padre
La coordinata x è data in percentuale da 0% (lato sinistro) a 100% (destra)
La coordinata y è data in percentuale da 0% (alto) a 100% (basso)
Nel seguente esempio l'angolo in alto a destra dell'immagine è allineato con l'angolo in alto a destra dell'elemento p
p { background-image: url(foto.gif);
background-repeat: no-repeat;
background-position: 100% 0% }
Unità di misura assolute
La posizione assoluta 0, 0 corrisponde all'angolo in alto a sinistra (origine)
La regola che segue pone l'immagine di background immagine.gif due centimetro a destra e .un centimetro in basso rispetto all'origine dell'elemento
p { background-image: url(immagine.gif);
background-repeat: no-repeat;
background-position: 2cm 1cm; }
Parole chiave - keywords
top left, left top = 0% 0%
top, top center, center top = 50% 0%
right top, top right = 100% 0%
left, left center, center left = 0% 50%
center, center center = 50% 50%
right, right center, center right = 100% 50%
bottom left, left bottom = 0% 100%
bottom, bottom center, center bottom = 50% 100%
bottom right, right bottom = 100% 100%
background-position
p { background-image: url(immagine.gif);
background-repeat: no-repeat;
background-position: center center; }
background - forma abbreviata
Per impostare tutte le proprietà dello sfondo (background-color, background-image, background-repeat, background-attachment, background-position ) con una unica regola posso usare la proprietà background properties in a single rule
Impostiamo per esempio l'elemento p con .background-color = bianco, background-image = foto.gid, .backgroundrepeat = no-repeat, background-attachment = fixed
p { background: url(foto.gif) white no-repeat fixed }
Questo corrisponde ad aver impostato tutte le proprietà distintamente
Il valore delle proprietà della forma abbreviata background può essere in
qualsiasi ordine (basta non ripetere i valori)
Overflow (CSS2)
Quando la dimensione di una scatola è definita specificando in modo preciso usando le proprietà width e height, è possibile che il contenuto possa prendere più spazio di quanto ne abbia a disposizione la scatola
overflow specifica come trattare l'eventuale uscita dai margini con questi valori:
auto
hidden
scroll
visible
auto: se necessario vengono aggiunte delle barre di scorrimento
hidden: il contenuto in eccesso viene troncato
scroll: vengono aggiunte barre di scorrimento a priori
visible: viene mostrato l'intero contenuto e se necessario viene modificato il limite delle dimensioni specificate per la scatola
p { overflow: scroll }
Clip (CSS2)
clip specifica la porzione del contenuto dell'oggetto che deve essere visualizzata dallo user agent
Questa regione in genere coincide con i bordi esterni della scatola dell'elemento ma questa regione può essere modificata
Questa proprietà si applica solo agli elementi che hanno un attributo overflow impostato con un valore diverso da visible
In CSS2 è possibile ritagliare regioni rettangolari
Impostando la proprietà clip a rect(top, bottom, left, right)
dove top, bottom, left, right sono gli offset di ciascun lato
Se l'oggetto ritagliato eccede ancora l'area visibile della finestra del browser viene ulteriormente ritagliato per poter adattarsi nella finestra
p { clip: rect(5px, 5px, 5px, 5px);
overflow: auto }
Visibility (CSS2)
La proprietà visibility specifica se il contenuto di un elemento deve essere visualizzato o meno.
I valori possono essere:
visible: il contenuto dell'elemento inclusi i bordi viene Visualizzato
hidden: il contenuto dell'elemento inclusi i bordi non viene visualizzato. Queste scatole mantengono lo spazio pur non venendo visualizzate. Pertanto hidden non corrisponde a display: none
collapse: identico a hidden per tutti gli oggetti esclusi table, row e column le cui scatole non occuperanno spazio (come con display: none).
inherit: il valore viene ereditato dall'elemento padre
Regole @
@page: applica lo stile alle pagine (:first, :left, or :right)
@import: importa un foglio di stile esterno
@media: applica lo stile ad un tipo di media
all, aural, braille, embossed (pagina braille in rilievo), handheld (PDA ,palmari, e-agenda ...), print, projection, screen, tty (terminali), tv
@font-face: descrive un font usato nel foglio di stile
@charset: definisce un set di caratteri
Esempio: specifica di regole diverse a seconda del media:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
Proprietà aurali
pronunciate da un sintetizzatore vocale con l'aiuto di "icone uditive"
convertire il documento in testo e leggere semplicemente le parole non ottiene gli effetti desiderati. E' allora possibile utilizzare le proprietà aurali di CSS, che identificano direzione dei suoni, organizzazione temporale dei suoni, e variazioni nel parlato sintetizzato (voce, frequenza, velocità inflessione, ecc.).
è possibile selezionare su quali particolari
elementi?
Come individuare gli elementi su cui agisce il css
tutti gli elementi di un certo tipo
tutti gli elementi di un certo tipo assegnati ad uno
stesso gruppo o classe
tutti gli elementi di un certo tipo contenuti in
altri elementi di un certo tipo
tutti gli elementi di un certo tipo contenuti
in altri elementi di un certo tipo e assegnati
ad uno stesso gruppo o classe
tutti gli elementi di un certo tipo solo quando
compaiono immediatamente dopo elementi di
qualche altro tipo
solo uno specifico elemento di un determinato tipo al
quale viene assegnato un ID univoco
Le regole di ereditarietà
Ogni elemento appartiene al document inheritance
tree
l' elemento radice è sempre l' elemento
html
i suoi discendenti diretti sono head e
body
molte proprietà (es. font-family)
prendono il valore specificato per l' elemento padre
Esempio di inheritance tree:
Le regole di ereditarietà (2)
se due regole sono in conflitto, prevale quella
più specifica (per es. prevale la
regola su h1 rispetto a quella su
body
alcune proprietà non rispettano la regola di
ereditarietà (es. background)
Alcune buone prassi
(rif. cap. 3 Wium Lee & Boss)
Usare le unità em per creare style
sheet scalabili
Usare sempre le unità em per
impostare il font-size
Usare unità relative per le lunghezze
Usare unità assolute di lunghezza solo quando
sono note le caratteristiche fisiche del dispositivo di
output
Usare elementi floating invece delle tabelle
Disporre il contenuto in ordine logico
Assicurarsi che il documento sia leggibile anche senza
style sheets
Testare il documento con diversi browser
Specificare sempre un font generico come alternativa
Fermarsi in tempo (evitare troppi effetti sulla stessa
pagina)
I selettori (quadro sinottico)
Tipo
Significato (la regola si applica a ...)
Esempio
selettore universale
tutti gli elementi nel documento
*
element type
tutti gli HTML elements del tipo del selettore
h1
p
class selector
tutti gli elementi HTML che precedono il punto (o
tutti, se non è specificato nulla) la cui
definizione li rende elementi della classe il cui
nome segue il punto
.articletitle h1.important
ID selector
l' unico elemento nel documento il cui attributo
coincide con la stringa che segue il simbolo #
#special3
p#special52
pseudo-element selector (CSS2)
le istanze dello pseudo-element
p:first-letter
p:first-line
h1:first-child
pseudo-class selector (CSS2)
istanze della pseudo-classs, la cui presentazione
può variare a seguito dell' interazione dell'
utente con la pagina
tutti gli elementi del tipo più a destra di
una lista (separata da spazi), solo quando l' element
type discende dal tipo alla sua sinistra
p em
p.wide em
parent-child selector (CSS2)
tutti gli elementi del tipo specificato a destra del
simbolo ">", che sono figli degli elementi a
sinistra del simbolo ">" (è una forma
più specifica del descendant selector)
body > p
adjacent selectors (CSS2)
tutti gli elementi del tipo specificato a destra del
segno "+", adiacenti (nel codice HTML) agli elementi
a sinistra del segno "+"
h1+h2
p+h3
attribute selectors (CSS2)
attributi che corrispondono al profilo specificato
nelle parentesi quadre
La regola si applica a: tutti gli elementi HTML che precedono il punto (o tutti, se non è specificato nulla) la cui
definizione li rende elementi della classe il cui nome segue il punto
La regola si applica a: istanze della pseudo-classe, la cui presentazione
può variare a seguito dell'interazione dell'utente con la pagina
(è una proprietà CSS2)
La regola si applica a: tutti gli elementi del tipo più a destra di
una lista (separata da spazi), solo quando l'element type discende dal tipo alla sua sinistra
La regola si applica a: tutti gli elementi del tipo specificato a destra del
simbolo ">", che sono figli degli elementi a sinistra
del simbolo ">" (è una forma più
specifica del descendant selector)
(è una proprietà CSS2)
La regola si applica a: tutti gli elementi del tipo specificato a destra del
segno "+", adiacenti (nel codice HTML) agli elementi a
sinistra del segno "+"
(è una proprietà CSS2)
vi sono poi altri standard grafici come SVG, Webgl e il nuovo elemento canvas di HTML5
Per rendersi conto degli effetti grafici possibili (notizia del 6/4/2010): porting di DOOM2 in HTML5
Inoltre: alcuni cenni di CSS3
molte sono le nuove funzionalità che aggiunge CSS3, alcuni esempi di effetti che in genere troviamo in programmi di grafica professionali (provati solo con firefox 3.5):
testo ombreggiato
angoli arrotondati, box ruotato stirato e ombreggiato, effetto 3d sfumato
riflessi
...
CSS3, non solo nuovi effetti
CSS3 non aggiunge solo nuovi effetti, estende in molti punti i precedenti livelli di CSS, ad esempio troviamo nuovi selettori
selettore[attributo^="valore"]
elementi specificati da "selettore" con un attributo "attributo" che inizia con la stringa "valore"
selettore[attributo*="valore"]
elementi specificati da "selettore" con un attributo "attributo" contenente la stringa "valore"
selettore[atttributo$="valore"]
elementi specificati da "selettore" con un attributo "attributo" che termina con la stringa "valore"
