Introduzione ai css

INTRODUZIONE AI CSS COSA SONO E COME FUNZIONANO I CSS Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ > Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License. Based on a work at www.constile.org. Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.

PRIMA PARTE INTRODUZIONE

INFORMAZIONE E PRESENTAZIONE
Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione .
L’informazione è costituita da due aspetti essenziali:
I contenuti
La formattazione dei contenuti
I contenuti sono forniti attraverso linguaggi di marcatura che caratterizzano i vari oggetti del documento
La formattazione è determinata dall’ interpretazione del programma utente .
PRIMA PARTE: INTRODUZIONE

BROWSER E STILI
Ogni browser ha una rappresentazione predefinita degli oggetti della pagina: generalmente i collegamenti sono blu, i titoli sono rappresentati con caratteri grandi. In pratica, ogni browser ha uno stile predefinito su cui l’utente (ma non l’autore) può intervenire in minima parte.
Per permettere agli autori di avere un maggiore controllo sulla rappresentazione dei contenuti, sono nati marcatori (come ad esempio font ) il cui scopo non era più caratterizzare gli oggetti del documento, ma fornire una formattazione degli stessi. Come conseguenza i contenuti risultano indissolubilmente legati alla loro rappresentazione grafica.

I FOGLI DI STILE A CASCATA (CSS)
Compito dei CSS ( Cascading Style Sheets : Fogli di Stile a Cascata) è ripristinare la separazione dei contenuti e dalla formattazione.
I CSS possono essere visti come lo strumento per la definizione da parte dell’autore degli stili predefiniti del browser
I CSS non definiscono direttamente l’aspetto del documento ma stabiliscono il modo in cui il browser rappresenta i vari oggetti definiti dal linguaggio di marcatura utilizzato .

PRIMA PARTE XHTML

STRUTTURA E CONTENUTI: L’XHTML
Il linguaggio di marcatura più adatto all’uso dei CSS è l’XHTML
L’XHTML è una riformulazione del classico HTML in XML
L’XHTML è totalmente compatibile con l’HTML, ma è riscritto in modo da essere conforme all’XML
Il principale vantaggio dell’XHTML è la rigidità formale richiesta dal linguaggio e la possibilità di effettuare test automatici per la verifica della correttezza formale
PRIMA PARTE: XHTML

DALL’HTML ALL’XHTML
Il documento deve essere ben formato :
Tutti gli elementi devono avere un tag di chiusura , ovvero (se vuoti) il tag iniziale deve finire con la stringa ‘ /> ’ ( spazio compreso ).
I vari tag devono essere annidati in modo corretto .
PRIMA PARTE: XHTML Errato: <p>Paragrafo<p>Paragrafo <hr> <br> <p><em>enfasi</p></em> Corretto: <p>Paragrafo</p><p>Paragrafo</p> <hr /> <br /> <p><em>Enfasi</em></p>

Gli elementi e gli attributi devono essere scritti con caratteri minuscoli
I valori degli attributi devono sempre essere scritti fra apici o doppi apici
PRIMA PARTE: XHTML Errato: <P LANG="en">Paragraph</P> <a href=http://w3.org/> Corretto: <p lang="en">Paragraph</p> <a href="http://w3.org/"> oppure <a href='http://w3.org/'>

Maggiori informazioni:
http://www.w3.org/TR/xhtml1/#diffs
http://www.webaccessibile.org/argomenti/ argomento.asp?cat=519
PRIMA PARTE: XHTML

UNA STRUTTURA PER I CONTENUTI
Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti), il linguaggio di marcatura ha il compito di realizzare la struttura in cui inserire i contenuti stessi
Per raggruppare elementi da trattare come un oggetto unico , l’elemento chiave è il tag <div>
Il tag <div> è un contenitore generico.
PRIMA PARTE: XHTML

<body> <ul>
<li><a …>Articles</a></li> <li><a …>Topics</a></li> <li><a…>About</a></li> <li><a …>Contact</a></li> <li><a …>Contribute</a></li> <li><a …>Feed</a></li> </ul> <h1><a …><img … /></a></h1>
<div>
<a …>No. <em>200</em></a>
</div>
PRIMA PARTE: XHTML

Il titolo/logo del sito è realizzato tramite il tag <h1>
Il menù di navigazione è realizzato tramite una lista non ordinata <ul>
PRIMA PARTE: XHTML

UN DIVERSO APPROCCIO
Nella realizzazione di pagine web tramite XHTML+CSS è richiesto un diverso approccio rispetto a quanto si farebbe impaginando per mezzo di tabelle con i programmi del tipo WYSIWYG
Anziché lanciare l’editor WYSIWYG e cominciare a disegnare la struttura della pagina, è necessario organizzare i contenuti in modo logico, raggrupparli e, se necessario, identificarli in modo univoco o associarli a classi specifiche
Per rendere i contenuti meglio fruibili con qualsiasi dispositivo, è bene organizzarli in modo che siano letti nell’ordine ideale
PRIMA PARTE: XHTML

PRIMA PARTE STRUTTURA DI UN FOGLIO DI STILE

STRUTTURA DI UN FOGLIO DI STILE
Un foglio di stile è un documento che raccoglie un insieme di regole di rappresentazione dei contenuti della pagina a cui il foglio è associato
Di seguito è rappresentata la struttura di una regola:
PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE h1 { font-size : 2em; font-weight : bold; } DICHIARAZIONE PROPRIETÀ SELETTORE VALORE REGOLA

LE REGOLE
Una regola è costituita da:
uno o più selettori (separati da una virgola ‘ , ’) a cui associare un insieme di dichiarazioni racchiuse fra parentesi graffe ‘ { } ’
le varie di dichiarazioni sono separate da un punto e virgola ‘ ; ’
ogni dichiarazione è costituita da due elementi separati dai due punti ‘ : ’:
la proprietà
il valore (o l’insieme di valori) assegnato alla proprietà
PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE

PRIMA PARTE I SELETTORI

I SELETTORI
I selettori indicano al browser quali elementi della pagina si dovranno applicare le dichiarazioni della regola
I selettori possono essere essenzialmente di tre tipi:
PRIMA PARTE: I SELETTORI h1, h2, p { ... } #identificatore { ... } .classe { ... } 1: TAG XHTML 3: IDENTIFICATORI 2: CLASSI

TIPI DI SELETTORI
I selettori più generici sono i selettori di tipo i quali specificano che la regola deve essere applicata a tutti gli elementi del tipo indicato . Ad esempio, sono selettori di tipo: p {…} a {…} div {…} strong {…} * {…}
PRIMA PARTE: I SELETTORI

LE CLASSI
Le ‘ classi ’ servono a caratterizzare un insieme di oggetti omogenei. Per associare un oggetto ad una classe è sufficiente specificarne il nome attraverso l’attributo class : <div class="notizia" ><h1>Titolo</h1><p>Testo …</p></div> <div class="notizia altraClasse" ><h1>Titolo</h1><p>Testo …</p></div>
Il selettore si indica riportando il valore assegnato all’attributo class , preceduto da un punto ‘ . ’ .notizia {…}
È possibile combinare fra loro più classi: <div class="classe1 classe2" >…</div> .classe1.classe2 {…}
Il selettore può anche specificare a quale elemento la classe deve essere associata: p.classe {…} h1.classe {…}

IDENTIFICATORI
Gli ‘ identificatori ’ selezionano invece un oggetto unico all’interno della pagina. L’associazione avviene tramite l’attributo id : <div id="testata" ><h1>Titolo</h1><p>Testo ...</p></div> ATTENZIONE: è errato associare lo stesso identificatore a due o più oggetti nella stessa pagina.
Il selettore si indica riportando il valore assegnato all’attributo id , preceduto dal simbolo cancelletto ‘ # ’ #testata {…}
Il selettore può anche specificare a quale elemento l’identificatore deve essere associato: p#testata {…} h1#testata {…}
Classi e identificatori possono essere usati contemporaneamente: <div id="idval" class="classval" > #idval.classval {…}

PSEUDO-CLASSI
Le pseudo-classi creano delle distinzioni nei diversi stati di uno stesso elemento. Ad esempio: p:first-child {…} identifica il primo paragrafo figlio di un qualsiasi elemento padre: <div> <p>paragrafo first-child</p> <p>altro paragrafo</p> </div>

PSEUDO-CLASSI
Le sole pseudo-classi supportate dai browser più diffusi sono: a:link {…} a:visited {…} a:hover {…} a:focus {…} a:active {…}
L’ordine con cui sono scritte le precedenti regole è importante per il pieno supporto con i diversi browser.

PSEUDO-ELEMENTI
Gli pseudo-elementi selezionano una sotto parte di un dato elemento. Ad esempio: p:first-letter {…} p:first-line {…} identificano rispettivamente la prima lettera e la prima riga di un paragrafo
Il supporto da parte dei browser più datati è scarso

DISCENDENZA
Il selettore di discendenza permette di individuare un elemento in base agli elementi suoi progenitori: <h1>Lorem <strong>ipsum</strong> mea sale</h1> <p>Lorem <strong>ipsum</strong> mea sale</p>
È possibile individuare i due differenti elementi indicando, oltre al tipo dell’elemento a cui si vuole applicare la regola, anche il tipo di uno o più elementi progenitori: h1 strong {…} p strong {…}

DISCENDENZA
È possibile indicare uno o più progenitori: #nomeId ul li.nomeClasse a {…}
È possibile indicare un elemento progenitore di qualsiasi grado , non solo l’elemento padre: <ul><li> <a>Lorem ipsum</a> </li></ul> ul a {…}

SELETTORE FIGLIO
Il selettore figlio specifica una parentela diretta (padre-figlio) tra due elementi.
Il selettore che rappresenta il padre e il selettore che rappresenta il figlio sono separati dal carattere ‘>’. div > p {…} div p {…}
La prima regola si applica a tutti i paragrafi che sono direttamente contenuti in un elemento <div> , mentre la seconda regola si applica a tutti i paragrafi contenuti in un elemento <div> , indipendentemente dal grado di discendenza.
Il selettore figlio non è supportato da Internet Explorer 6 e precedenti per Windows e Mac.

SELETTORE FRATELLO
Il selettore fratello specifica la fratellanza di due oggetti.
È infatti individuare un elemento in base al fratello immediatamente precedente: <h1>Lorem ipsum</h1> <p>Atqui numquam singulis his …</p> <p>Stet invenire nam no. Quando …</p> <p>Sint oblique maluisset duo ut. …</p>
È possibile individuare il primo paragrafo, inserito subito dopo l’elemento h1, indicando i due elementi separati dal carattere ‘ + ’: h1 + p {…}
Il selettore figlio non è supportato da Internet Explorer 6 e precedenti per Windows.

SELETTORI DI ATTRIBUTO
Il selettore di attributi permette di individuare un elemento in base ad un qualsiasi suo attributo:
elm[att] verifica semplicemente se l’attributo att dell’elemento elm è stato impostato, il valore assunto dall’attributo stesso non è rilevante;
elm[att=val] verifica se l’attributo att dell’elemento elm assume esattamente il valore val ;
elm[att~=val] verifica se l’attributo att dell’elemento elm assume come valore una serie di parole separate da spazi, una delle quali è esattamente val ;
elm[att|=val] verifica se l’attributo att dell’elemento elm assume come valore una lista di parole separate da un trattino, la prima delle quali è esattamente val (utile per i codici di lingua, che hanno la forma en-en , en-us , eccetera).

