CSS
home esempi

1. introduzione
cos'è lo stile e perché è importante

2. dove si mette lo stile
in linea, incorporato, esterno
sintassi e classi


3. attributi del testo
font-family, -size, -style, -variant, -weight, -decoration

4. attributi dei margini, bordi e riempimento
margin, padding, border, width, float, clear

5. attributi di sfondo e posizionamento
position, background, visibility, overflow, z-index

6. effetti per MSIE
cursore, immagini, transizione,
scroll bar


7. effetti sui forms
position, background, visibility, overflow, z-index

Attributi dei margini, bordi e riempimenti

I valori di questi attributi sono espressi in pollici (in), centimetri (cm), pixel (px), punti tipografici (pt=1/72inch) o fattore di ingrandimento (em).


attributo margin

BODY { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px }

BODY { margin: 10px 10px 10px 10px }

Si può esplicitare il nome del bordo o lasciarlo implicito.
In quest'ultimo caso si può indicare anche un solo valore (top) e il botton sarà uguale o solo due valori (top e right) e gli altri due saranno uguali.


attributo padding

BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in }

BODY { padding: 10pt 10px 110% 2in }

Si può esplicitare il nome del riempimento o lasciarlo implicito.
In quest'ultimo caso si può indicare anche un solo valore (top) e il botton sarà uguale o solo due valori (top e right) e gli altri due saranno uguali.


attributo border

BODY { border: 12px groove green }

Attributo omnicomprensivo che racchiude tutte le varianti relative alla larghezza, allo stile e al colore del bordo. Assegna gli stessi valori a tutti i lati, annullando gli effetti di altri attributi simili in precedenza inseriti.
Si possono specificare solo alcune varianti e si possono differenziare i bordi sui quattro lati:

BODY { border-width: 10pt 10px 1em 2in }
BODY { border-style: groove }
BODY { border-color: green }

BODY { border-top: dotten green; border-left: dashed black; border-right: solid blue; border-bottom: groove yellow }

BODY { border-top-width: 5px; border-left-width: 4pt; border-right-width: thick; border-bottom-width: 2em }


attributo width

BODY { width: 300px }

dimensione orizzontale.
La parola chiave auto adatta la dimesione al contenuto.


attributo float

BODY { float: right }

specifica l'allineamento del testo contenuto.
I valori possibili sono: left, right e none.


attributo clear

BODY { clear: left right }

specifica l'allineamento del testo contenuto.
I valori possibili sono: left, right e none.