/* documentazione breve:
--div: generic block-level element

--layout:
ordine div orientativo:
container
 header
 navigazione
 contenuti
 footer
 extra
 
1colonna monolitico:
-fisso: si fissa width (min 600)
-fluido: varia al variare della larghezza
-elastico: width (in em) ridimensiona con dimensione del carattere (si parte con font-size: 76%;)
pb. footer: altezza minima non vista da explorer (usare child selector), footer sovrappone il testo (si aggiunge un padding-bottom al testo)

2-3colonne con:
-posizionamento (assoluto e relativo); limite: contenuto deve essere più lungo delle altre colonne
-proprietà float (right o left)
larghezza delle colonne secondarie (percentuale, fissa, elastica)  di solito è fissa

2colonne:
-con float: div colonna sec. (es.navigazione) deve essere prima del contenuto!!!
perchè foat signofica fluttuare sul codice sotto (non su quello sopra) (es. float:left;width: 200px;)
se si vuole il footer totale aggiungere clear: right

-con posizionamento assoluto: div colonna sec. (es.navigazione) deve essere dopo il contenuto!!!
in container position: relative; nel contenuto margin-right: 200px; lascia spazio a destra
nel menu position: absolute; right: 0;   width: 180px;
per proseguire il colore del menu, mettere il colore  background-color: #FFCC00; nel container (o immagine con background: url(rightcol.jpg) repeat-y top right lasciando vuoto il colore nel menu)
 
3colonne:
con posizionamento assoluto, per avere sfondi colonne diversi si usa container2

--box model: la larghezza è data da margines+bordos+paddings+contenuto+paddingd+bordod+margind
però ie interpreta diverso: width è il totale per cui margini padding e bordi vengono inclusi nel width
-BoxModelHack:
1)Box-in-a-box: metti il box con pad dentro un box con larghezza div { width: 100px; } div .i { padding: 1em; }

--centrare la pagina con hack per ie (però se la finestra è più piccola taglia)
.contenitore {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -220px;//metà di width
  margin-left: -220px;//metà di height
  width: 440px;
  height: 440px;
}
/*per firefox*/
*>div.contenitore {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 440px;
  height: 440px;
  margin: auto;
}
seno tabelle:
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> 
<tr><td valign="middle" align="center">
<table border="0" cellpadding="0" cellspacing="0" width='440' height='440'>
<tr><td>
...
</td>
</tr>
</table>
</td></tr>
</table> 



--selettori
-selettore multipli
-padding:  padding-top  padding-right  padding-bottom  padding-left (se manca bottom=top se manca left=right)

-font:  <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> 
es.  font: italic bold 12pt/14pt Times, serif 

-background: background-color background-image background-repeat background-attachment background-position;
es. background: white url(sfondo.gif) repeat-x fixed; 

-border: 
selettore {
border-<lato>-color: <valore>;
border-<lato>-style: <valore>;
border-<lato>-width: <valore>;
} oppure
selettore { border-<lato>: <valore width> <valore style> <valore color>; }
border-width: 1px 2px 1px 2px;
border-style: solid;
border-color: black red black red;


-selettore universale: *
-Selettore di elementi (type selector) p {...
-descendant selector div p {color: black;}
-child selector discende direttamente (con un livello)  body > p {color: black;}
-adjacent-sibling selector è adiacente h1 + p {
-attribute selector elementi che hanno attributo o il valore input [ id = "text" ] { 
-selettore speciale class: <p class="testorosso">....</p>  .testorosso {
-selettore speciale id: è univoco!!! <p id="testorosso">....</p>    .testorosso {

--riferimento negli stili:
.nomeclasse {
p.nome_della_classe {
#nome_id {
p#nome_id  {

--pseudo-classi: definiscono ad uno stato di un selettore
a:link {
a.collegamento:link {
:link vuol dire non visitato
:active link selected
:hover passa sopra mouse
:visited visitato

--Pseudo-elementi: 
:first-letter
:first-line
:before o :after   aggiunge testo i immagini prima o dopo h1:before {content: url(immagine.gif);}

-- @-rules
all'interno dell'elemento html <STYLE>:
@import url(foglio_stampa.css) print;
oppure
@media screen { 

-- dimensioni: (sempre senza spazi nè virgolette)
in, cm, mm, pt, pc, 
em (1 em equivale all'altezza media di un carattere per un dato font. E' un unità di misura relativa.)
ex,px (pixel)

-- Ereditarietà
eredità ai discendenti, tranne le proprietà di formattazione del box model (margini, bordi, padding, background)
peso (importanza): 
    * foglio dell'autore
    * foglio dell'utente
    * foglio predefinito del browser
specificità:
tripletta: ID - classe (pseudoclassi) - elemento definisce il numero di ordine (1-0-0 > 0-0-2)

--cascade
1. Per prima cosa controlla il target stabilito con l'attributo media o con dichiarazioni equivalenti. Scarta quindi tutti gli stili riferiti alla stampa o ad altri supporti. Allo stesso tempo scarta tutte le regole che non trovino corrispondenza negli elementi strutturali del documento.

2. Comincia ad ordinare per peso e origine secondo le regole viste sopra. C'è un CSS definito dall'autore? Userà quello. Altrimenti verificherà la presenza di un foglio di stile utente e in sua assenza applicherà le sue regole stilistiche predefinite.

3. Quindi calcola la specificità dei selettori e in caso di conflitto tra regole usa questo criterio di prevalenza.

4. Se non ci sono conflitti o se peso, origine e specificità coincidono, viene applicata la regola più vicina all'elemento nel codice del documento. L'ordine, se le dichiarazioni degli stili sono fatte nell'ordine più corretto e logico, è quindi il seguente: gli stili in linea prevalgono su quelli incorporati che a loro volta prevalgono su quelli collegati.

Larghezza ed elemento contenitore
Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. Quest'ultimo è l'elemento che racchiude il box. 

--colore
black | navy | blue | maroon | purple | green | red | teal | fuchsia | olive | gray | lime | aqua | silver | yellow | white
#RRGGBB o #RGB

-line-height: interlinea
valore numerico. Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l'altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore.
p {line-height: 1.5;}

--table
per separare i bordi in table:
border-collapse:collapse;

per ottenere cellpadding e cellspacing si deve agire anche sulle celle:
table.tbscheda {width:100%; border:0;}
td.tdschedaleft {width:135px; padding:10px;	vertical-align: top;}
td.tdschedaright {padding:10px;	vertical-align: top;}




--Fahrner Image Replacement (FIR)
 <h1><span>Hello world!</span></h1>
 div { background-image:url("hello_world.gif"); background-repeat:no-repeat; height:35px;}
 span {display:none;}
ma non viene letto dagli screen reader,accessibile:
h1 span{display: block;width: 0; height: 0; line-height: 0; /* attribuisce dimensioni nulle */ overflow: hidden; clip: rect(0,0,0,0); /* nasconde il testo */}
--Langridge Image Replacement (LIR)
<h1>testo da rimpiazzare con un' immagine</h1>
h1{
    padding-top: 133px; /*altezza dell' immagine*/
    width: 243px;
    background-image: url(ex1.gif); /*l' immagine*/
    background-repeat: no-repeat;
     overflow: hidden; /*nasconde il testo*/
     height: 133px; /* Hack di Tantek per WIN IE5.x */
    voice-family: "\"}\"";
    voice-family:inherit;
    height: 0;
    }
--Text Indent negativo di Mike Rundle
 text-indent: -9000px;
background: url(bg.gif);

--La Cover-Up span
<h1><span></span>Nome del sito</h1>
h1{
    position: relative;
    width: 300px;
    height: 100px
    }
h1 span{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(...) no-repeat
    }
è la migliore
--rollover
si fa una immagine a 3 stati orizzontale
#menu_secondario a{
    position: relative;
    display: block;
    width: 120px;
    height: 80px;
}
#menu_secondario a span{
    position: absolute;
    width:120px;
    height: 80px;
    cursor: pointer; /*per IE*/
}
#menu_secondario a:hover{
    color: #369; /*per IE*/
		text-decoration:none;
  }
#menu_secondario a:hover span{
    background-position: -130px 0
	}
#menu_secondario a#corrente span{
    background-position: -260px 0
  }	

--scrollbar colorabile (solo ie)
scrollbar-base-color: #7A7C7B;
scrollbar-arrow-color: #000;
scrollbar-track-color: #fff;
scrollbar-face-color: #7A7C7B;
--3d, flat=track
scrollbar-3dlight-color: #fff;
scrollbar-highlight-color: #fff;
scrollbar-darkshadow-color: #fff;
scrollbar-shadow-color: #fff;

  
*/