Guida H.T.M.L. e C.S.S.

 ul li{list-style:none;}

L'immagine deve esseregrande circa 20/25px e la sua disposizione rispetto alla voce elenco è controllata mediante list-style-position.

 es: ul.li{
 list-style-image:url(percorsofile);
 list-style-position:inside;} 

 .li{ 
    list-style-position:outside;}

 es: ul li{ list-style-type:square;} 

Valore iniziale: auto.
Si applica a elementi di blocco e rimpiazzati.
Non ereditata.

Le percentuali sono calcolate rispetto alla larghezza del blocco contenitore.

A questa si aggiungono padding, bordi e margini dei lati sinistro e destro; pertanto la width è circondata da valori variabili di:

• padding-left; border-left; margin-left
• padding-right; border-right; margin-right

Width è ignorata dagli elementi inline, mentre per quelli rimpiazzati equivale alla misura intrinseca dell'elemento.
Non sono ammessi valori negativi.

 
#article{width:70%; }
 

Valore iniziale: content:box.

content-box: i valori di width e height, fanno riferimento solo all'area del contenuto. I valori di padding, border e eventuale margin, devono essere sommati alla width.

border-box: i valore di width e height, comprendono anche il padding e il bordo, ma non i margini.

  .border_box {
      width: 50%;
      height: 20%;
      border: 1px solid #006;
      box-sizing: border-box;
  }
      

Valore iniziale none. Si applica a tutti elementi di blocco e rimpiazzati non agli elementi inline.

  div#main{
   min-width:640px;
   max-width:960px};
  

Valore iniziale auto.
Si applica a elementi di blocco e rimpiazzati.
Non sono ammessi valori negativi.

Non si applica agli elementi inline, mentre per gli elementi rimpiazzati è la dimensione intrinseca dell'oggetto.

A height (come per width) si aggiungono padding, bordi e margini superiori e inferiori; pertanto la height è circondata da valori variabili di:

• padding-top; border-top; margin-top
• padding-bottom; border-bottom; margin-bottom

 
  div#header{height:5em;
  } 
  

Valore iniziale none.
Si applica a tutti elementi di blocco e rimpiazzati non agli elementi inline.
Non ereditata.

Le percentuali sono calcolate rispetto all'altezza del blocco contenitore.

In questo modo l'elemento può essere più basso del valore indicato ma non più alto.

Allo stesso modo la proprietà min-height stabilisce una misura minima per l'altezza dell'elemento, così questo potrà essere più alto della misura indicata ma non più basso.

 
  div#main{
   min-width:400px;
   max-width:650px};
  

Si applica a tutti gli elementi.
Non ereditato.

Le percentuali si riferiscono alla larghezza del blocco contenitore.

Non sono ammessi valori negativi.
Si possono combinare valori di lunghezza diversi (em, px).

Negli elementi inline non rimpiazzati non influenza l'altezza della riga, l'elemento con uno sfondo in questo caso si estende sulle righe e può sovrapporsi al loro contenuto.

Lo sfondo di un elemento si estende su tutto l'elemento anche sotto l'eventuale bordo.

Il padding, come bordi e margini si può applicare ad ogni singolo lato dell'elemento con le proprietà: padding-top, padding-right, padding-bottom, padding-left.

Come per i margini il padding si applica in senso orario in questo modo:

• un valore: tutti i quattro lati;
• due valori: il primo vale per top e bottom, il secondo per right e left;
• tre valori: il primo per top, il secondo per right e left, il terzo per bottom.

	
  span.vari{
  	padding:5px 1em;
   }
  

strong{
  background:#669900;
  color:#FFF;
  padding:.3em;
  }
 
 

Si applica a tutti gli elementi.
Non è ereditato.

Gli stili di border-style sono: none(predefinito),
hidden,
dashed,
dotted,
solid,
double,
groove,
ridge,
outset,
inset.

Per vedere le differenze tra i diversi
tipi di bordi

#bordo{
border:1px dotted blue;}

 p.multi{
  border-left:1px solid;
  border-right:.2em dashed;
  border-top:5px groove;
  border-bottom:5px ridge;
  }
 

 
 span.bordo{
  borderleft-width:3px;
  border-style:double;
  border-color:red;
 }

Si applica a tutti gli elementi.
Non ereditato.

Le percentuali si riferiscono alla larghezza dell'elemento contenitore

Sono ammessi valori negativi.

Proprietà a sntassi abbreviata, imposta la larghezza del margine complessivo di un elemento o le larghezze di ogni singolo margine laterale.

I margini verticali adiacenti degli elementi di blocco sono ridotti.

Agli elementi inline si possono applicare margini sinistro e destro,(margin-left, margin-right) ma non i margini superiori e inferiori (margin-top margin-bottom).

