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:
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”.
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.
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.
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>:
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.
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>:
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:
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>.
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:
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:
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.
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.
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.
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:
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:
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”>
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.
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
Didattica: Ultimi articoli
- E' possibile una distinzione in sè di Piacere e Bisogno?
- (possibile verifica) Ambiente e Felicità: Temi cosi divergenti?
- (Possibile verifica) Tecnologie e Solitudine: Un mondo in cui Parliamo con tutti senza conoscere nessuno.
- Amori impossibili, un saggio verso l'amore.
- CGT E FONDAZIONE MASACCIO, INSIEME PER LA FORMAZIONE
- LUCCA: Lingue per tutto e tutti.
- “Lingue” per tutti? Scopri quanto tutto è vero a Pisa.
- Lingue straniere, studiarle si può a Bari.
- Master EFER - Efficienza Energetica e Fonti Energetiche Rinnovabili
- IL CENTRO DI GEOTECNOLOGIE DELL'UNIVERSITA' DI SIENA PRESENTA I BANDI DEI MASTER
Informatica: Ultimi articoli
- ARTIGIANATO E PALAZZO 2012 XVIII edizione a Giardino Corsini
- VIVI13.IT - La prima guida on-line del Municipio XIII di Roma
- Francobollino, il software per gli appassionati di filatelia
- Secondo Chris Caso l’iPhone 5 avrà un display da 4 pollici
- AS Realizzazione Siti Web, siti in promozione
- Performance, Open Source, Intuitivo e.. in italiano. E’ Vlc Media Player
- MEDITA anche quest’anno è in squadra con i Calciatori Panini
- Sisal casinò: il videopoker in tutte le salse!
- Solo il 15% delle aziende italiane si presenta su Internet – Un grande svantaggio nella crisi finanziaria
- Vlc Media Player: semplice, intuitivo e performante
Varie: Ultimi articoli
- Sulle tracce della schizoanalisi da Deleuze alla critica di Salvatore Gurrado
- Sulle tracce di Hermann Nitsch di Salvatore Gurrado. Arte informale.
- L’evoluzione della comunicazione: E-CITY, walk with Qr Code
- Arriva il WebFestival 2011, Cava de’ Tirreni il Premio Web Italia 8-9-10 Sett
- Workshop Google al WebFestival 2011, Cava de’ Tirreni 8/9/10 Settembre
- Il WebFestival - Premio Web Italia a settembre a Cava de'Tirreni
- WOW: il nuovo servizio di caldaiemurali.it
- caldaiemurali.it: riscalda la tua casa con un clic!
- LE NUOVE POLTRONE FIRMATE EUROPEO: DESIGN E LINEE RICERCATE
- IL CASAGRANDE CHE NON TI ASPETTI