I fogli stile

I fogli di stile devono il proprio nome dalla traduzione del termine inglese "Cascading Style Sheets". Si tratta di strumenti di formattazione dei documenti per il Web (HTML e non solo) attraverso i quali è possibile definire lo stile di pagina. In termini concreti con i fogli di stile è possibile:

definire lo stile per il testo (grassetto, corsivo, sottolineato ecc.);
definire i margini del documento;
stabilire l'allineamento del testo;
definire il tipo, la posizione e la ripetibilità dello sfondo;
posizionare in un punto preciso della pagina elementi testuali e d'immagine;
cambiare aspetto al puntatore del mouse;
creare effetti di transizione in entrata o uscita di pagina;
rendere dinamici i link testuali con cambiamenti di colore, sottolineatura e grandezza

Attraverso i fogli stile cambiando un solo file si cambia aspetto a tutte le pagine di un sito; e si rendono indipendenti i contenuti dalla formattazione del documento.

I fogli stile possono essere esterni al documento su cui vanno ad agire o incorporati nello stesso, pur condividendo una sintassi che li distingue dal normale HTML:

gli attributi sono inseriti tra parentesi graffe { }
al posto del segno = vengono usati i due punti :
gli argomenti consecutivi sono separati dal segno ; invece che dalla virgola ,
Gli attributi composti da piu' termini sono separati da un trattino -
Quando un attributo e' considerato proprieta' di un oggetto i trattini si eliminano e le iniziali dei termini diventano maiuscole (per esempio: font-style diventa FontStyle)

Foglio stile in linea

È possibile definire uno stile in un punto qualsiasi del documento, andando ad aggiungere le caratteristiche di stile a qualsiasi altro tag.
Per esempio:
Foglio stile in linea
Questo effetto è stato ottenuto agendo con un foglio stile in linea sul tag <font>.

Foglio stile incorporato

Il foglio stile incorporato identifica i parametri di stile che sono associati a un intero documento, agendo dall'interno dell'elemento <head>..
Gli attributi TYPE e TITLE possono essere utlizzati all'interno del tag <style>. TYPE viene usato per specificare l'identificazione Internet (MIME) che definisce il foglio stile (Tipicamente "text/css") e TITLE può essere usato per fornire un titolo che identifichi il foglio stile, ed è utile nel caso siano presenti più fogli stile.
Per esempio:
<HTML>
<HEAD>
<TITLE>Foglio stile incorporato</TITLE>
"STYLE TYPE="text/css" TITLE="colori luminosi">
BODY { color : white}
P { color : blue;
font-size : 12pt;
font-family : Arial}
H1 { color : red;
font-size : 18pt}
</STYLE>
</HEAD>
Questo definisce un foglio stile per il documento in questione chiamato "colori luminosi".

Foglio stile esterno

I fogli di stile esterni sono quelli che permettono di sfruttare al meglio i vantaggi in termini di controllo della struttura e velocità di manutenzione offerti dai fogli stile.
Ad oggi esistono alcuni editor che permettono un'agevole compilazione dei fogli di stile, che fino a poco tempo fa poteva essere eseguita solo tramite editor di testo, con un notevole dispendio di tempo. I file che contengono i fogli stile hanno estensione .css, e devono essere richiamati all'interno del documento tramite il tag <link>, come descritto nel relativo capitolo, dove è anche richiamata la sintassi.

Attributi governabili tramite i fogli stile

Attributi di testo