Esempio
a[accesskey] {…}
a[rel=glossary] {…}
a[title~=esempio] {…}
a[hreflang|=en] {…}
I precedenti selettori possono corrispondere, rispettivamente, ai seguenti oggetti XHTML:
<a accesskey ="0" …>…</a> oppure <a accesskey ="k" …>…</a>
<a rel="glossary" …>…</a>
<a title= "titolo di esempio " …>…</a>
<a rel =" en " …>…</a> oppure <a rel =" en - en " …>…</a> ovvero <a rel =" en -us" …>…</a>

Si noti che classi e selettori di tipo ID sono un caso particolare di selettore di attributo .
Il selettore *[class~=nomeClasse] corrisponde al selettore .nomeClasse ;
Il selettore *[id=identificatore] corrisponde al selettore #identificatore .
I selettori di attributo sarebbero molto utili, soprattutto per distinguere i diversi tipi di campi input ( type="text" , type="radio" , type="submit" , …).
I selettori di attributo non sono compatibili con Internet Explorer versione 6 e precedenti.

RAGGRUPPAMENTO DI SELETTORI
Spesso può essere utile associare una regola a più selettori contemporaneamente.
Per fare ciò è possibile utilizzare un insieme di selettori separati da una virgola, come indicato nel seguente blocco di codice: h1, #id, div p.classe {…}
Più selettori separati da uno spazio costituiscono un selettore che indica un rapporto di discendenza , mentre più selettori separati da una virgola hanno un regola in comune

SPECIFICITÀ DEI SELETTORI
Due o più regole, anche con selettori differenti, possono riferirsi allo stesso oggetto , quando ciò accade le due o più regole si applicano contemporaneamente .
Tuttavia alcune dichiarazioni possono essere in conflitto, motivo per cui esistono delle norme per calcolare la priorità delle regole .
Una regola assume maggiore priorità quanto più elevata è la specificità del suo selettore .
La specificità di un selettore si basa sul numero e sul tipo di selettori di base che costituiscono il selettore.

La specificità del selettore è rappresentata da un numero a tre cifre ABC così determinato:
A = numero di attributi id presenti nel selettore della regola (numero di selettori di tipo ID);
B = numero degli attributi differenti da id (essenzialmente le classi) e di pseudo classi presenti nel selettore della regola;
C = numero di selettori di tipo e di pseudo-elementi presenti nel selettore della regola.

Selettore Pesi Specificità
* {…} A=0 B=0 C=0 0
li {…} A=0 B=0 C=1 1
li:first-line {…} A=0 B=0 C=2 2
ul li {…} A=0 B=0 C=2 2
ul ol+li {…} A=0 B=0 C=3 3
h1 + *[rel=up]{…} A=0 B=1 C=1 11
ul ol li.red {…} A=0 B=1 C=3 13
li.elm.level {…} A=0 B=2 C=1 21
#xyz {…} A=1 B=0 C=0 100

PRIMA PARTE COLLEGARE I CSS A UN DOCUMENTO XHTML

COLLEGARE I CSS A UN DOCUMENTO XHTML
Esistono diversi modi di collegare un foglio di stile ad un documento XHTML
Fogli di stile incorporati
Fogli di stile esterni
Fogli di stile importati
Attributo style : <p style="font-weight:bold">
La priorità della regola è massima, indipendentemente dal peso dei selettori
Questo metodo è sconsigliabile
PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

FOGLI DI STILE INCORPORATI
Si specificano gli stili direttamente nel codice XHTML attraverso il tag <style> da inserire nel tag <head> :
<head>
<style type="text/css">
/*<![CDATA[*/
…
/*]]>*/
</style>
</head>
Le stringhe /*<![CDATA[*/ e /*]]>*/ servono a rispettare le regole dell’XML
Questo metodo è adatto per pagine singole in cui è necessario specificare stili particolari

FOGLI DI STILE ESTERNI
I fogli di stile esterni sono richiamati attraverso il tag <link> da inserire nel tag <head> : <head> <link rel="stylesheet" href="file.css" type="text/css" /> </head>
Attraverso il tag <link> è possibile associare diversi fogli di stile contemporaneamente

FOGLI DI STILE IMPORTATI
Attraverso la regola @import è possibile includere un foglio di stile esterno all’interno di un insieme di regole
Se presenti, le regole @import devono essere inserite prima delle normali regole per gli stili:
@import "file1.css";
@import "file2.css";
body {…}
Il percorso si riferisce alla medesima cartella in cui è contenuto il foglio di stile contenente le regole @import
Le regole @import possono comparire anche negli stili incorporati

PRIMA PARTE I VALORI

PAROLE CHIAVE: INHERIT
Parola chiave inherit : il valore da assegnare alla proprietà deve essere ereditato da un elemento progenitore per il quale la proprietà è stata specificata.
Alcune proprietà assumono automaticamente il valore inherit e la loro definizione è implicitamente derivata dal più prossimo elemento progenitore per il quale la proprietà è stata
PRIMA PARTE: I VALORI

PAROLE CHIAVE: AUTO
La parola chiave auto : indica esplicitamente che il programma utente dovrà utilizzare il valore predefinito previsto per quella specifica proprietà a cui il valore auto è stato assegnato .
In alcuni casi, i diversi programmi utente possono avere valori predefiniti differenti per determinate proprietà.
Il valore predefinito di una proprietà dipende anche dall’oggetto a cui la proprietà è applicata.
Tuttavia tale valore è utile per sovra scrivere impostazioni di un’altra regola il cui selettore si riferisce al medesimo elemento, ovvero per sovra scrivere valori ereditati

PAROLE CHIAVE: DIMENSIONE CARATTERI
Dimensioni assolute
indicano una dimensione di carattere predefinita, la quale varia in base al tipo e alle impostazioni dei diversi programmi utente .
I possibili valori sono: xx-small , x-small , small , medium , large , x-large , xx-large .
Dimensioni relative
Hanno come riferimento la dimensione dei caratteri dell’elemento padre.
I possibili valori sono: larger e smaller .

LUNGHEZZE
Unità di misura relative
em : pari alla dimensione dei caratteri
ex : pari alla dimensione del carattere ‘x’ (rara)
px : pixel, la loro dimensione dipende dallo schermo
Unità di misura assolute:
in : pollici (1in = 2.54 cm)
cm
mm
pt : punti (nei CSS 2, 1pt = 1/72in )
pc : picas ( 1pc = 12pt )
Le unità di misura relative non possono essere ricondotte direttamente ai metri senza considerare altri fattori, come ad esempio dimensione e risoluzione dello schermo

LE PERCENTUALI
Le percentuali sono costituite da un numero (non necessariamente intero) positivo, negativo o nullo, seguito immediatamente, senza alcuno spazio, dal simbolo ‘ % ’.
Le percentuali dipendono, ovviamente, da un valore di riferimento che può variare in base alla proprietà a cui si vuole assegnare il valore
L’oggetto di riferimento può essere lo stesso oggetto stesso puntato dal selettore, ovvero l’oggetto padre.

