Nell'articolo odierno verrà trattato il tema del "collegamento" tra i fogli di stile e le pagine HTML. Pur essendo due "oggetti" differenti, possono rimanere separati ma "lavorare" insieme per presentare a video la formattazione delle pagine web.
Si vedrà quale metodo usare per collegare i CSS ai documenti HTML, cioè se avere un Foglio di stile inline, incorporato oppure esterno. Sarà spiegato, attraverso alcuni esempi, la sintassi appropriata per definire ciascuno di questi tre metodi e quando utilizzarli.
Stili inline
Gli stili inline costituiscono il metodo più semplice per collegare gli stili agli elementi html. Un esempio è il seguente:
<h1 style= "color: blue">Lorem ipsum dolor sit........</h1>
Il valore dell' attributo style consta di una dichiarazione di stile CSS "color: blue".
Apparte questa sintassi, utilizzare l' attributo style è la stessa cosa che usare qualsiasi altro attributo HTML. L'esempio seguente è un frammento con il quale, ormai, si ha parecchia familiarità; esso stabilisce il colore bianco per uno sfondo:
<body bgcolor="#fff">Contenuto della pagina.......</body>
Usando gli stili inline, la stessa istruzione verrebbe scritta in questo modo:
<body style="background-color: #fff">Contenuto della pagina.......</body>
L' attributo style è molto più "potente" di quanto è stato visto in questi frammenti di codice; esso permette di definire tutte le proprietà di stile che si desiderano, ognuna delle quali verrà applicata all' elemento ed ai suoi "figli", secondo le regole di ereditarietà. Vediamo l'esempio seguente:
<h1 style="color:blue; background:white; font-family:Verdana,sans-serif; font-size: 1em; margin: 10px; padding:0px"> Lorem ipsum dolor sit amet......... </h1>
L'attributo style rappresenta un miglioramento rispetto all' uso scorretto del codice che, ancora oggi, viene molto usato, e cioè <font>. Però adottare gli stili inline con l' attributo style limita di molto la riutilizzabilità degli stili CSS. Rende anche inutilizzabili stili all' interno dello stesso documento. Quando avremo visto i vantaggi dei fogli di stile incorporati ed esterni, gli svantaggi dei CSS inline diventeranno ancora più evidenti.
Fogli di stile incorporati
I Fogli di stile incorporati offrono tutte le potenzialità di rappresentazione di quelli inline, ma permettono di sfruttare molti vantaggi dei CSS. L' elemento di stile incorporato permette di inserire le regole nell' intestazione della pagina; il tag <head> può contenere qualunque numero di dichiarazioni. I fogli di stile incorporati hanno il seguente aspetto:
<head>
<style type="text/css" media="screen">
body {
background-color:white;
color:#000;
}
a {
color:red;
}
</style>
</head>
Da questo esempio di codice si può vedere che le regole CSS sono inserite nel tag style. Questo elemento ha cinque attributi possibili, di cui uno obbligatorio e quattro facoltativi:
type è obbligatorio; media, title, lang e dir facoltativi. Lang e dir sono attributi html globali, non molto rilevanti per l' elemento <style>. L' attributo type, che ha valore di MIME type, è sempre richiesto. L' attributo media viene usato per specificare il "media" di destinazione per gli stili contenuti nell' elemento <style> a cui si applica l' attributo.
Fogli di stile esterni
I Fogli di stile esterni offrono tutta la comodità del riutilizzo del codice e non solo; danno anche la possibilità di essere condivisi da molti documenti. Infatti un solo sito, per esempio di 100 pagine, potrebbe avere un solo foglio di stile CSS. Inoltre vengono scaricati solo una volta dal browser e memorizzati nella cache, così le pagine che usano lo stesso foglio di stile non necessitano di doverli scaricare di nuovo. Esistono due metodi per collegare fogli di stile ai documenti XHTML: attraverso l' elemento link e la direttiva @import. Un' ultima cosa da dire sui fogli di stile esterni: essi possono essere compilati con qualsiasi editor di testo (anche il Blocco Note) e vanno salvati con estensione .css.
Elemento <link>
Il metodo principale e più usato per collegare un foglio di stile esterno ad un documento XHTML è l'elemento <link>, scritto in questo modo:
<link rel="stylesheet" href="/FoglioDiStile.css" type="text/css" />
Quando si usa <link> per collegare un foglio di stile esterno, sono richiesti tre attributi: href, rel e type. Oltre a questi, l' attributo title ha un ruolo particolare nel definire fogli di stile persistenti e preferiti e l' attributo media specifica il media di destinazione.
La direttiva @import
Oltre all'elemento <link>, i fogli di stile esterni possono essere inclusi usando anche la direttiva @import. A differenza di <link>, @import fa parte dei CSS. Ciò significa che deve essere usato all' interno di un foglio di stile già presente, che sia esso incorporato, esterno collegato tramite un elemento <link> o esterno collegato ad un altro foglio di stile esterno con la direttiva @import. All' interno di un foglio di stile possono essere usate numerose regole @import, ma tutte devono essere posizionate in alto al foglio di stile, prima che venga specificata qualsiasi regola. L' esempio che segue, mostra un foglio di stile importato in un foglio di stile incorporato:
<head>
<style type="text/css">
@import url(FoglioDiStile.css);
body {
font-family:sans-serif;
}
</style>
</head>
Qualsiasi regola che appare nei fogli di stile incorporati dopo la regola @import avrà la precedenza nella concatenazione delle regole interne al foglio di stile importato. Si consideri, per esempio, che il foglio di stile importato FoglioDiStile.css, abbia una regola come questa:
body{
font-family:serif;
}
In questo caso, la regola che segue @import ha la precedenza e il testo del body avrebbe un carattere sans-serif.