Attributi CSS:
La prima colonna indica l'attributo css descritto, la seconda i valori che può assumere, la terza una breve descrizione.
N.B. Il valore va inserito fra i due punti ed il punto e virgola
Es. attributo: ; diventa attributo:valore;
TESTO:
| Attributo | Valori | Descrizione |
| color: ; |
|
Colore, sia in inglese che in codice ascii. Es. black oppure #000000 |
| text-decoration: ; |
|
Decorazione del testo. |
| text-align: ; |
|
Allineamento del testo rispetto a ciò che lo circonda |
| text-indent: ; |
|
Rientro della prima riga di un testo |
| text-transform: ; |
|
Trasforma rispettivamente in maiuscola, minuscola, maiuscola la prima lettera oppure default (none) per nessun cambiamento. |
| line-height: ; |
|
Altezza riga testo. |
| letter-spacing: ; |
|
Spazio fra le lettere di un testo. |
| vertical-align: ; |
|
Allineamento in verticale del testo rispetto ad un oggetto. |
| white-space: ; |
|
Regola la tabulazione di un testo (gli a capo). Nell'ordine: normal :Lascia dafault browser pre :Scrive come è scritto nel codice html (come <pre> e </pre> in html) nowrap : aspetta il <br> per andare a capo |
| word-spacing: ; |
|
Regola lo spazio fra le parole del testo. normal lascia decidere al browser, altrimenti possiamo inserire un valore (in px, in pt ecc...). |
CARATTERE:
| Attributo | Valori | Descrizione |
| font: ; |
|
font può raccogliere tutti gli attributi dei font senza la loro esplicita dichiarazione. Es. font:italic bold 12px arial; |
| font-family: ; |
|
Descrive il tipo di scrittura da usare. Ne possiamo inserire più di uno, in questo caso se il computer non ha un font in memoria carica il successivo e via di seguito. |
| font-size: ; |
|
Dimensioni del carattere, es. 10px. 10pt. |
| font-style: ; |
|
Scrittura corsiva. |
| font-variant: ; |
|
Tutto in maiuscolo. |
| font-weight: ; |
|
Regola la grandezza del grassetto. Possiamo inserire anche un numero multiplo di 100 fino a 900. |
COLORE e SFONDO:
Non tutti sanno che in <body> si può utilizzare in contemporanea un colore con una immagine (se in generale l'immagine è di misure inferiori alle misure degli schermi pc).| Attributo | Valori | Descrizione |
| background: ; |
|
Può raccogliere tutti gli altri attributi senza una loro esplicita definizione. Esempio:background:#00ff00 url('ciao.gif') no-repeat fixed center; |
| background-color: ; |
|
Colore di sfondo, sia in inglese che in codice ascii. Es. black oppure #000000 |
| background-image: url (...); |
|
Immagine di sfondo, al posto dei punti (...) inserire l'url. Es. "ciao.gif" Se è nella stessa cartella, "icone/ciao.gif" se è in una cartella diversa. |
| background-repeat: ; |
|
Da usare con background-image descrive come posizionare l'immagine di sfondo |
| background-attachment: ; |
|
Descrive se l'immagine di sfondo deve essere fissa oppure no. |
| background-position: ; |
|
Informa il browser dove posizionare l'immagine di sfondo. |
MARGINI:
Applicabile ad ogni oggetto, compreso <body>, in questo caso tutte le pagine o gli oggetti che si riferiranno a questo parametro saranno spostati dai bordi come indicato.| Attributo | Valori | Descrizione |
| margin: ; |
|
Dichiara la distanza dei 4 margini senza la loro singola dichiarazione. Il primo
valore è top, ed a scalare abbiamo right, bottom e left.
Es. margin: 10px 20px 10px auto; |
| margin-top: ; |
|
Inserire un valore numerico. Es. 10px oppure 10pt ..... |
| margin-right: ; |
|
Inserire un valore numerico. Es. 10px oppure 10pt ..... |
| margin-bottom: ; |
|
Inserire un valore numerico. Es. 10px oppure 10pt ..... |
| margin-left: ; |
|
Inserire un valore numerico. Es. 10px oppure 10pt ..... |
POSIZIONE e FORMA:
| Attributo | Valori | Descrizione |
| position: ; |
|
Il tipo di posizionamento rispetto al foglio od altro elemento. Static dafault browser. Absolute indica la posizione rispetto a tutto il foglio (necessita la dichiarazione di left, top, right, e bottom). Relative indica la posizione rispetto alla posizione cha assumerebbe di dafault. |
| top: ; |
|
Distanza dal margine superiore es. 100px 100pt ecc. |
| left: ; |
|
Distanza dal margine sinistro es. 100px 100pt ecc. |
| height: ; |
|
Altezza dell'oggetto se position è absolute. |
| visibility: ; |
|
Visibilità dell'oggetto (hidden=nascosto). Molto utile per alcuni script javascript dove le immagini possono apparire o scomparire). |
| z-index: ; |
|
Priorità di visualizzazione rispetto ad altri oggetti, può anche avere valore negativo. Il numero dipende da quanti oggetti lo possono sovrapporre. |
| overflow: ; |
|
Indica come gestire del testo in esubero se inserito in un blocco
con le misure dei margini e bordi definiti. visibel si allunga il contenitore e mostra tutto il testo hidden nasconde il testo in eccedenza scroll inserisce una barra di scorrimento laterale autodafault browser |
| clip: ; |
|
Con clip possiamo regolare la misura di un oggetto, per esempio lo
possiamo utilizzare se abbiamo inserito un'immagine in una cella di tabella con misure definite
e non vogliamo allargare la cella per esubero misure immagine. Es. clip: 100px 50px 100px 50px; con clip definiamo in ordine top, right, bottom e left dai bordi contenitore. |
ALTEZZE e LARGHEZZE :
| Attributo | Valori | Descrizione |
| height: ; |
|
Altezza dell'oggetto. |
| min-height: ; |
|
Altezza minima dell'oggetto. |
| max-height: ; |
|
Altezza massima dell'oggetto. |
| width: ; |
|
Larghezza dell'oggetto. |
| min-width: ; |
|
Larghezza minima dell'oggetto. |
| max-width: ; |
|
Larghezza massima dell'oggetto. |
MOUSE:
(solo per Internet Explorer):| Attributo | Valori | Descrizione |
| cursor: ; |
|
Prova a passare il mouse sopra le scritte dei valori |