RIFERIMENTI
url("http://sito/file")
url(http://sito/file)
url("/file")
url(/file)
url("../file") *
url(../file) *
* il percorso si riferisce alla cartella in cui è collocato il foglio di stile e non alla cartella in cui è collocata la pagina HTML

COLORI
Nomi predefiniti: black , green , navy
Valori RGB
#rrggbb (r,g,b = { 0 ÷ F })
#rgb (r,g,b = { 0 ÷ F }) corrisponde a #rrggbb
rgb(r,g,b) (r,g,b = { 0 ÷ 255 })
rgb(r%,g%,b%) (r,g,b = { 0.0 ÷ 100.0 })
Per esempio, i valori aqua , #00FFFF , #0FF , rgb(0,255,255) e rgb(0,100%,100%) si riferiscono tutti al medesimo colore verde acqua .

PRIMA PARTE IL BOX MODEL

IL BOX MODEL
Ogni box è caratterizzato da
Larghezza dello spazio per i contenuti ( width )
Altezza dello spazio per i contenuti ( height )
Spazio fra contenuti e bordi ( padding )
Bordo ( border )
Spazio fra il bordo e gli altri oggetti della pagina ( margin )
PRIMA PARTE: IL BOX MODEL

IL BOX MODEL
<div>Ex nostrum … </div> <div>Indoctum … </div>
body {
margin: 0;
padding: 0;
}
div {
width:300px;
padding:10px;
border:5px solid #600;
margin: 20px;
}
Si noti che i margini superiori e inferiori adiacenti collassano

IL BOX MODEL
Internet Explorer per Windows versione 5.5 e precedenti ha un modo differente di interpretare il box model: anziché aggiungere il padding e il border alla larghezza dei contenuti, toglie spazio ai contenuti
La larghezza totale del box (bordi e padding compresi) è pari al valore assegnato alla proprietà width .

LARGHEZZA E ALTEZZA
Se non si specifica la larghezza ( width ) dei contenuti del box, questo si allargherà ( margini compresi ) per riempire tutto lo spazio a sua disposizione
Se non si specifica la altezza ( height ) dei contenuti del box, questo si espanderà in verticale il minimo possibile per ospitare gli oggetti al suo interno
La larghezza e la altezza del box possono essere espresse:
In percentuali rispetto alle dimensioni del box contenitore
Tramite le unità di miusra em , px , ( ex , pt , mm )
Tramite il valore auto

LARGHEZZA E ALTEZZA
Quando si specifica la larghezza di un box, questa diviene indipendente dalla dimensione effettiva dei suoi contenuti
Internet Explorer per Windows in realtà allarga il box quando i suoi contenuti (ad esempio un’immagine o una stringa molto lunga) eccedono la larghezza del box
È possibile anche indicare una larghezza minima e una larghezza massima tramite le proprietà min-width e max-width , ma Internet Explorer (Win/Mac) non supporta tali proprietà

LARGHEZZA E ALTEZZA
Quando si specifica l’altezza di un box questo non si espanderà per ospitare eventuali contenuti che richiedono maggiore spazio
Per ottenere un simile comportamento esiste infatti la proprietà min-height , ma questa non è supportata né da Internet Explorer né da Safari. Esiste anche la proprietà max-height ma presenta le stesse incompatibilità di min-height
A meno di altre dichiarazioni, IE/Win interpreta la proprietà height come fosse min-height
Quando espressa in ‘ % ’, l’altezza di un box si riferisce all’altezza esplicitamente del box genitore, quando definita tramite la proprietà height

I MARGINI
I margini possono essere specificati:
Individualmente
A coppie (top/bottom, right/left)
Globalmente
Le unità di misura sono le stesse utilizzate per width e height ed hanno il medesimo comportamento, tranne auto
Per specificare i singoli margini è possibile utilizzare le proprietà margin-top , margin-right , margin-bottom , margin-left Esempio: div { margin-left:1em; margin-top:2em }

I MARGINI
I quattro margini possono essere specificati anche attraverso la sintassi abbreviata : div { margin : 10px 5px 0 20px } I margini risultano specificati in senso orario : top , right , bottom , left .
Attraverso la sintassi abbreviata, possiamo specificare anche le coppie di margin top / bottom e right / left : #id { margin : 1em 2em }
Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente: .classe { margin: 1em }

I MARGINI
Quando impostati sul valore auto , i margini laterali determinano la centratura orizzontale del box a cui i margini sono applicati
Purtroppo Internet Explorer non supporta questo tipo di centratura orizzontale, per cui richiede una tecnica differente
Quando impostati sul valore auto , i margini superiore e inferiore assumono il valore che il browser assegna loro normalmente
Nelle specifiche CSS non è prevista la centratura verticale dei blocchi

I MARGINI
Quando due o più margini sono adiacenti , ovverosia sono non separati da bordi o padding , questi collassano in un unico margine:
<div id="box-1">…</div> <div id="box-2">…</div> #box-1 { margin: 1em } #box-2 { margin: 2em }

I MARGINI
I margini non collassano quando sono separati da un bordo o dal padding:
<p>Lorem ipsum dolor …</p>
<div><p>Quisque imperdiet …</p></div>
div{border:solid;margin:0;}
p{margin:1em 0;background:#CCC;color:#000;}
div p{margin:1em;}
PRIMA PARTE: IL BOX MODEL I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.

IL PADDING
Il padding è una sorta di imbottitura fra i contenuti e i bordi di un box
Per specificare il padding si utilizza la stessa sintassi usata per i margini p {padding-left:0.5em; padding-right:0.5em} div { padding: 10px 20px 10px 20px } .classe { padding: 0.5em 0 } #id { padding: 5% }
A differenza di margin , padding non ammette il valore auto e non ammette valori negativi
Il padding di box adiacenti non collassa in nessun caso

I BORDI
I bordi sono caratterizzati da tre aspetti:
stile
spessore
colore
Questi aspetti possono essere definiti separatamente con:
border-style ( border-top-style , …)
border-width ( border-top-width , …)
border-color ( border-top-color , …)
Sono ammesse le dichiarazioni compatte per i quattro lati ( border-style: <stile> <stile> <stile> <stile> )
Per definire contemporaneamente i tre aspetti si usa la seguente sintassi: border-top: <spessore> <stile> <colore> border: <spessore> <stile> <colore>

I BORDI
Gli stili a disposizione sono :
solid (linea continua singola);
dotted (punteggiato);
dashed (tratteggiato);
double (doppia linea continua – è necessario uno spessore di almeno 3px per ottenere l’effetto desiderato);
groove (scavato);
ridge (effetto opposto a groove , il bordo appare sbalzato);
inset (incastonato, l’effetto grafico equivale a un pulsante premuto);
outset (effetto opposto a inset , l’effetto grafico equivale a un pulsante non ancora premuto).
none (nessun bordo, valore predefinito);

I BORDI
Lo stile predefinito è none , dunque se non si specifica lo stile del bordo questo non sarà comunque mostrato
Lo spessore del bordo può essere espresso attraverso le varie unità di lunghezza o attraverso i tre valori thin , medium , thick , le unità percentuali non sono ammesse
Il colore, se non specificato, corrisponde a quello del testo usato nel box
IE/Win non supporta bordi punteggiati da 1px

OVERFLOW
Come detto, è possibile specificare la larghezza e l’altezza di un box
Quando i contenuti eccedono le dimensioni del blocco è possibile definire il comportamento del blocco stesso attraverso la proprietà overflow .
La proprietà overflow può assumere i seguenti valori:
visible (valore predefinito)
hidden
scroll
auto

OVERFLOW: VISIBLE
Il valore visible indica che i contenuti vanno mostrati normalmente.
I contenuti dovrebbero essere mostrati senza alterare la dimensione del contenitore
Internet Explorer per Windows espande il contenitore fino alla dimensione richiesta dai contenuti
div {
width:200px;height:200px;
overflow:visible;
}

OVERFLOW: HIDDEN
Il valore hidden indica che i contenuti vanno tagliati e non devono apparire barre di scorrimento
div {
overflow:hidden;
}

OVERFLOW: SCROLL E AUTO
Il valore scroll indica che i contenuti vanno tagliati , se necessario . Le barre di scorrimento devono comunque apparire.
Il valore auto indica che i contenuti vanno tagliati , se necessario . Le barre di scorrimento devono apparire dove necessario .
La dimensione del contenitore non è alterata

PRIMA PARTE IL VISUAL FORMATTING MODEL

IL VISUAL FORMATTING MODEL
È, assieme al box model , uno degli elementi fondamentali per la realizzazione di impaginazioni complesse
Tratta essenzialmente del comportamento di un box in relazione agli altri box della pagina
Definisce il posizionamento dei diversi box all’interno della pagina
PRIMA PARTE: IL VISUAL FORMATTING MODEL

TIPI DI BOX
Ci sono essenzialmente tre tipi di box:
i box a livello di blocco
i box in linea
gli elementi di lista
Altri tipi di box sono scarsamente supportati
Ogni elemento appartiene ad uno dei tre tipi di box:
Box a livello di blocco: <p> , <h1> , <div> , box anonimi
Box in linea: <em> , <a> , <span> , box anonimi
Elementi di lista: <li>

TIPI DI BOX
Il tipo di box può essere alterato attraverso la proprietà display la quale può assumere i seguenti valori:
block
inline
list-item
none : elimina il box dalla visualizzazione
In realtà esistono numerosi altri valori possibili , ma sono tutti scarsamente supportati dai diversi browser

BOX ANONIMI
Ogni elemento della pagina, anche se non marcato , appartiene ad un tipo di box
Si consideri il seguente esempio <div>i box anonimi non hanno dei marcatori propri.<p>Essi sono <em>generati</em> dai box loro contenitori.</p></div>
La frase “ i box anonimi non hanno dei marcatori propri. ” normalmente sarebbe un box in linea, ma a causa della presenza del box a livello di blocco generato da <p> , essa diventa un blocco anonimo .
Analogamente, “ Essi sono ” e “ dai box loro contenitori. ” diventano dei box in linea anonimi .

IL FLUSSO
I diversi box sono inseriti nel così detto “ flusso ”
I box a livello di blocco (compresi i box anonimi) si dispongono uno di seguito all’altro in verticale , distanziandosi in base ai margini
I box in linea (compresi i box anonimi) si dispongono orizzontalmente uno di seguito all’altro, su una o più linee a seconda dello spazio. La loro spaziatura orizzontale è determinata anche da margini, bordi e padding. La spaziatura verticale è determinata solo dall’interlinea ( line-height )
PRIMA PARTE: IL VISUAL FORMATTING MODEL p { border:1px solid #00C; } em{ margin:2em;border:1px solid #C00 } strong { border:1px solid #0C0; padding:0.7em; }

IL FLUSSO
Nella regolazione del flusso di elementi in linea assume importanza la proprietà vertical-align
Questa proprietà assume significato:
Per le celle di una tabella
Per gli elementi in linea
Negli elementi in linea, vertical-align definisce l’allineamento verticale di un elemento in linea , all’interno di un’ altra linea di altezza superiore
La proprietà vertical-align non definisce l’allineamento verticale del testo all’interno di box a livello di blocco
PRIMA PARTE: IL VISUAL FORMATTING MODEL p#lh{ line-height:2em; } strong{ line-height:1em; vertical-align:top; } p#va { /* uso errato */ height:5em; vertical-align:bottom; }

POSIZIONAMENTO RELATIVO
Il posizionamento relativo altera il normale flusso dei box a livello di blocco
Attraverso la dichiarazione ‘ position:relative ’ è possibile definire un off-set per il posizionamento del blocco all’interno del flusso
L’ off-set non altera il posizionamento dei blocchi che seguono e precedono nel flusso il blocco interessato
L’ off-set è assegnato tramite le proprietà: top , right , bottom , left .
PRIMA PARTE: IL VISUAL FORMATTING MODEL p#pr { position:relative; left:1em;top:1.5em; } p { padding:0.5em;margin:1em }

POSIZIONAMENTO ASSOLUTO
Attraverso la dichiarazione position:absolute è possibile posizionare il box in un punto esatto della pagina indipendentemente dal flusso
Un blocco posizionato in modo assoluto è del tutto estratto dal flusso e non ha alcuna influenza sulla posizione degli altri blocchi
La posizione è stabilita attraverso le proprietà: top , right , bottom , left a partire da un determinato punto di riferimento iniziale
Il valore di top indica la distanza tra il limite superiore del blocco posizionato e il limite superiore del padding del box di riferimento; lo stesso vale per le altre proprietà right , bottom e left .
Il box di riferimento è il primo blocco progenitore posizionato in modo non assoluto o relativo , oppure l’elemento <html>

POSIZIONAMENTO ASSOLUTO
Un blocco posizionato in modo assoluto, se non si specifica un valore per la proprietà width , assume la dimensione necessaria a contenere gli elementi al suo interno
Un box in linea posizionato in modo assoluto diviene un box a livello di blocco
<p>(1) …</p> <p id="pa">(2) …</p> <p>(3) …</p> p#pa { position:absolute; right:5px; bottom:5px; margin:0; } p { margin:1em 10px; } PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI
Un box flottante è posizionato all’interno del flusso in modo che i contenuti dei box successivi si dispongano attorno al box
Un box flottante posiziona lungo il lato sinistro ovvero lungo il lato destro del box che lo contiene

BOX FLOTTANTI
Attraverso la proprietà float è possibile assegnare verso quale lato il box deve disporsi La proprietà float può assumere tre valori: left , right , none
Un box flottante, se non si specifica un valore per la proprietà width , assume la dimensione necessaria a contenere gli elementi al suo interno

BOX FLOTTANTI
<p>(1) …</p>
<p id="fl">(2) …</p>
<p>(3) …</p>
<p id="fr">(4) …</p>
<p>(5) …</p>
<p>(6) …</p>
p#fl {
float:left;
width:200px;
}
p#fr {
float:right;
width:200px;
}

BOX FLOTTANTI
I margini inferiore e superiore di un box flottante non collassano
Il box flottante è eliminato dal normale flusso per cui non influenza la disposizione degli altri box, ma solo la disposizione dei contenuti

BOX FLOTTANTI
Blocchi flottanti consecutivi si dispongono uno di fianco all’altro
Se lo spazio non è sufficiente a contenere i diversi blocchi, quelli in eccesso sono disposti al di sotto degli altri

BOX FLOTTANTI
Per interrompere l’effetto della proprietà float e ripristinare il normale flusso si usa la proprietà ‘ clear ’, che può assumere i valori: left , right , both , none
p#fl {
float:left;
width:200px;
}
p#cl { clear: left }

IL VISUAL FORMATTING MODEL: BOX FLOTTANTI
Come detto in precedenza, i box flottanti non influenzano il normale flusso dei blocchi
Un box flottante contenuto in un blocco non dovrebbe dunque condizionare in nessun modo l’altezza del blocco contenitore
Nell’esempio, il blocco contenitore (un <div> ) ha una dimensione verticale determinata esclusivamente dal padding assegnato.
PRIMA PARTE: IL VISUAL FORMATTING MODEL p#fl { float:left; width:200px; } div { padding: 1em }

