25. Intestazioni, paragrafi ed elenchi

La maggior parte del contenuto del nostro documento è inserita all'interno di una sequenza regolare di intestazioni di vari livelli, paragrafi ed elenchi (ordinati e non). La formattazione delle intestazioni è già stata definita nelle regole di stile principali del nostro CSS. I paragrafi non hanno alcuna formattazione particolare. Si noti come sia nel caso delle intestazioni che dei paragrafi, i valori dei margini verticali vengono definiti dal foglio di stile predefinito del browser. Tipicamente tali valori sono i seguenti:

  1. h1 {
  2. margin: .67em 0;
  3. }
  4. h2 {
  5. margin: .83em 0;
  6. }
  7. h3 {
  8. margin: 1em 0;
  9. }
  10. h4 {
  11. margin: 1.33em 0;
  12. }
  13. h5 {
  14. margin: 1.67em 0;
  15. }
  16. h6 {
  17. margin: 2.33em 0;
  18. }
  19. p {
  20. margin: 1em 0;
  21. }

Questi valori sono ricavati dal foglio di stile predefinito di Firefox (html.css), che si trova nella directory /res del programma.

Per quanto riguarda gli elenchi, solo alcuni di essi hanno bisogno di una formattazione particolare, che riportiamo di seguito.

  1. ol.literal {
  2. list-style-type: lower-alpha;
  3. }
  4. ul.squared {
  5. list-style-type: square;
  6. }
  7. ul.dash li {
  8. display: block;
  9. padding-bottom: 1em;
  10. }
  11. ul.dash li:before {
  12. content: "\2013";
  13. padding-right: 0.2em;
  14. }

Impostiamo due classi (righe 1-6) per definire due tipi di marcatori diversi per un elenco ordinato e non ordinato. Nel primo caso (classe .literal) usiamo il valore lower-alpha della proprietà list-style-type per ottenere l'effetto dei marcatori costituiti da lettere minuscole dell'alfabeto. Nel secondo caso (classe .squared) usiamo invece il valore square per avere un marcatore costituito da un piccolo quadrato.

Nelle righe che vanno dalla 7 alla 14, usiamo il contenuto generato per inserire un trattino prima del contenuto delle voci dell'elenco con classe .dash. Ovviamente questo esempio non funziona in Internet Explorer 7 ed inferiori, quindi siamo costretti ad inserire il trattino nel sorgente. Possiamo osservarne l'effetto nell'immagine che segue.

L'elenco con le voci con il trattino Figura 14: L'elenco con le voci con il trattino [D]

Diapositiva precedente Indice Diapositiva successiva