COME ASSOCIARE IL FOGLIO STILE
CSS esterni e interni
È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo editabili anche con il Blocco Note o TextEdit ai quali si assegna l'estensione ".css".
Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento. A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.
Fogli collegati (esterni)
Per caricare un foglio esterno in un documento esistono due possibilità.
regola LINK
La prima che è la più compatibile è e quella che fa uso dell'elemento <LINK>. La dichiarazione va sempre collocata all'interno della sezione <HEAD> del documento HTML:
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>...
- rel: descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. Approfondimenti nella lezione 5.
- href: serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio.
- type: identifica il tipo di dati da collegare. Per i CSS l'unico
- media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale. L'argomento sarà approfondito nella prossima lezione.
Regola @import
Un altro modo per caricare CSS esterni è usare la direttiva @import all'interno dell'elemento <STYLE>:
<style type="text/css" media="screen" title="normale">
@import url(css/prova.css );
</style>
Fogli incorporati (interni)
I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l'elemento <STYLE>. Anche in questo caso la dichiarazione va posta all'interno della sezione <HEAD>:
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type="text/css">
body {
background: #FFFFCC;
}
</style>
</head>
<body>...
Come si vede il codice inizia con l'apertura del tag <STYLE>. Esso può avere due attributi:
- type (obbligatorio)
- media (opzionale)
per i quali valgono le osservazioni viste in precedenza. Seguono le regole del CSS e la chiusura di </STYLE>.
Fogli in linea
L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo style. Esso fa parte della collezione di attributi HTML definita Common: si tratta di quegli attributi applicabili a tutti gli elementi. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente:
<elemento style="regole_di_stile">
Se, ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo:
<h1 style="color: red; background: black;">...</h1>
Le cose da osservare nel codice sono due. Come valore di style si possono dichiarare più regole di stile. Esse vanno separate dal punto e virgola. I due punti si usano invece per introdurre il valore della proprietà da impostare.
Sintassi generale
L'attributo media può accompagnare sia l'elemento <LINK> che l'elemento <STYLE>. Ecco due esempi di sintassi:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<style type="text/css" media="screen">...</style>
Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori possibili per l'attributo:
- all. Il CSS si applica a tutti i dispositivi di visualizzazione.
- screen. Valore usato per la resa sui normali browser web.
- print. Il CSS viene applicato in fase di stampa del documento.
- projection. Usato per presentazioni e proiezioni a tutto schermo.
- aural. Da usare per dispositivi come browser a sintesi vocale.
- braille. Il CSS viene usato per supporti basati sull'uso del braille.
- embossed. Per stampanti braille.
- handheld. Palmari e simili.
- tty. Dispositivi a carattere fisso.
- tv. Web-tv.
Il valore di default è all, usato automaticamente in mancanza di una dichiarazione esplicita (ricordiamo infatti che media è un attributo opzionale). E' possibile usare più di un valore, ma i nomi della lista vanno separati da una virgola:
<link rel="stylesheet" type="text/css" media="print, tv, aural" href="print.css" />
L'uso più tipico di questa funzionalità consiste nel collegare al documento vari fogli di stile adatti a ciascun supporto. Lo user agent che visualizzerà la pagina sarà in grado, se conforme agli standard, di caricare quello giusto.