BOX FLOTTANTI
Internet Explorer per Windows ha un comportamento particolare ed errato : qualora la dimensione del blocco contenitore fosse assegnata , il blocco flottante contenuto ne influenzerebbe la dimensione
p.fl {
float:left;width:200px;
}
div {
padding:1em;width:90%;
}
<div>
<p class="fl">Atqui …</p>
</div>
<p>Si noti …</p>
Questo comportamento induce spesso in errore chi non conosce il corretto comportamento dei blocchi flottanti.

BOX FLOTTANTI
Tuttavia, se anche il blocco contenitore è flottante , allora i blocchi flottanti contenuti ne influenzano l’altezza:
p.fl {
float:left; width:200px;
}
div {
padding:1em; float:left;
}

IL VISUAL FORMATTING MODEL: BOX FLOTTANTI
Un altro metodo che può essere utilizzato per consentire ad un blocco flottante di influenzare l’altezza del suo contenitore è inserire un blocco successivo con assegnata opportunamente la proprietà clear :
p#fl {
float:left;
}
p#cl {
clear:left;
}
In questo caso, sarà il blocco non flottante a determinare l’altezza del blocco contenitore

BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
Internet Explorer per Windows presenta altri difetti relativi ai box flottanti
In alcuni casi questi difetti possono essere corretti attraverso delle regole da specificare solo* per Internet Explorer
* Come specificare delle regole particolari per Internet Explorer/Windows sarà illustrato nella seconda parte del seminario

Internet Explorer raddoppia il margine laterale corrispondente a quello specificato per la proprietà float
La soluzione consiste nell’aggiungere la dichiarazione display:inline alla regola per l’elemento flottante.
Questa dichiarazione non ha alcuna influenza negli altri browser, dato che un box flottante è comunque un box a livello di blocco

Un secondo baco molto frequente è noto col nome di peek-a-boo bug (letteralmente baco del nascondino ).
Il baco coinvolge solo la versione 6 di Internet Explorer per Windows ed ha come conseguenza la scomparsa del testo che affianca il box flottante.
Tale testo ricompare (del tutto o in parte) selezionandolo col mouse, attivando la modalità di visualizzazione a tutto schermo, ridimensionando i caratteri.

Questo baco si presenta generalmente quando un box, con sfondo assegnato e altezza e larghezza non assegnate , contiene un box flottante, del testo che si dispone attorno a tale box senza superarlo in altezza e un box con assegnata la proprietà clear .
La soluzione consiste nello specificare l’interlinea per uno dei blocchi progenitori ( <body> compreso) tramite la proprietà line-height . Ad esempio: body { line-height : 1.2em }

Quando un blocco che segue un box flottante ha una dimensione assegnata (altezza o larghezza), anziché posizionarsi indipendentemente dal box flottante, si affianca a quest’ultimo
Inoltre il browser aggiunge , in modo arbitrario , 3 pixel al margine laterale opposto a quello specificato per la proprietà float

Si abbia un box flottante: si vuole affiancargli una seconda “ colonna ” semplicemente specificando il margine laterale del blocco successivo:
#fl {float:left;width:200px;}
#box {margin:0 0 0 200px;}
I 3 pixel aggiunti arbitrariamente da IE/Win visti in precedenza indenteranno i contenuti della seconda colonna per tutta l’altezza della prima
Il difetto non si presenterebbe se anche il secondo blocco fosse flottante

Per correggere il difetto bisogna ( solo per IE/Win ):
Specificare la larghezza o l’ altezza della seconda colonna (vedi diapositiva 95 )
Ridurre il margine destro della prima colonna di 3 pixel
Annullare il margine sinistro della seconda colonna
#fl {
float:left;width:200px;
margin:0 -3px 0 0;
}
#box {
margin:0 0 0 0;
height:0;
}

BOX FLOTTANTI E LISTE
Le liste hanno delle indentazioni generate da margini e padding predefiniti e marcatori esterni agli elementi della lista
Le liste possono assumere un comportamento inaspettato se poste di seguito ad un box flottante
In figura è rappresentata una lista preceduta da un box flottante: in rosso è evidenziato il bordo della lista, in verde il bordo degli elementi della lista
Internet Explorer e Mozilla hanno delle impostazioni differenti per ottenere le indentazioni (per le liste ordinate e non ordinate IE usa margine sinistro della lista, mentre Mozilla utilizza il padding sinistro della lista).

I marcatori di lista si dispongono dietro al box flottante
Le indentazioni delle liste sono annullate
Tutto questo è conseguenza del fatto che margini e padding con cui sono realizzate le indentazioni sono ininfluenti , poiché il testo delle liste si disporrà comunque di fianco al box flottante

Per risolvere il problema occorre:
Uniformare le modalità di indentazione dei diversi browser
Impostare i margini della lista in modo tale che l’effetto del box flottante non annulli l’effetto dovuto a tali margini:
.fl { float:left;width:200px; }
ul, ol, dl {
margin-left:200px;
padding:0;
}
li{ margin-left:2em; }

VISIBILITY
La proprietà visibility permette di rendere invisibile un box
A differenza di quanto accade con la dichiarazione display:none , il blocco continua ad influenzare il posizionamento degli altri elementi della pagina
La proprietà visibility ammette due valori:
visible
hidden
Al paragrafo è stata assegnata la dichiarazione visibility:hidden PRIMA PARTE: IL VISUAL FORMATTING MODEL

PRIMA PARTE CONTENUTI GENERATI

CONTENUTI GENERATI
I CSS permettono un certo controllo sulla generazione automatica di contenuti.
Si consideri il seguente esempio:
<p>Questo documento è scritto in <acronym lang="en" title="Extensible HyperText Markup Language">XHTML</acronym> . Sul sito del <a href="http://w3.org/" hreflang="en">W3C</a> troverai maggiori dettagli</p>
Sarebbe utile se nella pagina si potessero esplicitare i valori di title e di hreflang direttamente nel testo subito dopo l’acronimo e il collegamento
PRIMA PARTE: CONTENUTI GENERATI

CONTENUTI GENERATI
acronym [title]:after {
content: " ("attr(title)")";
font-style:italic; color:#900;
}
a [hreflang]:after {
content: " ["attr(hreflang)"]"; font-weight:bold;
}

CONTENUTI GENERATI
Putroppo Internet Explorer non è in grado di generare contenuti tramite CSS per cui questi ed altri meccanismi di generazione devono essere rimandati ad usi futuri
Tuttavia è utile conoscere tale metodi che possono essere implementati già da adesso per i programmi utente che li supportano.
I meccanismi di generazione sono molti e includono anche meccanismi di numerazione. Chi fosse interessato troverà maggiori dettagli al seguente indirizzo: http://www.w3.org/TR/CSS2/generate.html

PRIMA PARTE COLORI E SFONDI

COLORE IN PRIMO PIANO (TESTO E BORDI)
Il colore del testo e dei bordi è definito tramite la proprietà color
Il valore predefinito è quello ereditato dal testo del blocco padre
Se non diversamente specificato, il colore per <body> (o meglio ancora <html>) è quello assegnato per il testo dalle impostazioni del sistema operativo o del browser, e non è necessariamente nero
PRIMA PARTE: COLORI E SFONDI

SFONDI
Lo sfondo può essere
Trasparente
Caratterizzato da una tinta piatta
Riempito del tutto o in parte da una immagine
Lo sfondo può essere gestito attraverso le seguenti proprietà:
background-color
background-image
background-repeat
background-attachment
background-position
background (riassume le diverse proprietà)

COLORE DELLO SFONDO
La proprietà background-color può assumere i seguenti valori:
transparent
<colore> ( vedi diapositiva 49 )
Il valore predefinito è transparent
A differenza di color , il valore per la proprietà background-color non è ereditato
Se non diversamente specificato, lo sfondo della pagina è stabilito dalle impostazioni del sistema operativo o del browser e non è necessariamente bianco

COLORI DI TESTO E SFONDO DEFINITI SEPARATAMENTE
Le proprietà color e background-color dovrebbero essere sempre specificate in coppia per evitare conflitti con le impostazioni predefinite
In figura si vede il risultato ottenuto con una impostazione di Windows a contrasto elevato quando il testo è impostato sul blu ( #009 ) ma lo sfondo non è esplicitamente impostato

BACKGROUND-IMAGE
Per inserire un’immagine di sfondo è sufficiente specificarne l’ url tramite la proprietà background-image : background-image:url(/im/sfondo.png);
L’immagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente
L’immagine scorrerà assieme al testo
Per specificare che non dovrà essere usata nessuna immagine si utilizza il valore none (che è il valore predefinito): background-image:none;

BACKGROUND-REPEAT
Tramite background-repeat è possibile stabilire se e come l’immagine sarà ripetuta
background-repeat:repeat indica che l’immagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito)
background-repeat:repeat-x indica che l’immagine sarà ripetuta solo orizzontalmente
background-repeat:repeat-y indica che l’immagine sarà ripetuta solo verticalmente
background-repeat:no-repeat indica che comparirà una sola occorrenza dell’immagine

BACKGROUND-ATTACHEMENT
Tramite background-attachment è possibile stabilire se l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina
background-attachment:scroll indica che l’immagine scorrerà assieme alla pagina (valore predefinito)
background-attachment:fixed indica che l’immagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con <body> )

BACKGROUND-POSITION
Tramite background-position è possibile stabilire la posizione iniziale dell’immagine.
I valori ammessi sono:
Unità di lunghezza
Unità percentuali
Parole chiave:
left | center | right per il posizionamento orizzontale
top | center | bottom per il posizionamento verticale
I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale

BACKGROUND-POSITION
Quando sono usate le unità di lunghezza, l’angolo superiore sinistro dell’immagine è posizionato relativamente all’angolo superiore sinistro dell’area del padding
Quando sono utilizzate le unità percentuali si ha il seguente comportamento:
Sia X% il valore percentuale per la posizione orizzontale
Sia Y% il valore percentuale per la posizione verticale
Il punto dell’immagine che si trova alle coordinate X% , Y% sarà posto in posizione X% , Y% dell’area del padding

BACKGROUND-POSITION PRIMA PARTE: COLORI E SFONDI background-position : 20% 25%;

