GUIDA AI CSS
CASCADE STYLE SHEETS

<1> Css: cominciamo
<2> Unità di misura
<3> Incorporare i Css nei documenti Html
<4> I fogli di stile in linea
<5> I fogli di stile incorporati
<6> I fogli di stile esterni
<7> Stile ed effetti su testo
<8> Effetti interattivi sui links
<9> Definire lo sfondo e le proprietà in un documento
<10> Specificare una linea grafica uniforme al sito
<11> Posizionare gli elementi
<12> Le classi
<13> Effetti sul cursore
<14> Stampa di un documento

<1> Css: cominciamo

Il Web, ai tempi della sua nascita, doveva preoccuparsi maggiormente ai contenuti che portava, piuttosto che allo stile con il quale esso veniva presentato.
L'Html vista la sua facilita', era, e ancora e', un partner fondamentale per creare qualunque Web site. E proprio la sua forza maggiore, e' diventata, in questo ultimo periodo, il suo difetto piu' fastidioso.
Quando infatti, il grande pubblico ha cominciato ad accorgersi dell'esistenza della rete, le limitazioni di Html sono diventate una sorta di frustazione per chi, soprattutto professionista del web publishing, si e' dovuto trovare di fronte a limiti statici, aggirabili solamente con espedienti di natura tutt'altro che stilistica, come le tabelle per il layout, le immagini bianche per gli spazi vuoti, la conversione del testo in immagini e quant'altro.
Questi ingombranti aggiustamenti, sono sfociati nella nascita di estensioni di Html, quali Javascript, Vb Script e infine i Cascade Style Sheets, che in italiano significa Fogli di stile a cascata. A cascata, perche' esistono delle regole gerarchiche tra i vari Css (l'acronimo usato per richiamarli) incorporati in un documento.
Queste nuove tecnologie, hanno considerevolmente aumentato la complessita' delle pagine Web, pur rimandendo un limite di flessibilita' ancora notevole e comunque, soffrendo ancora di problemi di interoperabilita' e di barriere per le persone disabili.

All'inizio di questo primo passaggio dicevamo come, l'uso dei Css avesse finalmente aumentato lo stile delle pagine Web. Un normale documento Html infatti, unisce insieme contenuti, struttura e stile.
Proviamo infatti a richiamare una normale riga di testo con font verdana, grandezza 3 e colore blu.

<FONT FACE=VERDANA SIZE=3 COLOR=BLUE>Testo comune</FONT>

Come si puo' vedere, il contenuto (Testo comune) e' accluso allo stile (font, size e color). Se, volessimo modificare il font di un sito formato da 300 documenti, l'operazione, oltre che lunga, potrebbe risultare estenuante.
I Css, pongono rimedio a questo problema perche' separano lo stile dal contenuto.

Fin qui tutto bene, il problema e' dato dal fatto che solo l'ultima generazione dei browser e' compatibile con i Css, e questo potrebbe essere uno dei talloni di achille di questa nuova tecnologia.
Infatti, se si entrasse in una pagina scritta grazie al contributo dei fogli di stile, con un browser non compatibile (quale Navigator 3), si vedrebbero i contenuti mostrati con le impostazioni di default del browser: sfondo bianco o grigio, testo nero con font Times New Roman e grandezza pari a 3.
Su questo inconveniente, consigliamo di soprassedere, per il semplice motivo che sia Explorer 4-5, sia Netscape 4, sono gratuiti e quindi, sono le persone meno al passo con i tempi che si devono aggiornare.
Un'ultima considerazione la meritano i browser pienamente compatibili con i Css. Nonostante siano stati approvati da il W3C (il consorzio per il Web), solo Explorer 4 e superiori ne sfruttano al meglio le capacita'. Navigator 4 e Explorer 3 invece ne interpretano solo una parte, mentre tutti gli altri, quali Navigator 3 e Opera 3.5, non ne apprezzano le potenzialita'.

<2> Unità di misura

