Introduzione ai CSS - Associare il foglio di stile al documento

Wednesday 21 November 2007 Marco Bertoni, ultimo aggiornamento: Tuesday 19 August 2008.

Esistono differenti metodi per associare un foglio di stile ad un documento.

Fogli di stile esterni

Un foglio di stile esterno è un file testuale esterno al documento, contenente esclusivamente le regole CSS da applicare.

Esso è associato al documento utilizzando l'elemento HTML link, posto all'interno dell'elemento head:

<link rel="stylesheet" href="stile.css" type="text/css" media="screen" />

I file di testo collegati hanno l'estensione .css.

Gli attributi dell'elemento link specificano rispettivamente:

La relazione che esiste tra il documento indicato dall'attributo href e il documento contenente l'elemento link, in questo caso stylesheet (foglio di stile).
L'indirizzo del foglio di stile da includere (l'URL assoluto o relativo).
Il tipo MIME del foglio di stile collegato: text/css.
L'attributo media consente di indirizzare fogli di stile a dispositivi differenti, nel nostro esempio screen (schermo).

Fogli di stile incorporati

In questo caso le regole sono poste all'interno del documento HTML stesso e, precisamente, come contenuto dell'elemento style, figlio di head:

<head>
<style type="text/css" media="screen">
/*<![CDATA[*/
p { font: 12px/1.5em Arial, Helvetica, sans-serif; }
/*]]>*/
</style>
</head>
<body>

Fogli di stile in linea

Negli stili in linea le dichiarazioni sono direttamente associate all'elemento che influenzano utilizzando l'attributo style di HTML:

<h1 style="color: blue;">Titolo di primo livello</h1>

La separazione del contenuto dalla presentazione, ottenuta grazie all'utilizzo di CSS e HTML, è vanificata sia dalla presenza di marcatori e attributi presentazionali deprecati – o marcatori strutturali usati in modo improprio – sia dall'utilizzo di stili in linea.

Utilizzando gli stili in linea è "come se" si utilizzassero elementi presentazionali. Gli stili in linea dovrebbero, quindi, essere sempre evitati.

La regola @import

Un foglio di stile esterno può essere importato all'interno di un CSS incorporato utilizzando la regola @import:

<style type="text/css">
@import url("http://www.miosito.com/css/stile.css");
</style>

Importare un foglio di stile consente di nasconderlo completamente ai browser IE 3 e 4, Netscape 4 per Windows e IE 4.01 e 4.5 per Mac. Approfondimento.

Anche con la regola @import è possibile impostare il dispositivo di destinazione:

<style type="text/css">
@import url("stile.css") projection, tv;
</style>

Ma IE 7 e le versioni precedenti non supportano i selettori di media nelle regole @import e ignoreranno l'intera regola.

Fogli di stile alternativi

Un designer può predisporre fogli di stile alternativi a quello predefinito, selezionabili tramite l'interfaccia del browser. In questo modo l'utente potrà selezionare skin differenti per il sito in questione.

Firefox, per esempio, consente la selezione dal menu Visualizza > Stile pagina. Ma quando ciò non è possibile, a causa della mancata implementazione della funzione da parte del browser in uso (per esempio IE 6), l'unica soluzione è utilizzare metodi alternativi che comportano l'uso di Javascript per ottenere lo stesso risultato.

I fogli di stile alternativi si impostano utilizzando l'attributo rel del marcatore link con il valore alternate stylesheet mentre l'attributo title ha come valore un nome assegnato dallo sviluppatore (che comparirà nel menu dell'interfaccia del browser).

Ecco un esempio di due fogli di stile alternativi differenti collegati alla stessa pagina:

<head>
<link rel="alternate stylesheet" href="stile_alternativo_1.css" type="text/css" title="stile alternativo 1" />
<link rel="alternate stylesheet" href="stile_alternativo_2.css" type="text/css" title="stile alternativo 2" />
</head>

I commenti condizionali

Un metodo per indirizzare fogli di stile esclusivamente ad una o più versioni di IE consiste nell'utilizzare i commenti condizionali.

Il commento precedente causa il caricamento di un foglio di stile solo per le versioni di IE inferiori alla 6.

Questo commento impedisce a IE il caricamento di un foglio di stile.

I commenti condizionali sono interpretati come normali commenti da tutti i browser non Microsoft: il contenuto è quindi ignorato. IE, al contrario, esegue il parsing e applica le condizioni inserite dallo sviluppatore nell'operatore if del commento.

Articolo incompleto, appena posso lo finisco ;)