BACKGROUND
La proprietà background permette di definire con un’unica dichiarazione tutte le varie proprietà contemporaneamente
Se non sono specificati alcuni valori, allora vengono implicitamente assegnati quelli predefiniti:
body { background: #fff url(img.jpg) 100% 0 no-repeat fixed; }

PRIMA PARTE CARATTERI E TESTO

CARATTERI E TESTO
Per i caratteri sono disponibili le seguenti proprietà:
font-family : specifica il tipo di carattere
font-size : specifica la dimensione del carattere
font-style : per specificare il corsivo
font-weight : per specificare il grassetto
font-variant : per specificare il maiuscoletto
font : per specificare contemporaneamente le precedenti proprietà
PRIMA PARTE: CARATTERI E TESTO

FONT-FAMILY
Attraverso font-family è possibile specificare diversi tipi di carattere: body { font-family:verdana,arial,sans-serif; }
Il carattere usato sarà il primo, fra quelli specificati, che risulta essere disponibile nel computer dell’utente
È bene concludere l’elenco con una famiglia generica da usare nel caso in cui gli altri tipi di carattere non siano disponibili. Le famiglie generiche sono:
serif (ad esempio il Times )
sans-serif (ad esempio il Verdana )
monospace (ad esempio il Courier )

FONT-SIZE
Con font-size è possibile specificare la dimensione del carattere
Possono essere utilizzate unità di lunghezza (sono consigliate quelle relative ad eccezione dei pixel) e unità percentuali
È sconsigliato l’uso dell’unità px poiché con Internet Explorer per Windows il testo sarebbe non ridimensionabile
Le unità relative e le percentuali si riferiscono alle dimensioni dell’elemento padre
Usare le unità percentuali corrisponde ad utilizzare le unità em
Internet Explorer ha un baco che sconsiglia l’uso delle unità em per body , poiché il ridimensionamento dei caratteri è eccessivo
Possono inoltre essere utilizzati i valori visti nella diapositiva 45 ( xx-small … xx-large , larger e smaller )

FONT-STILE, FONT-WEIGHT, FONT-VARIANT
Tramite font-style è possibile formattare il testo in corsivo.
i valori ammessi sono: normal | italic
Tramite font-weight è possibile formattare il testo in grassetto.
i valori ammessi sono: normal | bold
Sono ammessi altri valori ma sono scarsamente supportati dai programmi utente
Tramite font-variant è possibile formattare il testo in maiuscoletto.
i valori ammessi sono: normal | small-caps

FONT
Tramite font è possibile specificare tutte le proprietà del carattere contemporaneamente
La sintassi ammessa è: font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>
Non è necessario specificare tutte le proprietà
Perché la dichiarazione sia valida è necessario specificare almeno <font-size> e <font-family>
Assieme alla dimensione del testo è possibile specificare l’ interlinea tramite <font-size>/<line-height>
Esempio: h1 { font : bold 2em/1.5em georgia, serif }

ALLINEAMENTO DEL TESTO
L’allineamento orizzontale del testo può essere stabilito tramite la proprietà text-align
Valori ammessi: left | right | center | justify
L’indentazione è stabilita tramite text-indent
Sono ammesse unità di lunghezza o unità percentuali
Esempio: p { text-indent: 2em }

DECORAZIONE DEL TESTO
Il testo può essere decorato con sottolineature (da usarsi essenzialmente con i link), sopralineature (da evitare), testo barrato (essenzialmente per il tag <del> )
Eventuali decorazioni vanno specificate tramite la proprietà text-decoration
I valori ammessi sono: none | underline | overline | line-through

SPAZIATURA FRA PAROLE E CARATTERI
Lo spazio predefinito fra lettere e parole può essere modificato tramite le proprietà letter-spacing e word-spacing
Sono ammesse tutte le diverse unità di lunghezza, tuttavia sono particolarmente indicate le unità em
Il valore specificato può essere positivo o negativo
Il valore specificato non indica la distanza fra le varie lettere o parole ma va a sommarsi alla distanza predefinita
Esempio
h1{ letter-spacing:0.2em;word-spacing:0.5em }

CARATTERI BIANCHI E INTERRUZIONI DI LINEA
Due o più spazi bianchi nel codice sorgente generalmente vengono assorbiti in un unico spazio bianco
Le interruzioni di linea nel codice sorgente sono generalmente interpretate come uno spazio bianco
Generalmente il browser crea una nuova linea quando il testo non entra nello spazio orizzontale a disposizione
Tutti questi comportamenti possono essere regolati tramite la proprietà whitespace

CARATTERI BIANCHI E INTERRUZIONI DI LINEA
Sono ammessi i seguenti valori:
normal : comportamento predefinito
pre : spazi bianchi multipli non collassano in un unico spazio bianco. Eventuali interruzioni di linea sono generate da interruzioni di linea nel codice oppure dal tag <br />
nowrap : gli spazi bianchi collassano. Eventuali interruzioni di linea sono generate solo dal tag <br /> , e non anche dall’eccessiva lunghezza del testo inserito in una singola linea.

TRASFORMAZIONI DEL CARATTERE
Tramite la proprietà text-transform è possibile gestire i caratteri maiuscoli e minuscoli indipendentemente da quanto specificato nel codice
Sono ammessi i seguenti valori:
capitalize : la prima lettera di ogni parola è rappresentata in maiuscolo
uppercase : tutte le lettere di ogni parola sono rappresentate in maiuscolo
lowercase : tutte le lettere di ogni parola sono rappresentate in minuscolo
none : nessuna variazione
Esempio: h1 { font-variant: uppercase } h2 { font-variant: capitalize }

PRIMA PARTE FORMATTAZIONE DELLE TABELLE

FORMATTAZIONE DELLE TABELLE
Attraverso i CSS è possibile formattare efficacemente le tabelle
I vari attributi delle tabelle hanno un corrispondenza con apposite proprietà CSS:
cellpadding  padding
cellspacing  border-spacing
border  border
width  width
È bene specificare la dimensione del testo per le tabelle (ad esempio table{font-size:1em} ) poiché Internet Explorer tende a ignorare le impostazioni scelte per <body>
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE

BORDER-COLLAPSE
I bordi della tabella e delle singole celle sono specificati separatamente:
table { border:3px solid #900; }
td,th { border:1px solid #900; }
Automaticamente, il browser lascia dello spazio fra i bordi delle singole celle
Per eliminare tale spazio si utilizza la proprietà border-collapse
I valori ammessi sono: collapse | separate
Quando i bordi sono separati, può essere utile non mostrare le celle vuote:
table { empty-cells: hide; }

RIGHE E COLONNE
Specificando opportunamente i bordi è possibile ottenere una griglia solo orizzontale o solo verticale
In tutti e due i casi è necessario impostare i bordi in modo che collassino
table {
border-collapse: collapse;
}
Griglia orizzontale
td,th {
border:1px #900;
border-style: solid none;
}
Griglia verticale
td,th { border:1px solid #900; }
td{ border-style: none solid; }

INTESTAZIONE E RIGHE
L’intestazione della tabella, identificabile tramite il tag <thead> può essere formattata indipendentemente dal resto della tabella:
thead {
background:#ffc;
color:#000;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
Attraverso le classi è possibile evidenziare meglio le diverse righe alternandone il colore di sfondo
tr.d {background:#eee;color:#000}
tr.p {background:#fff;color:#000}
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE <table summary="..."> <thead><tr><th>…</th>…</tr></thead> <tbody> <tr class="d"><td>…</td>…</tr> <tr class="p"><td>…</td>…</tr> <tr class="d"><td>…</td>…</tr> <tr class="p"><td>…</td>…</tr> </tbody> </table>

SPAZIO FRA CELLE
Lo spazio fra le celle può essere specificato attraverso la proprietà border-spacing
La proprietà border-spacing ha effetto quando i bordi delle singole celle non collassano
La proprietà border-spacing ammette come valori solo delle lunghezze:
table { border-spacing:20px; }
La proprietà border-spacing non è supportata da Internet Explorer

PRIMA PARTE INTERFACCIA UTENTE

INTERFACCIA UTENTE
I CSS sono in grado di interagire con l’interfaccia utente
È possibile specificare l’aspetto del puntatore del mouse
È possibile utilizzare i colori e gli sfondi impostati dall’utente per il sistema operativo
È possibile utilizzare i caratteri impostati dall’utente per il sistema operativo
PRIMA PARTE: INTERFACCIA UTENTE

PUNTATORE
L’aspetto del puntatore può essere gestito attraverso la proprietà cursor
I possibili valori sono: auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help
In genere è meglio evitare di modificare l’aspetto predefinito del puntatore
Un esempio di uso della proprietà cursor è il seguente:
abbr { cursor : help }

COLORI E SFONDI
Alle proprietà color e background-color è possibile associare un valore preso direttamente dalle impostazioni del sistema operativo
I possibili valori sono: ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
Esempio:
p { color: WindowText; background-color: Window }

CARATTERI
Abbiamo visto che la proprietà font è una scorciatoia per definire contemporaneamente diverse proprietà dei caratteri
Attraverso font è altresì possibile specificare i caratteri usati dal sistema operativo
I possibili valori sono: caption | icon | menu | message-box | small-caption | status-bar
Quando si usano questi valori, si specificano contemporaneamente tutte le proprietà del carattere
Esempio: p { font : menu }

PRIMA PARTE MEDIA ALTERNATIVI

MEDIA ALTERNATIVI
È possibile specificare un particolare foglio di stile per diversi media:
braille : dispositivi braille
embossed : stampanti braille
handheld : dispositivi palmari
print : stampanti
projection : proiettori
screen : monitor dei computer
speech ( aural ): browser vocali
tty : dispositivi a carattere fisso (teletypes)
tv : televisori e affini
all
screen è ben supportato, i palmari che supportano handheld leggono anche screen , print è supportato con alcuni limiti.
speech ( aural ) non è ben supportato
PRIMA PARTE: MEDIA ALTERNATIVI

MEDIA ALTERNATIVI
Per specificare il media a cui associare il foglio di stile è possibile utilizzare tre metodi:
La regola @import : @import url(schermo.css) screen; @import url(stampante.css) print;
Questo metodo non è supportato da Internet Explorer
La regola @media : @media print { body { font:100% Arial, sans-serif } } @media screen { body { font:12pt Times, serif } }
Tag <link /> nel codice XHTML: <link rel="stylesheet" type="text/css" media="print" href="p.css" /> <link rel="stylesheet" type="text/css" media="screen" href="s.css" />
PRIMA PARTE: MEDIA ALTERNATIVI

PRIMA PARTE FINE PRIMA PARTE

SECONDA PARTE CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS

IL PROBLEMA
Quando abbiamo visto il box model, si è accennato al fatto che Internet Explorer per Windows non segue esattamente le indicazioni del W3C
IE5.x aggiunge padding e bordi sottraendoli allo spazio specificato dalla proprietà width
SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS

LE SOLUZIONI
Per ovviare al problema ci sono essenzialmente due metodi
Si evita di specificare contemporaneamente le proprietà width e padding e/o border : Dove possibile si cerca di sfruttare due box contenuti uno nell’altro (ad esempio un <div> e i paragrafi al suo interno)
Si specifica separatamente il valore di width per IE/Win 5.x e per gli altri browser, ad esempio attraverso i Commenti condizionali *: <link rel="stylesheet" href="css/standard.css" type="text/css" />  * Rif: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS

SECONDA PARTE LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

STRUTTURA DELLA PAGINA
Sfruttando il comportamento dei box flottanti che si dispongono uno di fianco all’altro fin che c’è spazio a disposizione è possibile realizzare layout a colonne
La pagina ha la seguente struttura:
<body>
<div id="pagina">
<div id="testa">…</div>
<div id="c1">…</div>
<div id="piede">…</div>
</div>
</body>
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

LE TRE COLONNE
Le istruzioni CSS essenziali sono:
#pagina{ width:700px; }
#c1{
float:left; width:200px; }
#c2{
#c3{
#piede{
clear:both; width:100% ;
}
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI width:100% corregge un baco di Internet Explorer

SFONDO DELLE COLONNE
Le tre colonne terminano là dove terminano i loro contenuti e non c’è modo per imporre che le tre colonne si sviluppino in altezza fino al piè di pagina
#c1 { background: #99C; }
#c2 { background: #FFC; }
#c3 { background: #CC9; }

È possibile superare il problema impostando un’ immagine di sfondo per #pagina tale che, se ripetuta verticalmente, disegni le tre colonne: #pagina{ background:#FFF url(3COLFIX.gif) 0 0 repeat-y; }

È ora necessario impostare lo sfondo per l’intestazione e il piè di pagina: #piede{background:#CCC} #testa{background:#CCC}

SPAZIO FRA LE COLONNE
Per distanziare il testo dalle colonne non occorre impostare il padding delle colonne stesse, con conseguenti problemi di interpretazione del box model
La distanza sarà ottenuta impostando il padding dei paragrafi contenuti nelle colonne stesse:
#c1 p, #c2 p, #c3 p, #piede p { margin:0; padding:0.5em 1em; } #c1, #c2, #c3, #piede { padding:0.5em 0; } h1 { font-size:1.2em; margin:0; padding:1em } SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

POSIZIONE DELLE COLONNE
Le colonne appaiono su schermo, da sinistra a destra, nell’ordine in cui sono state inserite nel codice XHTML
Questo non è un vincolo, dato che è possibile traslare le singole colonne tramite la dichiarazione position:relative
SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI #c2 { position:relative; left:200px; } #c3 { position:relative; left:-300px; }

SECONDA PARTE LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

STRUTTURA DELLA PAGINA
La pagina ha la seguente struttura:
<div id="pagina"> <div id="aux">
<div id="testa"></div>
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="piede"></div>
</div> </div>
A differenza del layout a larghezza fissa, in questo caso è necessario un contenitore ausiliario ( <div id="aux"> ) il cui scopo è la gestione degli sfondi per le colonne
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

LE TRE COLONNE
body { margin:0; padding:0 5%;}
#pagina { width:100%;}
#aux { width:100%;}
#c1 {
float:left; width:23%;
margin: 0 1%;display:inline
}
#c2 { float:left; width:48%; margin: 0 1%;display:inline }
#c3 {
float:right; width:23%; margin: 0 1% 0 0;display:inline }
#piede { clear:both;width:100% }

LE TRE COLONNE
La larghezza del layout non è affidata alla proprietà width di #pagina ma al padding impostato per <body>
La larghezza totale delle tre colonne non raggiunge il 100% dello spazio disponibile, poiché ciò potrebbe comportare problemi di arrotondamento ( dipendendo dalle dimensioni della finestra ) nel passaggio %  px

LE TRE COLONNE
Un esempio di problemi con l’arrotondamento è il seguente: si ipotizzi che la larghezza di #pagina sia pari a 802px e che la larghezza di #c1 , #c2 e #c3 sia pari, rispettivamente, a 35% , 50% , 25% .
Gli elementi #c1 e #c3 dovrebbero dunque essere larghi 802 ×25÷100= 200.5px , mentre l’elemento #c2 dovrebbe essere largo 802×50÷100= 401px
Poiché il pixel non può essere spaccato in due, elementi #c1 e #c3 sarebbero larghi non 200.5px ma 201px .
La larghezza totale delle tre colonne sarebbe dunque pari a 201+401+201=803px , la quale supererebbe di 1px la larghezza di #pagina , per cui la terza colonna dovrebbe disporsi sotto le prime due

LE TRE COLONNE
La soluzione proposta consiste nel rendere la larghezza totale delle colonne pari al 99%, lasciando un franco pari all’1% per assorbire eventuali errori di arrotondamento
Il franco si ha fra #c2 e #c3 , rendendo flottanti le due colonne a sinistra e a destra e regolando larghezze e margini in modo tale che ci sia una distanza pari all’1% fra #c2 e #c3

Per realizzare lo sfondo delle tre colonne non è possibile usare una sola immagine poiché la larghezza delle colonne non è più nota a priori
Saranno dunque utilizzate due immagini separate che saranno impostate come sfondo di #pagina e #aux

Ricordando che uno sfondo posizionato con le percentuali si dispone in modo tale che il punto dell’immagine che si trova alle coordinate X% , Y% sarà posto in posizione X% , Y% dell’area del padding del suo contenitore, sarà sufficiente realizzare due immagini,
la cui larghezza sia tale da coprire le attuali risoluzioni supportate (ad esempio 4000px )
la cui colorazione sia tale da risultare opache per la percentuale occupata dalla colonna e trasparenti per la restante parte.
Si è scelto di avere colonne laterali larghe il 25% dello spazio totale
L’immagine per la prima colonna sarà opaca per i primi 1000px (in orizzontale) e trasparente per i restanti 3000px (il rapporto è dunque 25% )
L’immagine per la prima colonna sarà trasparente per i primi 3000px (in orizzontale) e opaca per i restanti 1000px (il rapporto è dunque 75% )

Il codice da utilizzare per impostare gli sfondi è il seguente:
#pagina { background:#FFC url(3COLLIQ.SX.gif) 25% 0 repeat-y;
}
#aux { background:transparent url(3COLLIQ.DX.gif) 75% 0 repeat-y; }
Si noti che il colore di sfondo di #pagina fornisce lo sfondo per la colonna centrale, mentre il colore di sfondo di #aux deve essere trasparente per consentire la visualizzazione dello sfondo di #pagina

SPAZIO FRA LE COLONNE
La distanza fra il testo e i bordi delle colonne è il risultato dell’impostazione dei margini con i quali è stata realizzata la struttura a tre colonne
SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI #piede { background:#CCC; } #testa { background:#CCC; } h1 { font-size:1.2em; margin:0; padding:1em } #c1 p, #c2 p, #c3 p { margin:0; padding:0.5em 0; } #piede p { margin:0; padding:0.5em 1em; } #c1, #c2, #c3, #piede { padding:0.5em 0; }

SECONDA PARTE LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO

LAYOUT A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
Realizzare layout a colonne attraverso blocchi posizionati in modo assoluto è relativamente semplice ma implica un forte vincolo
Se si vuole gestire con efficacia il piè di pagina è necessaria una colonna che sia sempre e a priori la più lunga delle altre
Se si vuole gestire lo sfondo delle colonne indipendentemente dall’altezza delle colonne è necessaria una colonna che sia sempre e a priori la più lunga delle altre
SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO

Il vincolo è dovuto al fatto che i blocchi posizionati in modo assoluto non possono in nessun modo controllare la posizione del piè di pagina (che nel caso di blocchi flottanti era controllato tramite la proprietà clear )
Inoltre i blocchi posizionati in modo assoluto non possono determinare l’altezza del loro contenitore, usandone lo sfondo per realizzare le colonne
Una colonna a priori più alta delle altre potrebbe essere però posizionata in modo statico e superare i problemi suddetti
Tramite i margini laterali, la colonna statica potrebbe lasciare lo spazio per il posizionamento dei blocchi assoluti

Vedremo ora come realizzare un layout a colonne con blocchi posizionati in modo assoluto
Si assume che non interessi avere il piè di pagina né che interessi gestire gli sfondi indipendentemente dall’altezza delle colonne
Non ci sono differenze degne di nota fra layout liquidi o a larghezza fissa
La struttura della pagina sarà la seguente:
<body>
<div id="testa"></div>
<div id="corpo">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
</body>

LE TRE COLONNE
#corpo {
width:100%;
position: relative;
}
#c1 {
position:absolute; top:0; left:0;
width:25%;
}
#c2 {
position:absolute; top:0; left:25%;
width:50%;
}
#c3 {
position:absolute; top:0; left:75%;
width:25%;
}

