PROGRAMMIAMO
HTML - Fogli stile incorporati
Dagli stili inline ai fogli stile incorporati

Abbiamo già ampiamente discusso l'introduzione dell'attributo universale style per realizzare una chiara separazione all'interno della pagina web fra semantica (gli elementi della pagina) e presentazione (gli stili), eliminando in tale modo tutti i tag e gli attributi deprecati.

Così ad esempio invece di scrivere, come si faceva nel primo html:

<center><font color="red"><p> Paragrafo rosso e centrato </p> </font> </center>

possiamo usare gli stili per ottenere in modo più elegante e funzionale lo stesso risultato:

<p style="color: red; text-align:center"> Paragrafo rosso e centrato </p>

Tuttavia è evidente che l'attributo style, sebbene metta ordine nel caos dei tag e degli attributi di presentazione del primo html, non realizza una vera separazione fra semantica della pagina e presentazione della stessa, in quanto gli stili sono inseriti all'interno della pagina, insieme con gli elementi logici che strutturano la pagina stessa. Si parla in questo caso di stili inline o in linea.

Un modo più elegante ed efficace per ottenere il medesimo risultato dell'esempio precedente è questo (detto foglio stile incorporato nella pagina):

<!DOCTYPE html>

<html>
<head>
<meta charset="windows-1252">

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

<style type="text/css">

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

</style>

</head>
<body>

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

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

</body>

</html>

Si noti che i due paragrafi vengono formattati allo stesso modo, in base alle regole indicate in testa alla pagina (cioè vengono entrambi centrati). La sintassi per usare i fogli stile incorporati è la seguente:

...

<head>

...

<style type="text/css">

selettore {
             proprietà:valore;
             proprietà:valore;
             ...
             }

...

</style>

</head>

dove

Come già detto, in questo semplice esempio tutti i paragrafi vengono formattati allo stesso modo, cioè centrati e colorati di rosso. Vedremo fra breve che è possibile fare molto di più usando i fogli stile.

Per adesso ci limitiamo a notare come, usando un foglio stile incorporato nella pagina, la parte di presentazione (il foglio stile), viene separata dalla parte semantica (gli elementi html della pagina).

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it