Includere il foglio di stile CSS

di Maria Silvana Radice





Come includere il foglio di stile CSS tramite file esterno..

How to include the stylesheet


Questa pagina e` una continuazione della guida Come creare un sito da zero, passo a passo..

Come gia` detto all'inizio della guida, il layout del sito e` formato dal CSS e dal resto del codice html. Per costruire la pagina, abbiamo bisogno di integrare tutte le parti, inserendo i tag necessari.

E` possibile, pero` e anche molto opportuno, includere il codice css tramite un file esterno. Perche`? Perche` in questo modo, al momento di creare una nuova pagina del sito, non dovremo più riscrivere tutto il codice css, ma solo inserire il link che lo richiama. Non solo, ma la cosa sarà molto utile anche per effettuare, in seguito, modifiche al codice css. Basterà, infatti, modificare l'originale per vedere i cambiamenti applicati a tutte le pagine.

Vediamo, quindi, come creare un file .css che conterrà tutto il codice CSS.

PREMESSA: nei passi successivi, illustrero` come separare il codice css dal codice html, nel caso in cui vi sia gia` stato inserito. Se, invece, partite da un layout iniziale con i due codici ancora separati, potete passate direttamente al punto: Come includere il file.css esterno nel codice html della pagina.

Vediamo, in pratica, cosa vuole dire e come fare.

Aprite il codice html di una pagina tramite l'editor di testo, come avete imparato a fare (mi raccomando, lavorate sempre su una copia).

Tagliate e prelevate tutto il corpo del codice css senza i tag, cioe` la parte che sta al posto di "CODICE CSS" e che ho segnato in rosso nell'esempio sotto:

<html>
<head>
<style type="text/css">
CODICE CSS
</style>
</head>
<body>
contenuti pagina
</body>
</html>

Oppure, piu` semplicemente,

e incollatelo in un nuovo file di testo. Rinominate il file e dategli estensione .css. Io lo chiamerò, semplicemente, file.css
Caricate questo file.css nella cartella public_html del file manager, come già sapete fare.

Nel codice della pagina, che è rimasto dopo aver tolto la parte css, dovete cancellare i tag <style type="text/css"></style>, che erano serviti, unicamente, per incollare i due codici (css + html). Li vedete, in rosso, qui sotto..

<html>
<head>
<style type="text/css">
</style>
</head>
<body>
contenuti pagina
</body>
</html>

Il codice rimanente sarà, quindi, così:

<html>
<head>
</head>
<body>
contenuti pagina
</body>
</html>

Come includere il file.css esterno nel codice html della pagina:

Ora, dobbiamo mettere tra i tag <head></head> il link che richiamerà il file.css (foglio di stile). Questo è il link che dovete usare:

<link rel="stylesheet" type="text/css" href="file.css">

Al posto di file.css dovete mettere il nome del vostro file.css (foglio di stile). Questo file dovrà essere nella stessa cartella delle pagine del sito. Se si trovasse in un'altra cartella, sarebbe necessario scriverne l'indirizzo per esteso, come già visto in precedenza per i file delle pagine.

Alla fine, il nostro codice html risulterà composto così:

<html>
<head>
<link rel="stylesheet" type="text/css" href="file.css">
</head>
<body>
contenuti pagina
</body>
</html>

Perfetto, ora, se proverete ad aprire questa pagina del sito, vedrete che avrà esattamente le stesse caratteristiche delle altre pagine con codice css incorporato.

Fate lo stesso lavoro su tutte le pagine, compresa la pagina index.
Ecco fatto, ora, se farete delle modifiche al foglio di stile, queste modifiche avverranno, in automatico in tutte le pagine del sito in cui il foglio viene richiamato. Se creerete, invece, una nuova pagina, non avrete che da inserire il link come detto sopra e, anch'essa, assumerà, nel layout, le caratteristiche del resto del sito.
Continuate con la prossima parte della guida....




Ok, adesso che la parte impegnativa e` stata superata, vi potete divertire a modificare il vostro sito, ma voglio darvi ancora un consiglio: per fare gli "esperimenti", create sempre una copia della cartella che contiene il sito di base e lavorate su quella. Allo stesso modo, quando ottenete un buon risultato, per provare altri cambiamenti, fatene un'ulteriore copia. In poche parole, mettete sempre da parte le imprese ben riuscite, per non rischiare di rovinarle :-))





1   2   3   4   5   6   7   8   9
Continua con: Pubblicare il sito->>