LE TRE COLONNE
Il blocco div#corpo è posizionato in modo relativo, in modo da essere il riferimento per il posizionamento dei tre blocchi in esso contenuti, div#c1 , div#c2 e div#c3 , posizionati in modo assoluto
Per div#corpo è stata specificata una larghezza pari al 100% (questo in teoria non occorre ma corregge un difetto di IE/Win)
I blocchi hanno una larghezza totale pari al 100%. Ciò non costituisce un problema poiché ognuno di essi si comporta indipendentemente dagli altri
La larghezza dei blocchi e il valore della proprietà left sono tali da permettere il posizionamento dei blocchi senza sovrapposizioni

LE TRE COLONNE
A questo punto è possibile aggiungere dei bordi senza preoccuparsi del box model (entro certi limiti) poiché eventuali aggiunte alla larghezza dei box sono “assorbite” dal posizionamento assoluto
Per distanziare il testo dalle colonne si può ancora ricorrere al metodo del padding nei paragrafi
SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO #c1{ border-right:1px dotted #900; } #c2{ border-right:1px dotted #900; }

SECONDA PARTE CENTRARE UN BOX NELLA PAGINA

CENTRARE UN BOX NELLA PAGINA
Uno dei problemi che spesso si incontrano coi CSS è l’ apparente difficoltà di centrare un box nella pagina o in un box contenitore
In base alle specifiche CSS, per posizionare un blocco al centro della pagina è sufficiente specificare il valore auto per i margini laterali: #box { margin : 1em auto 1em auto }
Purtroppo, le vecchie versioni di Internet Explorer per Windows hanno un modo diverso di centrare il box che richiede di impostare al valore center la proprietà text-align
SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA

Questa originalità di Internet Explorer ha però un duplice effetto negativo:
È necessario utilizzare del codice ridondante per supportare le vecchie versioni di Internet Explorer
Chi affronta i CSS le prime volte, può “istintivamente” provare a centrare un box attraverso la dichiarazione text-align:center . Dato che IE/Win (versione 6 e precedenti) risponderà secondo le aspettative di chi realizza il codice, in quest’ultimo spesso nasce una duplice idea errata: « i box si centrano con text-align , ma Mozilla non è in grado di centrare il box »
Si noti che la proprietà text-align è specifica per il testo, dunque il comportamento di Internet Explorer è del tutto arbitrario

In pratica, per centrare un box nella pagina è necessario il seguente codice: body { text-align : center; } #box { margin : auto; text-align : left; }
Se il box da centrare ha una larghezza espressa in percentuali può essere sufficiente agire sui margini laterali del box o il padding del box contenitore: body { padding : 10% 0 } box { /* non è necessario impostare la larghezza */ } ovvero box { width : 80%; margin : auto 10% }

SECONDA PARTE FORMATTARE LE LISTE DI LINK  MENU

FORMATTARE LE LISTE DI LINK  MENU
Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di collegamenti:
<ul>
<li><a href="…">Collegamento 1</a></li>
</ul>
Tuttavia, il classico aspetto delle liste rende poco “attraente” un menu realizzato in questo modo
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

Per ottenere un menu verticale dall’aspetto più accattivante a partire da una lista, come prima cosa dovremo letteralmente eliminare la formattazione “a lista”
ul { margin:0; padding:0; }
li { display:inline; }

Quando si usano i CSS per gestire un menu di collegamenti è possibile sfruttare le pseudo-classi a:link , a:visited , a:hover , a:focus , a:active per creare effetti roll-ove r senza utilizzare il javascript , con ovvi vantaggi
Avendo eliminato le varie proprietà della lista, per fornire l’aspetto desiderato al menu dovremo agire direttamente sui tag <a> e le loro pseudo-classi

