Fogli di stile


Un foglio di stile è un file di testo ASCII con estensione *.css (per Cascading Style Sheets) che contiene indicazioni sugli aspetti tipografici da attribuire agli identificatori (tag) HTML usati in un documento sostituendo la sezione <style> nella sezione <head>.

In tale testo vanno dichiarati i marcatori HTML per i quali si desidera una realizzazione tipografica diversa da quella di default nel browser che provvederà alla decodificazione del documento.

Le dichiarazioni si effettuano con la sintassi desumibile dagli esempi.

Inoltre da un marcatore standard si possono derivare varianti dello stesso tipo definite dall'utente facendo seguire il nome del marcatore standard da un punto e da un identificatore di classe.

Ad esempio dal marcatore <p> può essere derivata la classe <p.speciale>.

Per ottenere che il testo di un paragrafo in <body> sia stampato con caratteri fixedsys si scriverà nel seguente modo:

<p class="speciale">Questo è un paragrafo speciale</p>

Si propongono di seguito alcuni esempi su come definire i principali aspetti tipografici degli identificatori di uso più comune.

Nota: px sta per pixel: volendo una misura può essere in pt (punti tipografici) o in percentuale;
i nomi dei font tipografici sono dati in ordine di preferenza a seconda di quelli disponibili.


body 
  {
    margin-left: 16px;
    margin-right: 16 px;
    margin-top: 16px;
    margin-bottom: 16px; 
    color: #000000; 
    background-color: azure;
    font-family: arial,helvetica,sans-serif; 
    font-size: 90%; 
  }

p
  {
    font-family: arial,helvetica,sans-serif
  }

table
  {
    font-size: 100%
  }

table.ex
  {
    font-size: 100%; 
    color: #000000; 
    background-color: #efe7d6
  }

td
  {
    font-family: helvetica,arial,sans-serif
  }

div
  {
    width: 90%;
    background-color: cyan;
  }

h1
  {
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    color: blue; 
    background-color: transparent 
  }

h2
  {
    font-size: 140%;
    color: #8b4513; 
    background-color: transparent
  }

h3
  {
    font-size: 120%;
    color: maroon;
    text-align: center; 
    background-color: transparent
  }

h4
  {
    font-family: "Comic Sans MS","Brush Script MT","Arial Black",Impact; 
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    color: #8b4513; 
    background-color: transparent
  }

td.right
  {
    color: #8b4513; 
    background-color: #ffffff
  }

td.content
  {
    color: #8b4513; 
    background-color: #efe7d6
  }

td.deprecated
  {
    color: #ff0000; 
    background-color: transparent
  }

td.red
  {
    color: #ff0000; 
    background-color: transparent
  }

p.neretto
  {
    font-weight:bold;
  }

p.red
  {
    color: #ff0000; 
    background-color: transparent
  }

p.intro 
  {
    font-weight: bold; 
    font-size: 100%; 
    color: #000000; 
    background-color: transparent
  }

p.introcenter
  {
    font-size: 110%; 
    color: #8b4513; 
    background-color: transparent; 
    text-align: center
  }

p.codice
  {
    font-size: 100%; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    font-family: Fixedsys,"Courier New",monospace 
  }

p.centrato
  {
    text-align: center;
  }

pre
  {
    font-size: 100%; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    font-family: Fixedsys,"Courier New",monospace
  }

span.codice
  {
    font-family: Fixedsys,"Courier New",monospace
  }

span.bianco
  {
    background-color: white;
  }

span.blue
  {
    color: #00008b; 
    background-color: transparent
  }

span.red
  {
    color: #ff0000; 
    background-color: transparent
  }

span.ieonly 
  {
    font-size: 70%; 
    color: #000080; 
    background-color: transparent
  }

img.float 
  {
    float: left
  }

hr
  {
    color: blue; 
    background-color: transparent
  }

h1.indice
  {
    font-size: 200%;
    color: blue; 
    background-color: transparent
  }

h1.att
  {
    color: #000000; 
    background-color: transparent
  }

h2.att
  {
    color: #000000; 
    background-color: transparent
  }

h3.att
  {
    color: #000000; 
    background-color: transparent
  }

hr.att 
  {
    color: #000000; 
    background-color: transparent
  }

table.front
  {
    color: #000000; 
    background-color: #8b4513
  }

th.front 
  {
    color: #ffffff; 
    background-color: #8b4513
  }

td.front
  {
    color: #000000; 
    background-color: #efe7d6
  }

a:link
  {
    color: blue; 
    background-color: transparent
  }

a:visited
  {
    color: maroon; 
    background-color: transparent
  }

a:active
  {
    color: red; 
    background-color: transparent
  }

a:hover 
  {
    color: red; 
    background-color: transparent
  }

a.red:link
  {
    color: #ff0000; 
    background-color: transparent
  }

a.red:visited
  {
    color: #ff0000; 
    background-color: transparent
  }

a.red:active 
  {
    color: #ff8c00; 
    background-color: transparent
  }

a.red:hover 
  {
    color: #ff8c00; 
    background-color: transparent
  }

HTML5-2