• px (pixel - relativo alla risoluzione dello schermo)

• ex (rappresenta la grandezza della lettera x)

• em (rappresenta la grandezza della lettera m)

• percentuale (viene rappresentato da un numero seguito senza spazi dal segno "%". Si riferisce di solito a altri valori ad es. la risoluzione video).
  
  Al secondo gruppo invece appartengono:
  
  

• cm (centimetri)

• in (inches - 2,54 centimetri)

• pt (rappresenta un punto, che equivale a 1/72 in)

• mm (millimetri)

• pc (picas - equivale a 12 pt)
  
  Qui sotto troverai una tabella che converte il normale size Html in punti Css.
  

  size	font-size
  1	8pt
  2	10pt
  3	12pt
  4	14pt
  5	18pt
  6	24pt
  7	36pt

  Anche i colori, per essere espressi necessitano di un sistema che li classifichi. Tale classificazione puo' essere espressa per mezzo di una parola chiave o per mezzo di un valore Rgb. Queste parole chiave, prese dalla palette Windows Vga sono ad esempio: navy, aqua, blue, green, gray, black, yellow, white, teal, purple, red, orange, silver, fuchsia, lime, marron, olive ecc.
  I colori RGB invece possono essere definiti nei seguenti modi:
  
  #RGB - con i moderni browser il # (cancelletto) puo' essere omesso

• #RRGGBB - con i moderni browser il # puo' essere omesso

• rgb(y,y,y) - dove y rappresenta un numero intero compreso tra 0 e 255 (compresi)

• rgb(y%,y%,y%) - dove y ha un valore tra 0.0 e 100.0 (compresi)
  

<3> Incorporare i Css nei documenti Html

• In linea
  
• Incorporati
  
• Esterni
  
  I primi, sono legati a doppio filo con il tag su cui devono agire, i secondi, assegnano un tipo di stile a un intero documento, mentre gli utlimi, possono essere influenti su interi siti web con migliaia di pagine Html.
  Per approfondire le tematiche legate a questi tipi di integrazione dei Css con Html rimandiamo alle apposite puntate di questo tutorial.

<4> I fogli di stile in linea

I fogli di stile in linea, rappresentano una soluzione ottimale per chi volesse attribuire dello stile a uno solo o comunque pochi tags Html.
Non rappresentano infatti, la tanto agoniata divisione tra stile e contenuti. Nell'esempio che verra' mostrato qui sotto, verra' mostrato un tipico foglio di stile in linea:

<FONT STYLE="font-family:tahoma; font-size:10pt; color:green">Testo scritto grazie ai Css</FONT>

Come possiamo vedere, l'eloquente promiscuita' tra stile e contenuti e fin troppo visibile. Utilizzare normale sintassi Html, in questo caso sarebbe stato uguale, se non considerando il vantaggio della compatibilita' con i browser meno recenti. Ecco comunque lo stesso risultato ottenuto con comuni tag Html.

<FONT FACE=TAHOMA SIZE=2 COLOR=GREEN>Testo scritto grazie a Html</FONT>

Ecco i risultati dei due sorgenti a confronto.

Testo scritto grazie ai Css
Testo scritto grazie a Html

Con queste dimostrazioni, abbiamo capito che i Css in linea, negano tutto cio' che abbiamo detto nella prima puntata a proposito della separazione tra stile e contenuti.

<5> I fogli di stile incorporati

I fogli di stile incorporati rappresentano una via di mezzo tra i Css in linea e i Css esterni. I Cascade Style Sheets incorporati infatti, separano lo stile dai contenuti, ma, essendo acclusi ai tag <HEAD> e </HEAD>, non possono influenzare un intero sito web o anche solo piu' documenti.
Questi fogli di stile incorporati, come quelli esterni e a differenza di quelli in linea, racchiudono peculiarita' sintattiche che lo distinguono dal comune Html: l'insieme degli attributi e' racchiuso tra "{ }" (si ottegono su Windows premendo Shift+Ctrl+Alt+[ oppure Shift+Ctrl+Alt+]), per separare ogni attributo dal suo corrispettivo valore, e' usato il segno ":", in caso di piu' attributi, vengono separati da ";", gli attributi con piu' termini (come font-size) sono sperati da un "-".