Tag: CSS, Firefox, introduzione ai CSS, marcatori, Opera, separazione del contenuto dalla presentazione

Questo articolo è stato inviato Wednesday 21 November 2007 alle 16:25 ed è archiviato nella categoria Fogli di stile, Linguaggi di marcatura. Puoi seguire le risposte tramite il feed RSS 2.0. Se lo desideri puoi lasciare un commento, o un trackback dal tuo sito.

Italian webdesign » Archivio blog » Come associare un foglio di stile al documento html dice:

Wednesday 21 November 2007 17:41

[...] interessante ed esaustivo articolo di Semplicemente ci spiega come associare un css ad un documento [...]

sw dice:

Wednesday 21 November 2007 22:23

innanzitutto complimenti per il blog, per il tuo voler condividire il tuo sapere in materie ancora poco trattate tra i blogger italiani, poi vorrei solamente aggiungere piccole precisasioni:
- i vari attributi media: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv;
- fogli di stile alternativi: offrono la possibilità all utente di selezionarli dal browser per sostituire il foglio di stile di default;
- accessibilità vecchi browser: è consigliato l’uso del commento nel testo compreso tra i tag in quanto non supportati dai vecchi browser, in questo modo non verrà visualizzato il testo al loro interno,

Marco Bertoni dice:

Wednesday 21 November 2007 22:42

Ciao! Grazie per il tuo commento, sei il primo che risponde all’appello (spero non l’ultimo ;)).

Dunque, per ciò che riguarda i differenti media saranno trattati in modo approfondito in un prossimo articolo.

Hai ragione devo aggiungere due righe sui fogli di stile alternativi.

Per ciò che concerne i commenti negli esempi preferisco basarmi sulla sintassi XHTML e inserire le sezioni CDATA. Però potresti argomentare più approfonditamente il tuo punto di vista (mi sembra un argomento interessante).

Gioacchino Poletto dice:

Tuesday 27 November 2007 16:44

Caro Marco, come sempre preciso ed esaustivo.
Una cosa:
visto che hai considerato i diversi comportamenti del codice in rapporto al browser, io dedicherei un minimo approfondimento ai codici condizionali (/*<![CDATA[*/ ), molto utili per poter gestire l’aspetto della pagina in presenza di diversi browser.
Perché, come tu mi insegni, non sempre i comportamenti che noi settiamo in un foglio di stile, sono universali…

Tuesday 27 November 2007 17:39

Ciao Gioacchino, immagino tu ti riferisca ai commenti condizionali per IE … hai ragione, aggiungerò all’articolo una sezione su questa tecnica :)

Mario Farina dice:

Thursday 17 January 2008 11:28

Ciao Marco! Come vedi, promessa mantenuta… :)
Da neofita mi permetto di suggerirti di aggiungere una piccola sezione su come personalizzare in modo semplice ed accessibile le pagine dei social network. Ormai sul web proliferano i vari Myspace e Live Spaces che invogliano gli utenti ad abbellire la propria pagina. Spesso, però, le applicazioni web WYSIWYG che consentono di manipolare i CSS generano codici veramente poco comprensibili e comunque “rigidi” nella prospettiva di una eventuale e ulteriore modifica a mano.
Sarebbe molto utile conoscere gli strumenti di base per piccoli interventi “ad hoc”.
D’altra parte non tutti hanno l’ambizione di diventare dei guru come te! :)

Alla prossima

Thursday 17 January 2008 12:07

Ciao Mario, grazie, l’idea è interessante! Ma non sono un guru, anzi i guru italiani mi sono un po’ antipatici :D.

Semplicemente