MENU VERTICALI
Per realizzare menu verticali, oltre alle regole precedentemente viste, sono utili le seguenti ulteriori regole:
a { display:block; padding:5px 1em }
Tramite display:block i link diventano dei blocchi, dunqe sono cliccabili per tutta la loro area
Tramite il padding verticale si aumenta l’area cliccabile verticale
a:link,a:visited{text-decoration:none}
Spesso nei menu la sottolineatura dei link non è necessaria, anzi risulta spesso antiestetica ed evidenzia un’area inferiore a quella effettivamente attivabile

MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE
ul#tipo1 {
border:1px solid #900;border-top:none;
}
#tipo1 a {
border-top:1px solid #900;
}
#tipo1 a:link, #tipo1 a:visited {
background:#FFC;color:#000;
}
#tipo1 a:hover, #tipo1 a:focus, #tipo1 a:active {
background:url(freccetta.gif) #EEE right center no-repeat;color:#900;
}

MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE
I collegamenti appaiono in un elenco verticale separati da delle linee orizzontali
I collegamenti sono di colore nero su sfondo ocra
Al passaggio del mouse, lo sfondo diventa grigio chiaro, il testo si accende di colore rosso e sulla sinistra appare un’icona rappresentante un freccia
L’immagine non viene pre-caricata
Per pre-caricare l’immagine ed evitare un piccolo ritardo al momento della sua prima comparsa è sufficiente porla come sfondo di ul#tipo1 : ul#tipo1 { background: url(freccetta.gif) no-repeat; }
Così facendo, l’immagine sarà caricata poiché deve essere posta come sfondo di ul#tipo1 . Tuttavia l’immagine sarà coperta dallo sfondo dei link stessi

MENU VERTICALI: EFFETTO PULSANTE
#tipo2{ border:1px solid #333; }
#tipo2 a:link,#tipo2 a:visited{
border:3px solid #EEE;
background:#EEE;
color:#000;
}
#tipo2 a:hover,#tipo2 a:focus{
border:3px outset #999;
background:#FFF;
color:#900;
outline-style: none;
}
#tipo2 a:active{
border:3px groove #333;
background:#DDD;
color:#f00;
}
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU click*

MENU VERTICALI: EFFETTO PULSANTE
In questo caso, sono stati sfruttati tre differenti tipi di bordo per avere:
uno stato di riposo
uno stato di selezione
uno stato di attivazione
Al passaggio del mouse, tramite la dichiarazione border:3px outset #999 , il collegamento assumerà l’aspetto di un pulsante
Al momento dell’attivazione del collegamento, tramite la dichiarazione border:3px groove #333 , il collegamento assumerà l’aspetto di un pulsante premuto
Agendo sul colore dei link e sugli sfondi, l’effetto è completato e perfezionato
Si noti che a riposo il bordo è piatto e dello stesso colore dello sfondo ( border:3px solid #EEE ). Ciò è necessario per evitare che la comparsa di bordi prima inesistenti provochi movimenti nelle voci del menu
Si noti infine che in luogo di agire sullo stile del bordo, è possibile agire sul colore dei singoli lati di un bordo piatto, così da avere più controllo sul risultato finale

MENU ORIZZONTALE
Per realizzare menu orizzontali possono essere utilizzati diversi metodi come ad esempio:
tag <a> flottanti
tag <a> posizionati in modo assoluto
tag <a> lasciati come elementi in linea
Il metodo più diffuso e forse meno problematico è quello di utilizzare tag <a> flottanti

MENU ORIZZONTALE
Il codice HTML utilizzato è il seguente:
<ul id="menu">
<li id="primo"><a href="#">Collegamento 1</a></li>
<li><a href="#">Collegamento 2</a></li>
<li><a href="#">Collegamento 3</a></li>
<li><a href="#">Collegamento 4</a></li></li>
</ul>
Al primo elemento della lista è assegnato l’identificatore primo per una più semplice gestione dei bordi

MENU ORIZZONTALE
Il codice CSS utilizzato è il seguente:
ul#menu { margin:0;padding:0; }
#menu li { display:inline; }
ul#menu {
border-top:1px solid #900;border-bottom:1px solid #900;
color:#000;background:#eef;
float:left;width:100%;
}
#menu a {
float:left; padding:5px 15px;
border-right:1px solid #900;
}
#menu #primo a{ border-left:1px solid #900; }
#menu a:link,#menu a:visited{ color:#444; background:#eef; }
#menu a:hover,#menu a:focus,#menu a:active{
background:#900;
color:#FFF;
}

MENU ORIZZONTALE
Innanzitutto si inseriscono le regole per azzerare la normale formattazione della lista
I collegamenti associati al menu sono flottanti per cui si dispongono uno di fianco all’altro
Tramite i bordi laterali, i collegamenti sono separati tra loro
Per contenere i collegamenti flottanti è bene che il box realizzato dal tag <ul> sia anch’esso flottante. Bisognerà di conseguenza impostarne la larghezza.
I bordi superiori e inferiori sono realizzati tramite il box realizzato dal tag <ul>
Al passaggio del mouse si ha un effetto roll-over agendo su colore e sfondo dei collegamenti

MENU ORIZZONTALE
Se le diverse voci del menu sono associate diverse aree del sito può essere utile una soluzione del tipo “ a scheda ”:
<li class="on">…</li>
#menu li.on a:link,
#menu li.on a:visited,
#menu li.on a:hover,
#menu li.on a:focus,
#menu li.on a:active{
padding-bottom:6px;
background:#FFF;color:#000;
margin-bottom: -1px;
position: relative;z-index: 10;
}
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU class="on"

MENU ORIZZONTALE
Rispetto alle altre linguette, quella attiva ha il valore del padding inferiore impostato a 6px anziché 5px . Il pixel in eccesso viene gestito tramite il margine inferiore
Il colore dello sfondo è il medesimo dello sfondo della pagina per avere l’effetto a linguetta
Il posizionamento relativo e lo z-index servono a gestire correttamente le sovrapposizioni

SECONDA PARTE TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
In alcuni casi può essere utile gestire loghi, banner e grafica in generale sia in forma testuale sia in forma grafica
Esistono tecniche CSS che permettono di sostituire un testo con una immagine senza ricorrere all’apposito tag <img />
Le diverse tecniche consistono nello sfruttare gli sfondi per inserire le immagini e nel nascondere il testo in diversi modi
SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

Si vuole ottenere il seguente risultato: convertire una stringa in una immagine tramite CSS
SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR) ORGANIZZAZIONE LAICA PER LA SALVAGUARDIA DEL PANDA

<h1><span>ORGANIZZAZIONE LAICA PER LA SALVAGUARDIA DEL PANDA</span></h1>
body{
position : relative;
z-index : 1;
}
h1{
width : 130px;
height : 150px;
background : url(panda.jpg);
font-size : 70%
}
h1 span {
position : relative;
z-index : -1;
}

La larghezza del box generato da <h1> è pari alla dimensione dell’immagine ( 130 ×150px )
Per nascondere il testo, si porta l’elemento <span> dietro <h1> attraverso la proprietà z-index
Essendo lo spazio occupato dal testo maggiore dello spazio a disposizione, occorre ridurre la dimensione del testo

Qualora l’immagine non fosse caricata, il testo ritornerebbe visibile
Il testo assolve dunque il compito di testo alternativo
A differenza di una stringa contenuta nell’attributo alt , il testo può essere marcato tramite XHTML

Nel caso ci fosse anche un collegamento interno al tag <h1> tutto sarebbe altrettanto semplice: <h1> <a href="…"><span> … </span></a> </h1>
Si può tuttavia utilizzare <h1> come fosse <body> e <a> come fosse <h1>
L’immagine di sfondo è applicata all’elemento <a> anziché all’elemento <h1>
L’oggetto con z-index=1 è l’elemento <h1> anziché l’elemento <body>
È bene eliminare anche la sottolineatura del collegamento poiché potrebbe comunque apparire sopra l’immagine, essendo l’elemento <span> interno al link a essere posto dietro l’immagine e non il link stesso
h1{
width:130px;
height:150px;
font-size: 70%;
z-index: 1;
position: relative;
}
h1 span {
z-index: -1;
position: relative;
}
h1 a{
height:100%;
width:100%;
display:block;
text-decoration: none;
background:url(panda.jpg);
}

ROLLOVER DI IMMAGINI SENZA JS E SENZA PRELOAD
Associando le tecniche FIR ai collegamenti, è possibile sfruttare le pseudo classi :hover ecc. per creare degli effetti rollover che non richiedono javascript
Inoltre si può evitare di caricare in anticipo i diversi stati dell’immagine sfruttando una sola immagine per i diversi stati
Si voglia ad esempio creare un effetto roll-over col logo della OLSP
In una unica immagine inseriamo due diversi stati della medesima figura (in B&N e a colori )
SECONDA PARTE: ROLLOVER DI IMMAGINI SENZA JS E SENZA PRELOAD

ROLL-OVER DI IMMAGINI SENZA JS E SENZA PRELOAD
h1{
width:130px; height:150px;
font-size: 70%;
z-index: 1; position: relative;
}
h1 span {
z-index: -1;
position: relative
}
h1 a{
height:100%; width:100%;
display:block;
text-decoration: none;
background:url(panda2.jpg);
}
h1 a:hover,h1 a:focus, h1 a:active {
background-position: 0 -150px;
}
SECONDA PARTE: ROLL-OVER DI IMMAGINI SENZA JS E SENZA PRELOAD

SECONDA PARTE NASCONDERE I CONTENUTI IN MODO ACCESSIBILE

NASCONDERE I CONTENUTI IN MODO ACCESSIBILE
Quando si realizza una pagina XHTML + CSS è bene specificare meccanismi di navigazione interna, utili in caso di navigazione con programmi utente dalle ridotte capacità grafiche
Questi meccanismi di navigazione, tuttavia, potrebbero essere inutili o poco chiari a chi usasse programmi utente in grado di interpretare a pieno i CSS
Il modo più banale di nascondere tali contenuti via CSS è usare la dichiarazione display : none associata ad un’apposita classe (ad es. .nascosto ):
<h1>ORGANIZZAZIONE …</h1>
<p class="nascosto">
[<a href="#SKIP" accesskey=".">Salta il menu di navigazione</a>]
</p>
<ul>
<li><a href="#">…</a></li>
…
</ul>
<p><a id="SKIP"></a>Lorem ipsum…</p>
SECONDA PARTE: NASCONDERE I CONTENUTI IN MODO ACCESSIBILE

NASCONDERE I CONTENUTI IN MODO ACCESSIBILE
Tale regola potrebbe essere interpretata anche da screen reader
Tali meccanismi potrebbero essere associati ad access-key che utili indipendentemente dal programma utente
Un metodo migliore per nascondere i contenuti potrebbe dunque essere quello di seguito indicato:
.nascosto{
width:0;height:0;overflow:hidden;
position:absolute;top:-1000em;
}
Le prime tre dichiarazioni dovrebbero essere sufficienti a generare un box dall’ingombro nullo il cui contenuto è del tutto invisibile
Tuttavia alcuni browser richiedono anche le ultime due dichiarazioni che portano il box totalmente al di fuori dalla finestra del browser
SECONDA PARTE: NASCONDERE I CONTENUTI IN MODO ACCESSIBILE

