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:
possiamo usare gli stili per ottenere in modo più elegante e funzionale lo stesso risultato:
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="utf-8">
<title>Pagina con foglio stile incorporato</title>
<style>
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>
selettore {
proprietà:valore;
proprietà:valore;
...
}
...
</style>
</head>
dove
- il selettore è il nome di un tag (es. p)
- l'elenco { proprietà:valore; proprietà:valore; ... } si dice regola dello stile;
- proprietà e valore seguono la normale sintassi degli stili, vista nelle lezioni precedenti.
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
Sito realizzato in base al template offerto da
http://www.graphixmania.it
