21. Le regole di stile generali

Per essere efficace, un foglio di stile deve seguire un ordine preciso, cominciando da dichiarazioni generali per l'intero documento e passando quindi a definire delle dichiarazioni particolari per sezioni specifiche. Nello scrivere tale foglio di stile si dovrebbero seguire delle buone pratiche che andiamo a riassumere:

  1. Dividere il foglio di stile in blocchi specifici.
  2. Aggiungere un commento per ciascun blocco in modo da favorire la sua manutenzione.
  3. Usare la giusta indentatura per il codice, evitando di scrivere i blocchi di dichiarazione su una singola riga.
  4. Evitare dichiarazioni ridondanti, usando ove possibile la sintassi abbreviata delle proprietà.

Passiamo quindi alle dichiarazioni generali per il nostro documento.

  1. body {
  2. margin-left: 5%;
  3. margin-right: 5%;
  4. font: 100%/1.5 Arial, Helvetica, sans-serif;
  5. background: #fff;
  6. color: #000;
  7. }
  8. a:link {
  9. color: #00c;
  10. background: transparent;
  11. text-decoration: none;
  12. border-bottom: 1px solid;
  13. }
  14. a:visited {
  15. color: #800;
  16. background: transparent;
  17. }
  18. a:hover, a:active {
  19. color: #400040;
  20. background: transparent;
  21. }
  22. h1, h2, h3, h4, h5, h6 {
  23. line-height: normal;
  24. color: #339;
  25. background: transparent;
  26. }
  27. h3, h4, h5, h6 {
  28. letter-spacing: 0.1em;
  29. }
  30. h2, h3, h4, h5, h6 {
  31. margin-bottom: 0;
  32. }
  33. h5 {
  34. text-transform: uppercase;
  35. }
  36. h5.example {
  37. color: #000;
  38. font-size: 1em;
  39. font-weight: bold;
  40. text-transform: none;
  41. }
  42. ins {
  43. display: none;
  44. }

Il codice generale appare diviso in quattro blocchi principali:

  1. Righe 1-7

    Vengono qui date le dichiarazioni generali per l'elemento body. Si impostano i margini orizzontali su un valore in percentuale, in modo da avere un layout fluido. Si impostano il colore del testo e dello sfondo, l'interlinea e il tipo di font per il documento, nonché la sua dimensione.

  2. Righe 8-21

    Vengono qui date le dichiarazioni per lo stile dei collegamenti ipertestuali presenti nel documento, seguendo l'ordine :link, :visited, :hover, :active. Si noti che al fine della semplice conversione del documento sarebbe sufficiente attribuire uno stile solo alla pseudo-classe :link. Si noti altresi come la sottolineatura dei link sia stata eliminata a favore di un bordo inferiore, al fine di garantire un certo spazio tra la linea di base del testo e la sottolineatura.

  3. Righe 22-41

    Si attribuiscono degli stili alle intestazioni presenti nel documento, seguendo l'ordine di importanza h1-h6. Viene ridotta l'interlinea, assegnato un colore specifico, una spaziatura tra le lettere (elementi h3-h6), ridotto lo spazio inferiore tra le intestazioni h2-h6 e gli elementi contigui, e si rende in lettere maiuscole il testo dell'elemento h5. Da ultimo, la classe .example applicata ai soli elementi h5 fa in modo che questi ultimi abbiano il testo di colore nero, non siano in lettere maiuscole ed abbiano una dimensione del font pari a quella dell'elemento body con il testo in grassetto.

  4. Righe 42-44

    Nel documento sono presenti delle note di redazione, prive di valore contestuale ai fini della comprensione del documento. Per questo motivo sopprimiamo la loro visualizzazione marcandole con l'elemento ins a cui assegniamo un valore none per la proprietà display. Si noti che in questo modo tali note non verranno lette dai lettori di schermo che interpretano tale dichiarazione (come Jaws). Se si ritiene che tali note abbiamo un valore ai fini della comprensione del documento, si può ricorrere a questa dichiarazione alternativa:

    1. ins {
    2. position: absolute;
    3. top: -1000em;
    4. }

    Assegnando un valore negativo altissimo alla proprietà top facciamo in modo che l'elemento scompaia dalla finestra di visualizzazione. Questa tecnica ci permette di avere un'ottima compatibilità con i lettori di schermo e gli altri programmi che non supportano i fogli di stile.