CSS - SPECCHIETTO RIASSUNTIVO
| SINTASSI |
|---|
| Sintassi di base |
| selector {proprietà: valore;} |
| Link dalla pagina HTML a un foglio di stile esterno (in HEAD) |
| <link rel="stylesheet" type="text/css" href="style.css" /> |
| Foglio di stile interno alla pagina HTML (in HEAD) |
| <style type="text/css"> selector {proprietà: valore;} </style> |
| Stile in pagina (in BODY) |
| <tag style="proprietà: valore">
|
| INFORMAZIONI GENERALI | |
|---|---|
| Class | attributo - parola preceduta da un punto ( .nomeclasse ) |
| ID | attributo - parola preceduta da un cancelletto ( #nomeid ) |
| div | tag - contenitore blocco |
| span | tag - contenitore inline |
| color | proprietà css - colore di primo piano |
| cursor | proprietà css - aspetto del cursore |
| display | block; inline; list-item; none |
| overflow | proprietà css - gestione del contenuto se eccede lo spazio
visible, hidden, scroll, auto |
| visibility | visible, hidden |
| FONT | |
|---|---|
| font-style | Italic, normal |
| font-variant | normal, small-caps |
| font-weight | bold, normal, lighter, bolder, numero (100-900) |
| font-size | dimensione del testo |
| font-family | famiglia di font, dal più specifico al più generale |
| TEXT | |
|---|---|
| letter-spacing | spazio tra le lettere |
| line-height | distanza verticale tra le righe di testo |
| text-align | allineamento orizzontale |
| text-decoration | blink, line-through, none, overline, underline |
| text-indent | indentazione della prima riga di testo |
| text-transform | capitalize, lowercase, uppercase |
| vertical-align | allineamento verticale (non supportato da tutti i browser) |
| word-spacing | spazio tra le parole (non supportato da tutti i browser) |
| BOX MODEL | |
|---|---|
 |
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left; |
| BORDER | |
|---|---|
| border-width | spessore del bordo |
| border-style | dashed; dotted; double; groove; inset; outset;
ridge; solid; none |
| border-color | colore del bordo |
| POSITION | |
|---|---|
| float | Rende inline un elemento blocco, facendolo 'fluttuare'
left, right, none |
| clear | Elimina il float degli oggetti intorno all'oggetto
both, left, right, none |
| left | Valore assoluto da sinistra della posizione dell'elemento
auto, valore in px, pt, in, cm |
| top | Valore assoluto dall'alto della posizione dell'elemento
auto, valore in px, pt, in, cm |
| position | static, relative, absolute |
| z-index | Profondità sull'asse Z
per gli oggetti sovrapposti (numero maggiore = sopra)
auto, numero intero senza unità di misura |
| BACKGROUND | |
|---|---|
| background-color | colore di sfondo |
| background-image | immagine di sfondo |
| background-repeat | repeat, no-repeat, repeat-x, repeat-y |
| background-attachment | L'immagine di sfondo si scrolla insieme all'oggetto?
scroll, fixed |
| background-position | (x y), top, center, bottom, left, right |
| LIST | |
|---|---|
| list-style-type | Tipo di marcatore o di numero della lista
disc; circle; square; decimal; lower-roman;
upper-roman; lower-alpha; upper-alpha; none |
| list-style-position | Posizione del marcatore o del numero della lista
inside; outside |
| list-style-image | Immagine da utilizzare al posto del marcatore della lista |
* Le proprietà scorciatoia possono essere usate al posto di più proprietà diverse. L'ordine dei valori da specificare è lo stesso con cui sono ordinati nello specchietto riassuntivo.