Guida agli attributi css più comuni

Da **rafaman** Lun Giu 06, 2011 1:23 pm

Introduzione

Questa guida si rivolge a chi è alle prime armi con i css. Tratterà gli attributi più utilizzati nelle skin di ForumFree.net.

Intro ai Css

Prima di tutto, cosa sono i css? CSS è l' acronimo di "Cascading Style Sheets", ovvero "Fogli di stile a cascata". Servono per realizzare la "parte grafica" delle pagine web.
Un foglio di stile è composto da un selettore e un blocco di dichiarazione. Che vuol dire? Prendiamo in esame un id molto semplice:

CODICE
elemento {background-color: #FFF; color: #000}

Il selettore in questo caso è

CODICE
elemento

mentre il blocco di dichiarazione è

CODICE
{background-color: #FFF; color: #000}

Il selettore

Il selettore può essere di due tipi:ID e CLASSE.
La sintassi del primo è

CODICE
#nome_del_div{attributi}

mentre le classi sono

CODICE
.nome_della_classe{attributi}

La differenza sostanziale tra id e classe è che una classe può essere ripetuta più volta in un documento html(o php ecc..), mentre un id no. Il discorso fatto finora non serve a molto per quanto riguarda le skin, ma serve a chiarirci le idee su id e classi, in quanto sono entrambi presenti nel foglio di stile di Forumfree/Forumcommunity.

Il blocco di dichiarazione

Il blocco di dichiarazione è composto dagli attributi. Gli attributi servono, appunto, ad attribuire delle qualità all' elemento a cui vengono assegnate. Prendiamo come esempio il seguente codice:

CODICE
class {color: #FFF; background-color: #000}

L' elemento .class avrà il testo di colore bianco(#FFF) e lo sfondo di colore nero(#000). Prima di andare a vedere gli attributi piì utilizzati nelle skin, ecco alcune piccole "regolette":
- Ogni attributo deve finire con un ; (punto e virgola). E' obbligatorio, serve a dividere i diversi attributi.
- Ogni blocco di dichiarazione deve essere aperto da una { (parentesi graffa aperta) ed essere chiuso da un } (parentesi graffa chiusa).
- Se ci sono selettori (id/classi) con attributi identici, possimo "unirli" con una virgola, in questo modo:

CODICE
.class1, .class2 {attributi}

- Se un selettore (esempio: .title2) è contenuto dentro un altro (.stats), quest'ultimo si può personalizzare scrivendo .stats .title2

Altezza e larghezza

Come avrete capito, servono a definire la larghezza e l' altezza di un attributo.L' altezza viene dichiarata con l' attributo height, mentre la larghezza con width.

CODICE
.class {height: 100px; width: 50px}

Il nostro elemento div avrà una larghezza di 50px e un' altezza di 100px.
Altezza e larghezza hanno delle unità di misura che sono:
-cm (centimetri)
-mm (millimetri)
-in (pollici)
-pt (punti)
-pc (pica)
-px (pixel)
-em (lunghezza lettera m)
-ex (altezza carattere x)

Il testo

Ed eccoci giunti a uno degli attributi con i quali si può più spaziare. Esso ha varie proprietà, che sono:

-Font-size:
Indica la grandezza del font.Le unità di misura sono le stesse di altezza e larghezza.In più ci sono anche delle "parole", come xx-small, x-small, small, medium, large, x-large, xx-large.

-Font-family:
Indica il tipo di font(carattere) del testo.La sintassi è :

CODICE
.class {font-family: primofont, secondofont, terzofont}

Il browser, una volta caricato il foglio di stile della pagina, cercherà di usare il primo font.Se non disponibile, userà il secondo e così via.
Quando si imposta un font-family, bisogna sempre ricordare di mettere alla fine il nome di una famiglia generica.Su windows sono 5: * -serif
-sans-serif
-cursive
-fantasy
-monospace

I nomi dei font vanno divisi da virgole, mentre i font con un nome di più di una parola va messo tra virgolette.

-Line-height:
E' il cosidetto interlinea.Indica gli spazi tra le righe di testo.Le unità di misura sono quelle sopra citate per altezza e larghezza.In più si può definire con un semplice numero o una percentuale, anche se è sconsigliato usarla.

-Text-align:
Indica l' allineamento del testo.I suoi valori possono essere:
-left: Allinea il testo a sinistra
-right: Allinea il testo a destra
-center: Centra il testo
-justify: Giustifica il testo

-Text-decoration:
Indica le decorazioni del testo.I valori sono:
-none: Il testo non avrà decorazioni
-underline: Il testo sarà sottolineato
-overline: Il testo avrà una linea superiore
-line-through: Il testo sarà attraversato da una linea orizzontale al centro
-blink: Il testo sarà lampeggiante

-Letter-spacing:
E' lo spazio tra le lettere.Può essere normal, e quindi lo spazio sarà quello di default, o può essere indicato da un valore numerico seguito da un' unità di misura.

-Word-spacing:
E' lo spazio tra le parole.Vale lo stesso discorso di letter-spacing.

-Color:
Indica appunto il colore del testo. La sintassi è di vari tipi:

CODICE
class {color: #RRGGBB}

#RRGGBB sta per RGB, acronimo di Red-Green-Blue.

CODICE
class {color: #559900}

In questo caso, ad esempio, ci sarà una quantita di 55 di rosso, 99 di verde e 0 di blu.In questo caso avremmo anche potuto scrivere

CODICE
class {color: #590}

Perchè quando i valori sono duplicati, si può anche scriverlo una sola volta.

CODICE
.class {color: rgb(0%,30%,40&}

In questo modo indichiamo i colori in percentuali.Le percentuali devono sempre essere precedute da rgb e devono per forza stare tra parentesi tonde.

CODICE
.class {color: rgb(0,0,0)}

In questo modo, abbiamo indicato i colori con unità di misura, tramite valori compresi tra 0 e 255.Anche in questo caso prima del colore va inserito rgb e i colori devo stare tra parentesi tonde.

CODICE
.class {color: red}

Il colore può anche essere inserito per nome.

Una cosa importante è che i colori, quando vengono inseriti in lettere , tranne nel caso in cui specifichiamo il nome del colore(color:red), bisogna scrivere sempre maiuscolo.

-Padding:
Il padding serve a creare degli "spazi" automaticamente.Esso è utile quando si vuole distanziare, ad esempio, il titolo della categoria da un margine del maintitle.La sintassi può essere

CODICE
.class {padding: 4px}

In questo caso, abbiamo messo il padding su tutti e quattro i lati.Invece con

CODICE
.class {padding-top: 4px}

abbiamo messo il padding solo dal margine superiore.Possiamo anche avere padding-left, padding-right e padding-bottom.Le unità di misura sono le stesse di altezza e larghezza.

I bordi

L' attributo border serve, appunto, a dare un bordo ad un elemento.Come il padding, possiamo trovare o semplicemente border, oppure border-top, border-bottom, border-left, border-right.Nell' attributo border, ci sono 3 valori da "settare".Lo stile, lo spessore e il colore.
Per il colore, vale quanto detto sopra per il colore del testo.
Lo spessore ha le stesse unità di misura della larghezza e dell' altezza.
Lo stile può essere:
-none.
-hidden (Equivalente a none)
-dotted
-dashed
-solid
-double
-groove
-ridge
-inset
-outset

Background-color e background-image

Background-color e background-image
Partiamo prima dal background-color.Come avrete capito, serve a dare un colore di sfondo ad un elemento.Vale lo stesso discorso del colore del testo, quindi è inutile ripetersi.

Per quanto riguarda background-image il discorso è diverso.La sintassi di background-image è:

CODICE
.class {background-image: url(indirizzoimmagine)}

Poi, si possono "settare" anche altri valori, come background-attachment, background-position, background-repeat.

-Background-attachment:
Può essere fixed o scroll.Con background-attachment:fixed, quando "scendiamo" in una pagina del forum, lo sfondo rimane fisso.Invece, con background-attachment:scroll, lo sfondo si "muoverà" insieme al forum.

-Background-position:
Può essere top, center, bottom, left, right.Serve a decidere la posizione dello sfondo.Di default, se non si inserisce nessun valore, è top left

-Background-repeat:
I valori possono essere no-repeat, repeat-x e repeat-y.Serve decidere se e in che modo l' immagine di sfondo deve ripetersi.Con no-repeat, lo sfondo sarà presente una sola volta.Con repeat-x lo sfondo si ripeterà in senso orizzontale, invece con repeat-y in senso verticale.

Specifiche CSS2

Specifiche ccs in italiano
(documento del W3C che spiega cosa sono e come si utilizzano i fogli di stile)

crediti: o.c.gdr.forumcommunity.net