Qui di seguito troverete un esempio di foglio di stile incorporato:

<HTML>
<HEAD>

<STYLE TYPE=text/css>
P { font-size:15px; font-family:verdana; color:green }
FONT { font-size:20px; font-family:arial; color:black }
</STYLE>

</HEAD>

<BODY>

<FONT>RISORSE.NET - scritto con i Css incorporati (di 20px, arial e nero)</FONT>

<BR>
<BR>

<P>Il sito italiano sulle ultime tecnologie per fare web (di 15px, verdana e verde)

</BODY>
</HTML>

Come si puo' vedere, i Css incorporati influiscono sui tag a cui fanno riferimento... in questo caso <P> e <FONT>.
Naturalmente nessuno ci vieta di assegnare altri fogli di stile a diversi tag, come <Hx>, <TD> o qualsiasi altro.
Se si volessero assegnare piu' valori a piu' proprieta', bastera' indicare nel Css:
P, TD { font-face: arial; font-size: 10pt }

In pratica, se volessimo unire tag che abbiano gli stessi valori, bastera' indicarli nello stesso foglio di stile, sperati da una virgola. Gli stessi valori invece, vengono separati da un punto e virgola. Questo, vale anche per i Css esterni.

In conclusione: l'attributo text/css del tag <STYLE> puo' essere omesso e riguarda il formato (MIME) del foglio di stile appena specificato. Sia Explorer che Netscape sono compatibili con questo formato. Un altro formato, e' text/jass e riguarda i Css in Javascript.

<6> I fogli di stile esterni

Questo tipo di fogli di stile, rispecchia pienamente la caratteristica dei Css di divedere lo stile dai contenuti. Essi infatti, sono depositati in un solo file con estensione .css e richiamati con una semplice riga di codice da tutti i documenti Html a cui fanno riferimento.
Inutile quindi sottolineare il vantaggio che se ne trae dal massiccio uso che se ne puo' fare. Con un'unica modifica, si potrebbe riflettere su tutto il sito il risultato di tale accorgimento.

Ma vediamo come creare un foglio di stile esterno:

• Aprire il Blocco Note di Win9x/Nt o 2000 (o qualunque editor di testi) e digitare all'interno di essi il foglio di stile, come abbiamo visto nel passo dedicato ai Css incorporati.

• Nel caso usaste Blocco Note, dal primo menu in alto a sinistra (File) scegliere la voce "Salva" o anche "Salva con nome...". Apparira' una finestra di dialogo con in basso due spazi di input; nel primo digitare un nome qualsiasi seguito dall'estensione .css (ad esempio: layout.css). Nel secondo campo, lasciare tutto invariato (va bene anche se c'e' indicato Documenti di testo).
  
  Una volta eseguite queste semplici operazioni, e' necessario richiamare il file contenente il foglio di stile nelle nostre pagine Html. E' necessario inserire tra i tag <HEAD> e </HEAD> la riga:
  
  <LINK REL="stylesheet" TYPE="text/css" HREF="layout.css">
  
  La sintassi di questa riga di codice e' qui brevemente spiegata:
  Link: indica che c'e' un collegamento
  Rel: identifica con che tipo di file esiste il collegamento
  Type: il tipo di formato
  Href: il percorso del file
  

<7> Stile ed effetti su testo

• block (default) l'elemento è visibile - inserisce un ritorno a capo prima e dopo l'elemento.

• inline non viene inserito alcun ritorno a capo, ne'prima ne' dopo l'elemento.

• list-item simile al block, con l'unica differenza che viene aggiunto un marcatore ad ogni elemento.

• none nasconde l'elemento.
  <STYLE>
  p { display: inline }
  </STYLE>
  