I margini laterali degli elementi inline e degli elementi flottanti non sono ridotti.

I margini laterali di un elemento quando impostati ad auto, centrano l'elemento nella pagina.

I margini, come bordi e padding si possono applicare ad ogni singolo lato dell'elemento con le proprietà:

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left

I margini, come padding e border, si applica in senso orario in questo modo:

• un valore: tutti i quattro lati;
• due valori: il primo vale per top e bottom, il secondo per right e left;
• tre valori: il primo per top, il secondo per right e left, il terzo per bottom.

 div#container{
 max-width:960px;
 min-width:640px;
 padding:0;
 margin:auto;
 border:.1em solid;
 background:#FFF;
 color:#200;
 }
 

 
  p.tondo{
  border-radius:5px; }
 

• un valore: imposta tutti i quattro angoli;
• due valori: il primo valore per gli angoli in alto a sinistra e in basso a destra e per gli angoli in alto a destra e in basso a sinistra;
• tre valori: il primo valore definisce il raggio per l'angolo in alto a sinistra, il secondo per gli angoli in alto a destra e in basso a sinistra, il terzo per l'angolo in basso a destra.
• quattro valori: rispettivamente, angolo in alto a sinistra, angolo, in alto a destra, in basso a destra, in basso a sinistra.

 
  div.tondo{
  margin:1em;
  padding:1em;
  border-radius; 1em / 1.5em;
  }
 

 
  .bordo{
  border-image:
  url(bordo.png)3px repeat;
  }
  div.bordo{
  border-image:
  url(super_bordo.png)
  50 25 70 / 10 5 15 / 
  4 stretch round;
  }
 

 
  .bordo{
  border-image-sorce:
  url(bordo.png);
  }
 

Valore iniziale: none.

La regola si applica in questo modo: box-shadow: 2px 2px 5px 10px #999;

Il valore inset sposta l'ombra all'interno dell'elemento;
box-shadow: inset 2px 2px 5px 10px #999;

I valori orizzontali, verticali e la dimensione, possono essere negativi, rendendodo l'ombra più piccola dell'elemento:
box-shadow: inset -2px -2px 5px -5px #999;

Possono essere assegnate ombre multiple, separando le varie liste da virgola:
box-shadow: 1px 1px 2px 2px #999,
2px 2px 5px 10px #FFF,
2px 2px 5px 10px #000;

/* solo spostamento (offset) e colore */
.ombra{ 
        box-shadow:  box-shadow: 5px 3px black;
        } 
        
/* in terzo numero aggiunge un angolo di sfocatura */
   .ombra{      
   box-shadow: 3px 3px 5px black; 
   }
         
/* il quarto numero definisce la dimensione dell'ombra */
   .ombra{      
   box-shadow: 0 0 5px 5px black; 
   }
        
/* il quarto valore assegna una dimensione negativa */
   .ombra{      
   box-shadow: 0 5px 5px -3px black 
   }
        
/* colore con assegnato un livello di trasparenza (valore alpha quarto numero rgba 0.5) */ 
    .ombra{     
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); 
    }
        
/* ombra dopiia applicata all'elemento */
    .ombra{     
    box-shadow: 3px 3px 5px black, 3px 3px 5px black; 
    } 
        
/* valori multipli più creativi */ 
   .ombra_multicolor{      
   box-shadow:
        0 0 20px black,
        20px 15px 30px yellow,
        -20px 15px 30px red,
        -20px -15px 30px green,
        20px -15px 30px red; 
        } 
        
/* valore inset, sposta l'ombra all'interno  */
    .ombra_interna{     
    box-shadow: inset 2px 2px 5px black; 
    }
        
/* valori inset e outset possono convivere  */
   .ombra_dentro_fuori{      
   box-shadow: inset 2px 2px 5px black, 2px 2px 5px black; 
   } 

Si applica a elementi non rimpiazzati con display impostato a display:block o inline. I valori della proprietà overflow sono:

• hidden
• visible
• auto
• scroll
• overflow-x
• overflow-y

Gli ultimi due valori sono stati introdotti dalle specifiche C.SS.3

Il valore hidden taglia il contenuto non rendendolo visibile. Il valore visible è il valore predefinito che consente al contenuto che fuoriesce dall'elemento contenitore, di essere visibile, potrebbe essere difficile accedere agli altri contenuti.

il valore scroll forza il browser ad applicare barre di scorrimento orizzontale e verticale al box il cui contenuto fuoriesce.

Il valore auto, forza il browser ad applicare al box una barra di scorrimento quando e dove serve, orizzontale o verticale o entrambe.

