-
Peppe-73
.Introduzione
Questa guida si rivolge a chi è alle prime armi con i css. Tratterà gli attributi più utilizzati nelle skin di ForumFree.net, sono le basi per creare una skyn agli inizi puo sembrare difficile ma con la pratica diventerà semplice.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:CODICEEelemento {background-color: #FFF; color: #000}
Il selettore in questo caso èCODICEelemento
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 sonoCODICE.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:CODICEclass {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 .title2Altezza 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:CODICEclass {color: #RRGGBB}
#RRGGBB sta per RGB, acronimo di Red-Green-Blue.CODICEclass {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 scrivereCODICEclass {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ò essereCODICE.class {padding: 4px}
In questo caso, abbiamo messo il padding su tutti e quattro i lati.Invece conCODICE.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
-outsetBackground-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.
Maggiori dettagli QUI
Qui alcuni dettagli ed un esempio di skyn Link Esterno Link Esterno
.
Home Page
Regolamento
Abilitazione Fans
Guida al Forum
Web