font-family	Indica la famiglia di fonts utilizzabili per una pagina. È possibile stabilire un ordine di preferenza, per cui in mancanza del primo font elencato il browser vada a cercare il successivo; per fare questo i nomi delle famiglie di font devono essere separati da una virgola. Una ulteriore alternativa è quella di servirsi di un nome generico di font. Si intendono con questo termine gruppi di font che, seppur non identici, hanno delle peculiarità che li accomunano. In questo modo il browser cercherà il font disponibile sul computer dell'utente, in base all'indicazione del nome generico. I Fogli stile riconoscono 5 categorie di font generici: Serif (es. times new roman), consigliabile per lunghe sezioni di testo ESEMPIO Sans Serif. Tipici gli arial e gli helvetica ESEMPIO Cursive. Font corsivi che imitano la calligrafia umana Esempio Fantasy. Caratteri decorativi come, per esempio, comic sans ESEMPIO Monospace. Questi font hanno la caratteristica che ogni lettera occupa uno spazio identico, a differenza degli altri caratteri in cui lo spazio occupato dalle lettere è proporzionale. Un classico font monospace e' il courier. ESEMPIO
font-size	Questo attributo stabilisce la dimensione del testo. Mentre HTML standard prevede soltanto 7 livelli predefiniti per la grandezza del testo (da font size=1 a font size=7), i fogli di stile permettono un controllo molto più preciso ed elastico, che non soffre di nessuna limitazione. È possibile impostare lo stile in base a cinque diverse unita' di misura: Punti (pt). I punti fanno riferimento esclusivamente allo spazio verticale occupato sullo schermo, mentre la larghezza aumenta proporzionalmente all'aumentare della misura verticale. Pixel (px). Si tratta dei punti presenti su uno schermo, e variano a seconda della risoluzione consentita dal monitor ed impostata dall'utente. Ai pixel si fa riferimento in molti esempi Javascript e per tutte le risoluzioni video consigliate (solitamente 800x600). Pollici (in) Centimetri (cm) Percentuale (%). Unita' di misura svincolata da valori predeterminati e variabili. Il valore percentuale si riferisce alla grandezza di default impostata nel browser ed è variabile da utente ad utente. Dimensionamenti relativi. Vengono identificati in base al dimensionamento di default del browser, e sono definiti come "smaller" e "larger".
font-style	Questo attributo indica lo stile per il font e può essere impostato su diversi valori: normal, si rifà al default del browser italic, testo corsivo: ESEMPIO oblique, testo obliquo verso destra, molto simile all'effetto generato da italic ESEMPIO
font-variant	Questo attributo è simile a font-size, ma se ne differenzia perché assegna uno stile tutto maiuscolo. Se non é disponibile sulla macchina client la versione a maiuscole grandi del font, lo stile userà le maiuscole adattandone le misure. I valori da assegnare sono "normal" e "small-caps".
font-weight	L'attributo font-weight stabilisce lo spessore del font come BOLD per HTML classico. È possibile assegnare a questo attributo 7 differenti valori
text-decoration	Questo attributo consente di abbellire il testo con sottolineature e altri effetti. Può assumere diversi valori: none, underline, italic e line-height. Utilizzando adeguatamente questo attributo è possibile eliminare la sottolineatura dai link, o fare in modo che la sottolineatura appaia solo quando il mouse passa sopra il link.

Attributi dei margini

I fogli di stile permettono di giustificare il testo creando degli elementi visualizzati all'interno di box. Ogni box ha delle proprietà che si possono dividere in tre categorie:

proprietà dei margini che assegnano un bordo esterno al box
proprietà di riempimento che assegnano uno spazio interno al box che separa il contenuto dai margini
proprietà dei bordi che definiscono le linee grafiche intorno al box

I valori di questi attributi possono essere espressi in pollici (in), centimetri (cm), pixel (px), punti (pt) e unita' (em).
Semplificando, vengono create delle finestre indipendenti all'interno della pagina che, oltre agli attributi del testo già visti in precedenza, hanno attributi relativi ai bordi.

margin-left, margin-right, margin-top, margin-bottom	Si tratta di quattro attributi che impostano la distanza tra il box contenente i CSS e gli elementi adiacenti, dai quattro margini. Questi valori visti possono essere definiti mediante il solo attributo margin. Quando viene impostato questo valore, il browser assume come ordine il primo margine in alto (margin-top), il destro (margin-right), l'inferiore (margin-bottom) e il sinistro (margin-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono automaticamente assegnati in base al valore del lato regolarmente impostato.
padding-top, padding-bottom, padding-right, padding-left	Tali attributi indicano la distanza tra i lati del box e gli elementi al suo interno. In altre parole hanno una funzione opposta a quella vista in precedenza per l'attributo margin. E' possibile usare le misure standard (pollici, centimentri, punti, pixel ecc.) o valori percentuali. Come per l'attributo margin, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo padding.
border-top, border-bottom, border-right, border-left	Questi attributi definiscono lo stile e il colore di ogni elemento e vengono impostati con alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset e outset.
border-top-width, border-bottom-width, border-right-width, border-left-width	La funzione di questi attributi è di generare un effetto simile ai bordi delle table HTML. È possibile stabilire misure percentuali o di riferimento (em), oltre a parole chiave quali thin, medium e thick. Come per gli attributi margin e padding, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo border-width.
border-color	Questo attributo definisce i colori dei quattro bordi del CSS nella loro globalità, cioè senza possibilità di stabilire colori diversi per ognuno di essi.
border-style	Questo attributo definisce lo stile dei quattro bordi del CSS nella loro globalità, cioè senza possibilità di stabilire stili diversi per ognuno di essi. I valori sono specificati da alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Gli ultimi quattro valori generano effetti tridimensionali, sempre che il browser li supporti.
border	Si tratta di una sorta di attributo omnicomprensivo di tutte le varianti relative ai bordi, agli stili, al colore e alla larghezza. Assegna gli stessi valori a tutti i lati, annullando gli effetti di altri attributi simili eventualmente inseriti in precedenza.
width	Si riferisce alla larghezza per orizzontale del box. Puo' essere espresso nelle unità di misura già viste. Il valore "auto" permette al box di adattarsi al contenuto degli elementi.
float	Questo attributo ha una funzione simile ad ALIGN in HTML classico. I valori a disposizione sono left, right e none.
clear	Se vengono specificati i valori right o left, gli elementi si dispongono sotto float dal lato specificato. Usando none sono impostati su entrambi i lati.

Attributi dello sfondo

In HTML classico lo sfondo viene impostato all'interno del tag <BODY> attraverso gli attributi bgcolor (per il colore univoco del fondo pagina) e background (per assegnare allo sfondo un'immagine gif o jpg).
Tramite i fogli stile è possibile dotare lo sfondo di nuovi attributi:

color	L'attributo color definisce il colore del testo del documento. ESEMPIO
background-color	Questo attributo determina il colore di sfondo di un determinato stile. La sua funzione è simile al classico BODY di HTML, ma puo' essere avvicinata al colore di sfondo delle tabelle. Viene usato soprattutto per evidenziare alcune parti del documento. Cliccando qui è possibile visualizzare un esempio.
background-image	Ha una funzione simile al background="image.gif" di HTML classico, richiamando un'immagine in formato GIF o JPG caricata sullo sfondo del css. Cliccando qui è possibile visualizzare un esempio.
background-repeat	Questo attributo consente di ripetere l'immagine di sfondo così come accade nel tag <BODY> di HTML. Puo' assumere diversi valori: repeat (l'immagine viene replicata per verticale e orizzontale), repeat-x (replica l'immagine solo per orizzontale), repeat-y (replica l'immagine solo per verticale). Cliccando qui è possibile visualizzare un esempio di repeat verticale o di repeat orizzontale
background-position	I fogli di stile consentono di scegliere un punto di inizio per l'immagine di sfondo diverso dal classico angolo in alto a sinistra. HTML classico, infatti, è impostato perché lo sfondo venga visualizzato dal punto più estremo in alto a sinistra. Con i fogli stile è possibile usare alcune parole chiave per il posizionamento in verticale (top, center e bottom) ed orizzontale (left, center e right). Se sono espresse due coordinate, la prima e' orizzontale e la seconda verticale. Cliccando qui è possibile visualizzare un esempio.
background	Tramite questo attributo generico è possibile definire univocamente i diversi attributi dello sfondo finora esaminati.

Effetti sul testo

Tramite i fogli stile è possibile generare sul testo degli effetti più avanzati di quelli ottenibili controllando solo il parametro <font>:

letter-spacing	Letter-spacing stabilisce la distanza tra le singole lettere all'interno di un documento. I valori sono espressi in misure em. Si tratta di un'unità di misura pari alla grandezza della lettera m. ESEMPIO
text-transform	Questo attributo permette di manipolare le minuscole e le maiuscole del testo grazie a tre parole chiave: uppercase, che rende maiuscole tutte le lettere dell'elemento esempio (la parola in origine è stata scritta in lettere minuscole capitalize, che rende maiuscola solo la prima lettera di ogni parola esempio (anche in questo caso la parola è stata scritta tutta in lettere minuscole) lowercase, che rende minuscole tutte le lettere dell'elemento ESEMPIO (in questo caso la parola era stata scritta in lettere maiuscole)
text-align	Questo attributo ha la funzione di visualizzare il testo in quattro posizioni: left (sinistra), center (centrato), right (destra) e justify (giustificato).
text-indent	Questo attributo definisce la quantità di spazio (espressa in valori assoluti em o in pollici) aggiunta immeditamente prima della prima parola (il rientro).
line-height	L'attributo line-height definisce la distanza verticale tra le varie linee di testo. I valori sono espressi in percentuali o in unità assoluti em. Tali valori sono direttamente proporzionali alla grandezza del testo (font-size).
list-style	La proprietà list-style consente di sostituire i punti elenco standard di HTML con immagini in formato GIF. È possibile applicare tali punti a tutto l'elenco o soltanto ad una parte di questo. Cliccate qui per vedere un esempio

Per un ulteriore approfondimento su questo argomento è possibile visitare il sito del WC3, dove è possibile consultare le specifiche della prima versione e della seconda versione dei fogli stile.