Autore: webdesign


CSS esterni e interni

E’ 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

Per caricare un foglio esterno in un documento esistono due possibilità.
La prima e più compatibile è quella che fa uso dell’elemento <LINK>.
La dichiarazione va sempre collocata all’interno della sezione <HEAD>

del documento (X)HTML:

<html>

<head>

<title>Inserire i fogli di stile in un documento</title>

<link rel=”stylesheet” type=”text/css” href=”stile.css”>

</head>

<body>…

L’elemento <LINK> presenta una serie di attributi di
cui è importante spiegare significato e funzione:
1. rel: descrive il tipo di relazione tra il documento e il
file collegato. E’ obbligatorio. Per i CSS due sono i valori
possibili: stylesheet e alternate stylesheet.
Approfondimenti nella lezione 5, “Fogli di stile alternativi”.
2. href: serve a definire l’URL assoluto o relativo del foglio
di stile. E’ obbligatorio.
3. type: identifica il tipo di dati da collegare. Per i CSS
l’unico valore possibile è text/css. L’attributo è
obbligatorio.

4. 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.

Usare @import

Un altro modo per caricare CSS esterni è usare la direttiva @import
all’interno dell’elemento <STYLE>:
<style>

@import url(stile.css);

</style>

Questo sistema è uno dei modi più sicuri per risolvere problemi
di compatibilità tra vecchi e nuovi browser. Ci torneremo quindi più
avanti. Per il momento basti notare che il CSS va collegato definendo un URL
assoluto o relativo da racchiudere tra parentesi tonde (ma vedremo che altri
modi sono accettati) e che la 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 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:
1. type (obbligatorio)
2. 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
(X)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.

Consigli

A questo punto è giusto chiedersi: quando usare l’una o l’altra soluzione?
Il punto di partenza nella risposta deve essere questo: i risultati nella formattazione
del documento non cambiano. La giusta soluzione sarà quindi quella richiesta
dalla nostra applicazione. Il consiglio sentito è semplice: pianificate,
pensate in anticipo a quella che dovrà essere la struttura delle pagine
del sito. Mettetevi davanti a un monitor o su un pezzo di carta e ragionate:
qui metterò un tag <H1>, qui userò una tabella a due colonne,
questo box deve avere lo sfondo rosso, etc.
A questo punto potrete costruire per prima cosa un foglio di stile generico
ed esterno, da applicare a tutte le pagine del sito. Esso conterrà le
regole per formattare gli elementi o le sezioni presenti in tutte queste pagine.
Passate poi ad analizzare sezioni ed elementi presenti solo in certe pagine
o che vogliate modificare solo in determinati casi. Supponete, ad esempio, di
voler cambiare in rosso il colore di un titolo iniziale solo in una pagina delle
150 del vostro sito. Che fare? Semplice: usare uno stile incorporato solo in
quella pagina:
<style type=”text/css”>

h1 {color: red; }

</style>

Per la legge che regola il meccanismo del cascading questo stile prevarrà su quello del CSS esterno.
Se le pagine invece di una fossero 20 il discorso diventerebbe un pò
complicato. Bisognerebbe armarsi di pazienza e modificarle una per volta. Anche
qui però la soluzione è dietro l’angolo. Basta fare un nuovo CSS
esterno e collegarlo al documento con @import insieme al foglio generico:
<link rel=”stylesheet” type=”text/css”
href=”stile.css”>

<style type=”text/css”>

@import url(nuovo_stile.css);

</style>

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

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

by

GEEK ITALIA

Didattica: Ultimi articoli

Informatica: Ultimi articoli

Web: Ultimi articoli


9 novembre 2009 | Didattica,Informatica,Web