Le ultime due consentono al browser di scegliere su quale asse disporre una barra di scorrimento. Overflow-x sul lato orizzontale e overflow-y su quello verticale.

 Questa regola cambia la visualizzazione degli elementi li da blocco ad inline; è utile quando si vogliono affiancare gli elementi li in un menu di navigazione orizzontale;

 li {
  display:inline;
  }

 Questa regola cambia la visualizzazione degli elementi a da inline a elementi di blocco; 
 è utile quando si vogliono disporre verticalmente uno sotto l'altro, gli elementi a in un menu di navigazione verticale;

 a {
  display:block;
  }

Questi due valori block e inline sono i più supportati dai browser, gli altri valori lo sono in modo non omogeneo.

 p.nascosto {
  display:none;
  }

background-image

background-repeat

background-attachment

background-position

Si applica a tutti gli elementi
Non ereditata

 div#header{
   width:100%;
   height:50px;
   background-color:#000090;
   background-image:url(header.png); 
   background-position:5px 10px;
   background-repeat:repeat-x; 
 }
 Questo esempio crea un elemento contenitore #header largo il 100% della finestra del browser e alto 50px. 
 A questo elemento è dato uno sfondo con l'immagine header.png; posizionata 5px verso sinistra e 10px dall'alto partendo dal vertice sinistro della finestra del browser.
 L'immagine si ripete solo in orizzontale. 
 Il colore di sfondo #000090 è una dichiarazione di sicurezza che il browser carica qualora l'immagine non fosse visualizzata. La proprietà dello sfondo è scritta per prima per il principio della cascata 
 così da essere sovrascritta dalle altre regole se vi sono i presupposti.
 
 

 
 div#header{
 width:100%;
 height:50px;
 background:#000090 url(header.png) 5px 10px repeat-x; 
 }
 La stessa regola scritta con la proprietà abbrevita.
 

Si applica a tutti gli elementi
Non ereditata

 background-image:-webkit-linear-gradient(#C00000, #FF99CC);

Possono essere elencati più colori separati da una virgola e può essere indicata la direzione da cui inizia la gradazione: definendo uno dei seguenti valori: left, right, top, bottom o i gradi es: 45deg.

background-image:-moz-linear-gradient(45deg,#C00000, #800, #FF99CC);

Tenendo conto del principio della cascata dei css, l'ultima dichiarazione è quella applicata, le dichiarazione linear-gradient è opportuno siano precedute da una dichiarazione background-color per stabilire uno sfondo per tutti i browser che non la supportano.

Dopo le dichiarazioni con prefisso è definita la diciarazione standard per i browser che già la supportano.

background-image:linear-gradient(bottom,#C00000, #800, #FF99CC); 

 background-image:url(nomefile);

percentuali, lenght, top, center, bottom.

Valore iniziale 0% 0%.

Il primo valore è lo scastamento sull'asse orizzontale il secondo sull'asse verticale.

Si applica ad elementi di blocco e rimpiazzati.
Non ereditata.

Se nessun valore di background-position è stabilito, l'immagine si posiziona sul primo pixel in alto a sinstra, e da lì si estende per la sua dimensione intrinseca all'infinito verso destra e in basso.

Può estendersi lungo l'asse orizzontale si utilizza la proprietà repeat-x (da sinistra a destra) oppure sull'asse verticale (dall'alto in basso), con la proprietà repeat-y; si creano così barre orizzontali o barre verticali.

Le percentuali si riferiscono sia al punto corrispondente dell'immagine sia la punto di inserimento nell'elemento

La ripetizione inizia dall'immagine definita con background-image ed è posizionata con i valori di background.position

L'immagine può estendersi lungo l'asse orizzontale utilizzando la proprietà repeat-x (da sinistra a destra), oppure sull'asse verticale (dall'alto in basso), con la proprietà repeat-y

 .contorno{
 	  outline:1px solid #004000;
      }

Questo esempio crea intorno ad un elemento cui è associata una class="contorno", un filetto spesso 1px di colore verde.

div#invisibile{
 	visibility:hidden;
    }

Questo esempio nasconde l'elemento sul browser

Il valore collapse si usa spesso per rimuovere colonne e o righe dalle tabelle:

table{
     border-collapse:collapse;
     }

a{white-space:nowrap;}

.largo{letter-spacing:.2em;}

 h2{
     word-spacing:.3em;
     }
   h3{
   	 word-spacing:-.3em;
     }

Nata per le immagini, ora questa proprietà si applica a qualsiasi elemento.

Un elemento fluttuante genera un riquadro di blocco.

Quando la proprietà float è applicata ad un elemento inline, è come se a questo fosse attribuita la visualizzazione display:block.

Agli elementi fluttuanti si deve assegnare una larghezza esplicita, in caso contrario l'elemento reso fluttuante tende a restringersi il più possibile.

 
   div#main{
   	   float:left;
           }
   div#sidebar{
   	   float:right;
              }	
   div#footer{
   	   clear:both;
             }
	div#sidebar a{
		float:left;
	    }				 		  
   

