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 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 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>

Il testo

Del testo è possibile controllare sia gli aspetti relativi al font che quelli relativi all'organizzazione del testo nella scatola di riferimento:

• font-family: il/i nomi del/dei font
• font-style (normal | italic | oblique), font-variant (normal | small-caps), font-weight (normal | bold | bolder | lighter | 100<-> 900), font-stretch (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded): caratteristiche del font
• text-indent, text-align (left | right | center | justify), line-height: indentazione, allineamento e interlinea delle righe della scatola
• text-decoration (none | underline | overline | line-through | blink), text-shadow: ulteriori stili applicabili al testo
• letter-spacing e word-spacing: spaziatura tra lettere e tra parole
• text-transform (capitalize | uppercase | lowercase | none): trasformazione della forma delle lettere
• white-space (normal | pre | nowrap): specifica la gestione dei ritorni a capo e del collassamento dei whitespace all'interno di un elemento

Valori di proprietà in CSS

Le proprietà CSS possono essere nomi o valori - I nomi sono tutte parole chiave CSS

• Per quanto riguarda i valori esistono diverse possibilità:
  • Alcuni di questi sono parole chiave come "display: none" in display o come solid in "border-style: solid"
  • Misure espresse come
    • Numeri interi: valori numerici assoluti
    • Valori numerici espressi in unità di misura
    • 0,5in (margin-top: 0.5in), 12pt (font-size: 12pt)
    • Percentuali espressi in relazione al contenitore padre
  • Altri valori possono essere URL come http://www.isti.cnr.it/immagini/carta.gif
  • (background-image: url(http://www.isti.cnr.it/immagini/carta.gif)
  • oppure colori RGB come #CC0033 (color: #CC0033)

• Esistono quattro tipi di valori di proprietà:
  1. length
  2. URL
  3. color
  4. keyword

Esempi: nomi di proprietà e valori

Nome	Valore
display	none
font-style	italic
margin-top	0.5in
font-size	12pt
border-style	solid
color	#CC0033
background-color	white
background-image	url(http://www.isti.cnr.it/immagini/sfondoblu.gif)
list-style-image	url(/immagini/pallinorosso.png)
line-height	120%

Unità di misura

• 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:
  1. Unità assolute   in (inches), cm, mm, pt (points), pc (pica)
  2. Unità relative bigger, +1
  3. Percentuali 50%

Unità di misura relative

• CSS mette a disposizione tre metodi per specificare le unità relative di misure
  1. em: la larghezza della lettera m del font corrente
  2. ex: l'altezza della lettera x del font corrente
  3. 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:

  p  { border-right-width: 1em; border-left-width: 1em;
       border-top-width: 0.5ex; border-bottom-width: 0.5ex; }

Unità di misura in percentuale

• 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

Una soluzione

Valori URL T

• 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 T

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 T

• 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 T

• 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) T

1. 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
2. Ordinare le dichiarazioni per peso esplicito: le dichiarazioni marcate '!important' pesano di più delle dichiarazioni non marcate (normali)
3. 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
4. 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
5. 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 T

• peso dichiarazione nell'attributo "style" = peso dichiarazione con selettore basato su id specificato alla fine del foglio di stile

  		<style type="text/css">
  		      #i39 { color: blue }
  		</style> 
  		<p id="i39" style="color: red"> 
  

• Nell'esempio il colore dell'elemento p sarà rosso
• 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
...

Esercizio

Collegarsi al sito http://jigsaw.w3.org/css-validator/ e validare lo stile di una pagina del proprio ente

Eliminare tutti gli elementi e gli attributi di presentazione della pagina e realizzare un foglio di stile

validare il foglio di stile (http://validator.w3.org)

Trasformare la pagina (con un editor testi) in XHTML1 1.1

Avvalersi di Tidy per correggere il codice

Commenti in CSS T

i fogli di stile CSS possono includere commenti..I commenti CSS sono come quelli del C /* */, .non<!-- --> come quelli di XML e HTML

/* commento */
cite { display:block; }

/* commento */
pre { display: block; font-size: 16pt; font-weight: bold; }
p { display: block; margin-bottom: 10; }

/* commento
Commento */
h1 { display: block; margin-bottom: 10; }
			

Colori T

Colore	RGB Decimale	RGB Esadecimale	Percentuale RGB
red	rgb(255,0,0)	#FF0000	rgb(100%, 0%, 0%)
blue	rgb(0,0,255)	#0000FF	rgb(0%, 0%, 0%)
green	rgb(0,255,0)	#00FF00	rgb(0%, 100%, 0%)
white	rgb(255,255,255)	#FFFFFF	rgb(100%, 100%, 100%)
black	rgb(0,0,0)	#000000	rgb(0%, 0%, 0%)
brown	rgb(153,102,51)	#996633	rgb(60%, 40%, 20%)
pink	rgb(255,204,204)	#FFCCCC	rgb(100%, 80%, 80%)
orange	rgb(255,204,204)	#FFCC00	rgb(100%, 80%, 80%)

p { color: black }
em { color: blue}

• 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 T

• 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 T

• 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 T

• 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) T

• La proprietà list-item mette a disposizione altre tre proprietà:
  1. list-style-type
  2. list-style-image
  3. list-style-position
• Tramite la proprietà list-style posso impostare le tre precedenti proprietà con una singola regola (forma abbreviata)

list-style-type T

• La proprietà list-style-type determina il tipo di carattere marcatore posto a sinistra del contenuto dell'elemento da visualizzare (bullet). I valori sono:
  1. disc
  2. circle
  3. square
  4. decimal
  5. ...
  6. none

li.i1 { display: list-item; list-style-type: none }
li.i2 { display: list-item; list-style-type: square }
      

list-style-image T

• E' possibile usare una immagine al posto del carattere marcatore (bullet)
• Impostanto la proprietà list-style-image con il valore dell' URL dell'immagine
• Nel caso si siano impostate entrambe le proprietà saranno visualizzati sia il bullet sia l'immagine

li.i1 { display: list-item; list-style-type: none; }
        li.i2 { display: list-item;
        list-style-image: url(pallinopiubellino.gif); 
        list-style-type: none; 
      }
      

Tabelle T

• table (In HTML: TABLE)
  • 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 T

• 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 T

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 T

• 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 T

• 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 T

• 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 T

• serif (con grazie) "Times New Roman" (Palatino, ...)
• sans-serif (senza grazie) "Verdana" (helvetica, ...)
• cursive (grafia a mano) "Shelley" (ZapfChancery, ...)
• fantasy (decorativo) "Comic Sans",
• monospace (spaziatura fissa) "Courier"

font-style T

• 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 T

• 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 T

• 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 T

• 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 T

• 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 T

• 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 T

• background-image
  • none (the default)
  • URI (indirizzo di una immagine)

  p { background-image: url(immagine.gif); }

background-repeat T

• 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 T

• 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 T

• 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 T

• 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 T

• 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 T

p	{ background-image: url(immagine.gif);
	  background-repeat: no-repeat;
	  background-position: center center; }