SECONDA PARTE FORMATTARE I MODULI

FORMATTARE I MODULI
Nel formattare i moduli sarebbe possibile utilizzare i vari attributi per la gestione dei diversi tipi di campi:
<input type=" text " />
<input type=" password " />
<input type=" radio " />
<input type=" submit " />
…
Attraverso un selettore del tipo input[type='...'] permetterebbe di distinguere i diversi elementi senza ricorrere a classi o attributi id
SECONDA PARTE: FORMATTARE I MODULI

FORMATTARE I MODULI
Tra le cose più utili nella formattazione di un modulo tramite i CSS è l’allineamento fra etichette e campi del modulo
Fra i vari metodi possibili due sono i metodi più semplici:
allineamento tramite box flottanti
allineamento tramite i margini
La struttura XHTML di riferimento è la seguente:
<p><label …>…</label> <input type="text" … /></p>
<p><label …>…</label> <input type="text" … /></p>
SECONDA PARTE: FORMATTARE I MODULI

FORMATTARE I MODULI
Tramite box flottanti
#f1 label {
display:block;float:left;
width:7em;
text-align:right;
padding-right:.5em;
}
Tramite i margini
#f2 label {
display:block;
line-height:1.4em;
height:1.4em; width:7em;
text-align:right;
}
#f2 input {
margin:-1.4em 0 0 8em;
display: block !important;
display: inline;
}
SECONDA PARTE: FORMATTARE I MODULI L’etichetta ha una larghezza e un’altezza noti a priori Il campo, tramite i margini , è spostato in modo da affiancare l’etichetta Hack: Mozilla vuole display:block, ma con IE si avrebbe un errore di formattazione

SECONDA PARTE BANNER ESPANDIBILI CON I CSS

BANNER ESPANDIBILI CON I CSS
Ultimamente si sono visti diversi siti internet con banner pubblicitari che si espandono al passaggio del mouse
Tramite CSS ciò può essere realizzato tramite le solite pseudo-classi del tag <a> , senza Javascript
Le soluzioni più semplici sono almeno 2:
Tecniche FIR, in cui lo stato :hover permette uno spazio maggiore per mostrare lo sfondo/banner per intero
Tramite il tag <img> e la proprietà overflow:hidden del tag <a>
SECONDA PARTE: BANNER ESPANDIBILI CON I CSS

È didatticamente più interessante il secondo metodo:
<div id="banner">
<a href="…"><img src="b.jpg" … /></a>
</div>
<p>Lorem ipsum …</p>
Poiché il blocco contenente l’immagine ( <a> ) dovrà espandersi sopra al testo, è opportuno che questo sia posizionato in modo assoluto e che esista un contenitore di riferimento (anche per la posizione del testo sottostante): div#banner

#banner {
width:468px; height:60px;
position:relative;
}
#banner a:link,
#banner a:visited {
position:absolute;
top:0;left:0;z-index:100;
overflow:hidden;
}
#banner a:hover,
#banner a:focus {
height:240px;
}

Il contenitore ha le dimensioni del banner ridotto ed è posizionato in modo relativo per fornire un riferimento al posizionamento assoluto del link
Il link è posizionato in modo assoluto così da potersi espandere liberamente
Quando il link non è attivato la sua dimensione è pari a quella del banner ridotto. Attraverso la dichiarazione overflow:hidden l’immagine al suo interno (più alta di un fattore 4) viene mostrata solo parzialmente
Quando il collegamento è attivato, l’altezza del link diventa tale da mostrare il banner per intero

SECONDA PARTE EMULARE I FRAME CON I CSS

EMULARE I FRAME CON I CSS
Tramite CSS è possibile riprodurre un’impaginazione simile a quella che si otterrebbe con i frame
La cosa sarebbe relativamente semplice con la dichiarazione position:fixed, che però non è supportata da Internet Explorer
SECONDA PARTE: EMULARE I FRAME CON I CSS

FRAME VERTICALI
<div id="fix">
<ul> … </ul>
</div>
<div id="frame">
</div>
html,body{
height:100%;
margin:0;padding:0;
}
#fix {
position:fixed;
width:160px; height:100%;
overflow:auto;
padding:0 20px;
}
#frame {
position:absolute;
left:200px;top:0;
padding:0 20px
}
SECONDA PARTE: EMULARE I FRAME CON I CSS L’altezza di <html> e <body> è 100% per regolare l’altezza del blocco fisso Il blocco fisso utilizza la proprietà overflow per mostrare i contenuti che non entrassero interamente nella finestra Il secondo blocco è posizionato in modo assoluto per essere indipendente dal blocco fisso

FRAME VERTICALI
Per Internet Explorer è necessario aggiungere le seguenti regole:
html,body{
overflow:hidden;
}
#fix{
width /**/:200px;
position:absolute;
top:0;left:0;
}
#frame{
position:static;
margin-left: 200px;
height:100%; overflow:auto;
}
La prima regola elimina la barra di scorrimento della finestra del browser
La seconda regola posiziona il primo blocco in modo assoluto. Sono ereditate le proprietà sull’altezza e sulla barra di scorrimento. La larghezza è regolata in base al box model errato, ma solo per IE5.x (grazie al commento fra dichiarazione e valore)
La terza regola rende statico il terzo blocco che gestirà autonomamente un’eventuale barra di scorrimento

FRAME ORIZZONTALI
<div id="top">
…
</div>
<div id="frame">
</div>
html,body{
margin:0; padding:0;
}
#top {
position:fixed;
height:3em; width:100%;
line-height: 3em;
}
#frame {
padding:3em 20px 1em 20px
}
SECONDA PARTE: EMULARE I FRAME CON I CSS Poiché il blocco posizionato in modo fisso si comporta come un box posizionato in modo assoluto che però non segue lo scorrimento della pagina, affinché tutto funzioni è sufficiente che il secondo blocco abbia il padding superiore pari all’altezza del blocco superiore

FRAME ORIZZONTALI
Per Internet Explorer è necessario ricorrere a degli script come IE7: http://dean.edwards.name/IE7/

SECONDA PARTE STILI ALTERNATIVI

STILI ALTERNATIVI
Esistono tre tipi di foglio di stile collegato:
Fogli di stile permanenti
Sono sempre attivi
Fogli di stile preferiti: divengono preferiti i fogli di stile a cui è associato un valore per l’attributo title del tag <link/>
Sono attivi al momento di caricare la pagina
Sono disattivati quando l’utente sceglie uno stile alternativo (tramite gli appositi menu dei browser più evoluti)
Fogli di stile alternativi: divengono alternativi i fogli di stile quelli collegati tramite tag tag <link/> cui è associato l’attributo rel="alternate stylesheet" ed un valore per l’attributo title
Non sono attivi al momento di caricare la pagina
Sono attivati quando l’utente sceglie lo stile alternativo

STILI ALTERNATIVI
Esempio: www.zeldman.com
<style type="text/css" media="all">@import "/c/c04.css";</style>
<link rel="alternate stylesheet" type="text/css" media="all" title="darker" href="/c/darker.css" />
<link rel="alternate stylesheet" type="text/css" media="all" title="lighter" href="/c/lighter.css" />

STILI ALTERNATIVI
Per i browser che non supportano gli stili alternativi (come Internet Explorer) è tuttavia possibile usare il Javascript
In rete si trovano decine di script ( http://www.alistapart.com/articles/alternate/ )
Il principio è quello di agire sulla proprietà disabled dell’oggetto <link/> tramite javascript
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a=document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

SECONDA PARTE I CSS E LA LEGGE 04/2004

LEGGE 04/2004 E CSS
Alcuni requisiti della legge chiamano in causa, direttamente o indirettamente, i CSS
L’esempio proposto è stato realizzato tenendo a mente tali requisiti
Un template, tuttavia, è coinvolto, per sua stessa natura, solo in un sotto insieme dei requisiti; questo sottoinsieme comprende anche, ma non solo, requisiti che coinvolgono i CSS.
SECONDA PARTE: ESEMPIO PRATICO

LEGGE 04/2004 E CSS
Requisito n. 1 Enunciato: […] Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l’aspetto semantico. […] evitare di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche di presentazione della pagina […] ricorrendo invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico;
L’enunciato indica implicitamente (rispetto dell’aspetto semantico) e direttamente che per formattare una pagina è bene utilizzare i CSS

LEGGE 04/2004 E CSS
Requisito n. 4 Enunciato: Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.
È bene evitare di affidare ai CSS in generale e al colore in particolare un’informazione.
Se ad esempio si elimina la sottolineatura ai link differenziandoli dal testo solo per il colore si corre il rischio di violare il requisito

LEGGE 04/2004 E CSS
Requisito n. 6 Enunciato: Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto (nel caso del testo) […]
Quando si definisce un colore per il testo (o lo sfondo) è bene verificare quali colori potrebbe ereditare lo sfondo (o il testo)

LEGGE 04/2004 E CSS
Requisito n. 9 Enunciato: Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne.
Il rispetto di questo requisito permette di sfruttare i CSS per formattare al meglio elementi strutturali quali TH o CAPTION .

LEGGE 04/2004 E CSS
Requisito n. 11 Enunciato: Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati.
Un errore piuttosto comune è utilizzare i CSS senza tuttavia aver realmente separato i contenuti dalla loro formattazione: molte pagine realizzate con i CSS fanno un uso improprio dell’elemento DIV trascurando del tutto la struttura della pagina

LEGGE 04/2004 E CSS
Requisito n. 12
Enunciato: La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri.
I CSS sono coinvolti indirettamente; il dibattito si concentra sulla possibilità o meno di utilizzare layout a larghezza fissa.

LEGGE 04/2004 E CSS
Requisito n. 21
Enunciato: […] per facilitare la selezione e l’attivazione dei collegamenti presenti in una pagina è necessario garantire che la distanza verticale di liste di link e la spaziatura orizzontale tra link consecutivi sia di almeno 0,5 em, le distanze orizzontale e verticale tra i pulsanti di un modulo sia di almeno 0,5 em e che le dimensioni dei pulsanti in un modulo siano tali da rendere chiaramente leggibile l’etichetta in essi contenuta.
Coinvolge indirettamente i CSS, ma non è chiaro se la distanza indicata comprenda tutta l’area sensibile del link o solamente il testo

LEGGE 04/2004 E CSS
La verifica tecnica comprende la seguente analisi: 5) i contenuti della pagina siano fruibili in caso di utilizzo delle funzioni previste dai browser per definire la grandezza dei caratteri;
Il punto non è affatto chiaro: vorrebbe indicare di non utilizzare i pixel per dimensionare i caratteri (per il noto problema di Internet Explorer per Windows) tuttavia il testo non afferma ciò.

http://www.constile.org	2631
http://www.ilpiccoloinformatico.it	93
http://constile.org	70
http://www.dozarte.com	39
http://static.slidesharecdn.com	4
http://www.slideshare.net	1
http://translate.googleusercontent.com	1

Introduzione ai css

by gianlucatroiani on Jul 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 2,839

Statistics

Introduzione ai css — Presentation Transcript