Inserire i fogli di stile in un documento | Guida CSS =

Inserire i=20 fogli di stile in un documento =

Iniziamo il nostro percorso dalle fondamentali nozioni di = base,=20 rimanendo ancora in parte nel territorio di (X)HTML. Se CSS = =E8 un=20 solo linguaggio, vari sono i modi per inserire i fogli di = stile CSS=20 in un documento. Per capire il meccanismo =E8 necessario = chiarire la=20 fondamentale distinzione tra fogli esterni e interni.

CSS esterni e interni

E' esterno un foglio di stile definito in un file = separato=20 dal documento. Si tratta di semplici documenti di testo = editabili=20 anche con il Blocco Note o TextEdit ai quali si assegna = l'estensione=20 .css.

Un foglio di stile si dice invece interno quando = il suo=20 codice =E8 compreso in quello del documento. A seconda che = si lavori=20 con un CSS esterno o interno variano sintassi e modalit=E0 = di=20 inserimento. Rispetto a queste diverse modalit=E0 si parla = di fogli di=20 stile collegati, incorporati o in = linea.

Fogli collegati

Per caricare un foglio esterno in un documento esistono = due=20 possibilit=E0. La prima e pi=F9 compatibile =E8 quella che = fa uso=20 dell'elemento <LINK>. La dichiarazione va = sempre=20 collocata all'interno della sezione <HEAD> del=20 documento (X)HTML:

<html>
<head>
<title>Inserire i=20 fogli di stile in un documento</title>
<link=20 rel=3D"stylesheet" type=3D"text/css"=20 = href=3D"stile.css">
</head>
<body>...

L'elemento <LINK> presenta una serie di = attributi di=20 cui =E8 importante spiegare significato e funzione:

1. rel: descrive il tipo di relazione tra il = documento e=20 il file collegato. E' obbligatorio. Per i CSS due = sono i=20 valori possibili: stylesheet e alternate = stylesheet.=20 Approfondimenti nella lezione = 5.

2. href: serve a definire l'URL assoluto o = relativo del=20 foglio di stile. E' obbligatorio.

3. type: identifica il tipo di dati da collegare. = Per i=20 CSS l'unico valore possibile =E8 text/css. = L'attributo =E8=20 obbligatorio.

4. media: con questo attributo si identifica il = supporto=20 (schermo, stampa, etc) cui applicare un particolare foglio = di stile.=20 Attributo opzionale. L'argomento sar=E0 approfondito = nella prossima=20 lezione.

Usare @import

Un altro modo per caricare CSS esterni =E8 usare la = direttiva=20 @import all'interno dell'elemento = <STYLE>:

Questo sistema =E8 uno dei modi pi=F9 sicuri per = risolvere problemi=20 di compatibilit=E0 tra vecchi e nuovi browser. Ci torneremo = quindi pi=F9=20 avanti. Per il momento basti notare che il CSS va collegato=20 definendo un URL assoluto o relativo da racchiudere tra = parentesi=20 tonde (ma vedremo che altri modi sono accettati) e che la=20 dichiarazione deve chiudersi con un punto e virgola.

Fogli incorporati

I fogli incorporati sono quelli inseriti direttamente nel = documento (X)HTML tramite l'elemento <STYLE>. = Anche in=20 questo caso la dichiarazione va posta all'interno della = sezione=20 <HEAD>:

<html>
<head>
<title>Inserire i=20 fogli di stile in un documento</title>
<style=20 type=3D"text/css">
body {
background:=20 = #FFFFCC;
}
</style>
</head>
<body>...

Come si vede il codice inizia con l'apertura del tag=20 <STYLE>. Esso pu=F2 avere due attributi:

1. type (obbligatorio)

2. media (opzionale)

per i quali valgono le osservazioni viste in precedenza. = Seguono=20 le regole del CSS e la chiusura di </STYLE>. =

Fogli in linea

L'ultimo modo per formattare un elemento con un foglio di = stile=20 consiste nell'uso dell'attributo style. Esso fa parte = della=20 collezione di attributi (X)HTML definita Common: si = tratta di=20 quegli attributi applicabili a tutti gli elementi. La = dichiarazione=20 avviene a livello dei singoli tag contenuti nella pagina e = per=20 questo si parla di fogli di stile in linea. La sintassi = generica =E8=20 la seguente:

Se, ad esempio, si vuole formattare un titolo H1 = in modo=20 che abbia il testo di colore rosso e lo sfondo nero, = scriveremo:

Le cose da osservare nel codice sono due. Come valore di = style=20 si possono dichiarare pi=F9 regole di stile. Esse vanno = separate=20 dal punto e virgola. I due punti si usano invece per = introdurre il=20 valore della propriet=E0 da impostare.

Consigli

A questo punto =E8 giusto chiedersi: quando usare l'una o = l'altra=20 soluzione? Il punto di partenza nella risposta deve essere = questo: i=20 risultati nella formattazione del documento non cambiano. La = giusta=20 soluzione sar=E0 quindi quella richiesta dalla nostra = applicazione. Il=20 consiglio sentito =E8 semplice: pianificate, pensate = in=20 anticipo a quella che dovr=E0 essere la struttura delle = pagine del=20 sito. Mettetevi davanti a un monitor o su un pezzo di carta = e=20 ragionate: qui metter=F2 un tag <H1>, qui user=F2 una = tabella a=20 due colonne, questo box deve avere lo sfondo rosso, etc. =

A questo punto potrete costruire per prima cosa un foglio = di=20 stile generico ed esterno, da applicare a tutte le pagine = del sito.=20 Esso conterr=E0 le regole per formattare gli elementi o le = sezioni=20 presenti in tutte queste pagine.

Passate poi ad analizzare sezioni ed elementi presenti = solo in=20 certe pagine o che vogliate modificare solo in determinati = casi.=20 Supponete, ad esempio, di voler cambiare in rosso il colore = di un=20 titolo iniziale solo in una pagina delle 150 del vostro = sito. Che=20 fare? Semplice: usare uno stile incorporato solo in quella=20 pagina:

Per la legge che regola il meccanismo del cascading (vedi = lezione 13=20 di prossima pubblicazione) questo stile prevarr=E0 su quello = del CSS=20 esterno.

Se le pagine invece di una fossero 20 il discorso = diventerebbe un=20 p=F2 complicato. Bisognerebbe armarsi di pazienza e = modificarle una=20 per volta. Anche qui per=F2 la soluzione =E8 dietro = l'angolo. Basta fare=20 un nuovo CSS esterno e collegarlo al documento con @import = insieme=20 al foglio generico:

Anche questa volta, le regole dello stile colleagto con = @import=20 vanno a sovrascrivere quelle ereditate dall'elemento=20 <LINK>. Sono solo alcune delle strategie = possibili e mi=20 si perdoni la forse eccessiva semplificazione. Basta rendere = l'dea.

Un'ultima notazione. L'uso estensivo di fogli in linea = rischia di=20 compromettere uno dei principali vantaggi dei CSS, ovvero = avere=20 pagine pi=F9 leggere e facili da gestire. Intervenire nei = meandri di=20 una pagina per andare a modificare uno stile e ripetere = l'operazione=20 per quante sono le pagine del nostro sito pu=F2 diventare = davvero=20 frustrante. Del resto, il loro uso =E8 ultimamente = considerato=20 deprecato anche dal W3C.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =