PROGRAMMIAMO
HTML - Fogli stile esterni
Fogli stile esterni

Se un sito contiene molte pagine e tutte devono essere formattate secondo le stesse regole, l'uso degli stili incorporati nella pagina è scomodo, perché in ogni caso bisogna ripetere molte volte le stesse regole di stile.

Inoltre con gli stili incorporati la separazione fra semantica e presentazione non è ancora totale, poiché gli stili sono pur sempre contenuti nella stessa pagina html che contiene gli elementi della pagina.

Una soluzione senz'altro migliore consiste nell'uso dei fogli stile esterni. Un foglio stile esterno non è altro che un file di testo con estensione .css, contenente le regole di formattazione valide per una certa pagina. Vediamo subito un esempio:

<!DOCTYPE html>

<html>
<head lang="it" >
<meta charset="utf-8">


<title>Pagina con foglio stile esterno</title>

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

<link href="fogliostile.css" rel="stylesheet">


</head>

<body>

<h1>ESEMPIO DI FOGLIO STILE ESTERNO </h1>

<p> Paragrafo rosso e centrato</p>
<p> Un altro paragrafo rosso e centrato</p>

</body>

</html>

fogliostile.css (il nome è libero) è un file di testo con estensione .css, contenente per esempio:

p {
   color: red;
   text-align:center;
   }

La sintassi per linkare una pagina html con un foglio stile css prevede l'uso del tag <link> che deve obbligatoriamente trovarsi nell'head del documento. L'attributo href specifica il percorso dove è salvato il foglio stile, mentre rel="stylesheet" e type="text/css" servono per indicare che l'oggetto collegato (linkato) è appunto un foglio stile (nel caso dei fogli stile devono essere sempre scritti così; vedremo più avanti altri esempi di uso del tag link per linkare oggetti diversi dai fogli stile):

...

<head>

...

<link href="fogliostile.css" rel="stylesheet">

...


</head>

ATTENZIONE: Si osservi che il file fogliostile.css contiene solo le regole di formattazione (con l'eventuale definizione di classi, come visto nella lezione precedente). Il foglio stile non contiene istruzioni in linguaggio html!

La figura seguente mostra due file, la pagina html e un foglio stile css ad essa linkato con il relativo contenuto:

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it