Utilizzando molto i fogli di stile, si potrebbe avere la tentazione di utilizzare un font atipico, che con molta probabilita' non sara' presente nel computer del client (l'utente che accede al sito). Normalmente, in caso di font insesistente, il browser utilizza il Times New Roman, carattere di default per tutti i pc. I Cascade Style Sheets invece permettono di installare, durante il caricamento della pagina, un particolare font, utilizzando la dicitura:

<STYLE>
@font-face { font-family:NomeFont; src:url(http://www.tuosito.it/nomefont.eot); }
</STYLE>

Tutti gli attributi e gli esempi che vi abbiamo appena mostrato, sono utilizzabili su tutto un documento (Css incorporati) o su un intero sito Web (Css esterni). Alcuni attributi pero', e consigliabile applicarli solo ad alcune porzioni di testo racchiuse in un certo tag (Css in linea).
Per esempio, l'attributo text-transform, a seconda del valore che assume, puo' rendere maiscucole tutte le lettere del testo, oppure solo le prime di ogni parola o ancora tutte minuscole.
Naturalmente, un attributo di questo genere non e' utilizzabile in un intero sito web, perche' ci potrebbe sempre essere la necessita' di utilizzare o meno una lettera maiuscola. Potrebbe pero' risultare utile nel caso in cui si avesse la necessita' di avere un blocco di testo maiuscolo, anche solo per evidenziarlo dal resto della pagina.
Vediamo dunque di analizzare questi restanti attributi per il testo.

Text transformation
Come abbiamo detto prima, varia i caps di un blocco di testo. I valori che puo' assumere sono:

• baseline (default)

• top

• super

• bottom

• middle

• text-top

• sub

• text-bottom

• percentuale Calcolata in base al valore della proprieta' line-height. Sono accettati valori negativi.
  Per esempio:
  img { vertical-align: bottom }
  

<8> Effetti interattivi sui links

• LINK NON SOTTOLINEATO
  Cominciamo eliminando la comune sottolineatura ai link ipertestuali. Sia Explorer che Netscape 4, permettono di eliminare la sottolineatura ai collegamenti. Ecco come fare.
  
  <STYLE>
  A:link, A:visited { text-decoration: none }
  </STYLE>
  

• LINK NON SOTTOLINEATO AL PASSAGGIO DEL MOUSE
  E' uno degli effettipiu' aggrazziati tra quelli che vi presenteremo. Elimina la sottolineatura solo quando ci si passa sopra con il mouse. Invertendo i valori underline con none si otterra' l'effetto contrario.
  
  <STYLE>
  A:link, A:visited { text-decoration: underline }
  A:hover { text-decoration: none }
  </STYLE>
  

• LINK SOPRALINEATO AL PASSAGGIO DEL MOUSE
  Essendo un effetto poco usato, potrebbe diventare la peculiarita' del vs sito web. Anche in questo caso, invertendo i valori overline e none, si otterra' un effetto opposto.
  Ecco come fare:
  
  <STYLE>
  A:link, A:visited { text-decoration: overline }
  A:hover { text-decoration: none }
  </STYLE>
  

• LINK CON CAMBIO DI COLORE AL PASSAGGIO DEL MOUSE
  Una volta che il mouse passa sopra il link, questo cambia di colore. Il colore puo' essere espresso sia in valori esadecimali (per es. #000080) sia in inglese (navy). Ecco il codice:
  
  <STYLE>
  A:link, A:hover { color:navy }
  </STYLE>
  

• CAMBIO DEL COLORE DI SFONDO AL PASSAGGIO DEL MOUSE E QUANDO IL LINK DIVENTA ATTIVO
  E' possibile impostare un colore di sfondo ai link, anche solo quando si passa sopra con il mouse.
  
  <STYLE>
  A:link, A:visited { background:green }
  A::hover { background:yellow }
  A:active {background:red }
  </STYLE>
  

<9> Definire lo sfondo e le proprietà in un documento