img.left{
 	float:left;
    }
  p.after{
  	clear:right;}
  div#footer{
  	clear:both;}

Gli elementi posizionati con proprietà absolute o fixed, generano riquadri di blocco anche se l'elemento è inline (come avviene per la proprietà float), e questi elementi escono dal flusso normale. Un box che contiene solo elementi posizionati con absolute assume un'altezza pari a zero. Un elemento posizionato in modo relativo, subisce uno scostamento dalla sua posizione nel flusso normale, ma il suo spazio non viene chiuso.

Gli scostamenti si realizzano con le proprietà: top, right, bottom, left.

percentuali,(riferite all'altezza del blocco contenitore)

auto (valore iniziale)

Si applica ad elementi posizionati, vale a dire elementi il cui valore di position sia diverso da quello iniziale e predefinito static.

Lo scostamento avviene dall'alto verso il basso.

Per gli elementi posizionati in modo relativo, se top e bottom sono auto, i loro valori sono calcolati a zero; se uno di loro è auto, diventa il negativo dell'altro; se hanno valori espliciti vale a dire il loro valore è diverso da auto, bottom diventa il negativo del valore di top.

Lo scostamento avviene dall'alto verso il basso

percentuali,(riferite alla larghezza del blocco contenitore)

auto (valore iniziale)

Si applica ad elementi posizionati, vale a dire elementi il cui valore di position sia diverso da quello iniziale e predefinito static.

Per elementi posizionati in modo relativo, il valore calcolato di left è sempre uguale a right.

Lo scostamento avviene da destra a sinistra.

div#main{
   	   float:left;
           }
    div#sidebar{
   	   float:right;
              }
	div#main p{
		position:relative;
		top:20px;
		right:25px;
	       } 		 		  
   

percentuali,(riferite all'altezza del blocco contenitore)

auto (valore iniziale)

Si applica ad elementi posizionati, vale a dire elementi il cui valore di position sia diverso da quello iniziale e predefinito static.

Per gli elementi posizionati in modo relativo, se top e bottom sono auto, i loro valori sono calcolati a zero; se uno di loro è auto, diventa il negativo dell'altro; se hanno valori espliciti vale a dire il loro valore è diverso da auto, bottom diventa il negativo del valore di top.

Lo scostamento avviene dal basso verso l'alto

percentuali,(riferite alla larghezza del blocco contenitore)

auto (valore iniziale)

Si applica ad elementi posizionati, vale a dire elementi il cui valore di position sia diverso da quello iniziale e predefinito static.

Per elementi posizionati in modo relativo, il valore calcolato di left è sempre uguale a right.

Lo scostamento avviene da sinistra a destra.

I numeri positivi o più grandi avvicinano all'utente, i numeri negativi o più piccoli allontanano dall'utente.

In pratica con z-index si interviene sulla sovrapposizione degli elementi.

 
	div#main div.rel{
		position:relative;
		top:20px;
		right:25px;
		z-index:100;
	       }
    div#main div.abs{
		position:absolute;
		top:50px;
		right:50px;
		margin-left:200px;
		z-index:10;
	        } 		 		  
      

questo codice fa sì che div.rel copra parzialmente div.abs

Applicata agli elementi il cui valore di display sia table o inline-table.

 
 table{
 		border-collapse:collapse;
        }
 

questo codice collassa i bordi della tabella in un unico bordo

Applicata agli elementi il cui valore di display sia table-caption.
Non ereditata

caption{
 		caption-side:bottom;
		background:#FF9900;
		color:#FFF;
        }
 

questo codice posiziona la didascalia sotto la tabella, avrà uno sfondo arancione e il testo bianco

Si applica agli elementi con valore di display table-cell.

È ereditata

Si applica ad elementi con display table o inline table

  td{
   	vertical-align:top;
    }
 

Non è da confondere con l'attributo valign dell'elemto td

auto (valore iniziale)

Si applica a tutti gli elementi.
Ereditata

 a.esterno{
 cursor:url(../ima/jet.gif), pointer;
	} 

Questo codice imposta come puntatore per gli elementi a cui è associata una classe .esternol'immagine definita nel percorso; separata da (,) la forma che il puntatore deve avere nel caso l'immagine non fosse disponibile.

 .help a:hover{
	cursor:help;
	} 

Questo codice fa apparire a fianco della freccia del puntatore per gli elementi cui è associata la classe .help il simbolo ?