In questa lezione, analizzeremo come sia facile costruire un foglio di stile essenziale. Per seguire gli esempi, ci occorrerà conoscere appena un po' di HTML.

Cominciamo con un piccolo documento HTML:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
< HTML>
  < HEAD>
    < TITLE>Note su Bach< /TITLE>
  < /HEAD>
  < BODY>
    < H1>Note su Bach< /H1>
    < P>Johann Sebastian Bach fu un compositore prolifico.
  < /BODY>
< /HTML>

Per impostare a blu il colore dell'elemento H1, è possibile scrivere la seguente regola CSS:

H1 { color: blue }

Una regola CSS consiste di due parti principali: selettore ('H1') e dichiarazione ('color: blue'). La dichiarazione ha due parti: proprietà ('color') e valore ('blue').

Per inserire il foglio di stile all'interno del documento, si usi l'elemento STYLE:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
< HTML>
  < HEAD>
    < TITLE>Note su Bach< /TITLE>
  < STYLE type="text/css">
    H1 { color: blue }
  < /STYLE>
  < /HEAD>
  < BODY>
    < H1>Note su Bach< /H1>
    < P>Johann Sebastian Bach fu un compositore prolifico.
  < /BODY>
< /HTML>

Per rendere massima la flessibilità, si raccomanda di specificare fogli di stile esterni; questi possono essere modificati senza intervenire sul sorgente HTML, e possono essere condivisi tra più documenti. Per creare un collegamento ad un foglio di stile esterno, si può usare l'elemento LINK:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
< HTML>
  < HEAD>
    < TITLE>Note su Bach< /TITLE>
    < LINK rel="stylesheet" href="bach.css" type="text/css">
  < /HEAD>
  < BODY>
    < H1>Note su Bach< /H1>
    < P>Johann Sebastian Bach fu un compositore prolifico.
  < /BODY>
< /HTML>

L'elemento LINK specifica:

• il tipo di collegamento: ad uno "stylesheet" [= foglio di stile].
• la posizione del foglio di stile tramite l'attributo "ref".
• il tipo di foglio di stile che viene collegato: "text/css".

COMMENTI