Passiamo quindi alla formattazione dei blocchi di codice, ricordando che abbiamo scelto di usare un elenco
ordinato in luogo dell'elemento pre
, in quanto:
All'interno delle voci dell'elenco useremo l'elemento code
, che è sicuramente più
indicato a livello semantico. Gli stili sono i seguenti:
.code
. Il suo rientro viene annullato,
gli viene assegnato un padding su tutti i lati ed un bordolist-style: none
. Per rendere lo stile compatibile anche con Internet Explorer
7 ed inferiori si imposta il colore di sfondo sullo stesso valore del colore del testo, eliminando la visualizzazione
del marcatore. Questa dichiarazione viene poi sovrascritta sull'elemento code
(righe 14-16).indent1
) e
l'eventuale spazio verticale tra le righe del codice (classe .vspace
). Si noti che per l'indentazione si può
usare anche un padding sinistro, particolarmente indicato se una riga di codice viene spezzata su due righe.Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro documento HTML.