7. Gli stili del layout di partenza

Gli stili del layout di partenza sono i seguenti:

  1. body {
  2. font-family: Helvetica, Arial, sans-serif;
  3. font-size: 100.01%;
  4. color: #000;
  5. background: #fff;
  6. line-height: 1.5;
  7. margin-left: 2em;
  8. margin-right: 2em;
  9. }
  10. h1, h2, h3, h4, h5, h6 {
  11. line-height: normal;
  12. }
  13. h1 {
  14. margin: 0;
  15. padding-bottom: 0.2em;
  16. background: transparent url("../img/logo.png") no-repeat top right;
  17. color: #000;
  18. font-family: "Arial Black", Arial, sans-serif;
  19. font-size: 3em;
  20. text-transform: uppercase;
  21. }
  22. h2 {
  23. border-bottom: 1px dashed #000;
  24. }
  25. a:link, a:visited {
  26. color: #00c;
  27. background: transparent;
  28. }
  29. a:hover {
  30. color: #00f;
  31. background: transparent;
  32. }
  33. a img {border: 1px solid #fff;}
  34. a:hover img {border-color: #f00;}
  35. *:focus {outline-style: none;}
  36. blockquote {
  37. padding-left: 0.5em;
  38. border-left: 0.5em solid #ccc;
  39. }
  40. address {
  41. margin: 1em 0;
  42. }
  43. ul {
  44. list-style: disc;
  45. }
  46. ul ul {
  47. list-style: circle;
  48. margin-top: 0;
  49. margin-bottom: 0;
  50. }
  51. ul ul ul {
  52. list-style: square;
  53. margin-top: 0;
  54. margin-bottom: 0;
  55. }
  56. ol ol {
  57. list-style: upper-roman;
  58. margin-top: 0;
  59. margin-bottom: 0;
  60. }
  61. ol ol ol {
  62. list-style: lower-roman;
  63. margin-top: 0;
  64. margin-bottom: 0;
  65. }
  66. dl {
  67. padding: 1em;
  68. border: 1px solid #000;
  69. }
  70. dt {
  71. margin-left: 2.5em;
  72. display: list-item;
  73. list-style-type: square;
  74. }
  75. dl dl.highlight {
  76. padding: 0.8em;
  77. }
  78. table {
  79. border-collapse: collapse;
  80. border-spacing: 0;
  81. border: 1px solid #000;
  82. font-size: 1em;
  83. }
  84. caption {
  85. margin: 0;
  86. padding: 0.5em 0;
  87. text-align: center;
  88. font-weight: bold;
  89. font-variant: small-caps;
  90. }
  91. td {
  92. border: 1px solid #000;
  93. padding: 0.4em;
  94. vertical-align: middle;
  95. text-align: left;
  96. }
  97. th {
  98. border: 1px solid #000;
  99. padding: 0.4em;
  100. vertical-align: middle;
  101. text-align: center;
  102. font-weight: bold;
  103. }
  104. table.property {
  105. border: none;
  106. background: #def;
  107. color: #000;
  108. }
  109. table.property caption {
  110. text-align: left;
  111. font-variant: normal;
  112. background: #005a9c;
  113. color: #fff;
  114. }
  115. table.property td, table.property th {
  116. border: none;
  117. }
  118. table.property th {
  119. text-align: left;
  120. }
  121. pre, code, samp, kbd {
  122. font: 1em "Andale Mono", "Courier New", Courier, monospace;
  123. }
  124. pre {
  125. background: #e5ecf3;
  126. color: #000;
  127. }
  128. q:before {
  129. content: no-open-quote;
  130. }
  131. q:after {
  132. content: no-close-quote;
  133. }
  134. em, cite, dfn {
  135. font-style: normal;
  136. font-weight: bold;
  137. }
  138. abbr, acronym {
  139. cursor: help;
  140. border-bottom: 1px dashed #000;
  141. font-variant: small-caps;
  142. }
  143. img.wide {
  144. width: 100%;
  145. }
  146. form {
  147. margin: 0;
  148. padding: 0;
  149. }
  150. /* various */
  151. .summary {
  152. list-style: none;
  153. }
  154. .css {
  155. color: #363688;
  156. background: transparent;
  157. }
  158. .html {
  159. color: #900;
  160. background: transparent;
  161. }
  162. .left {
  163. float: left;
  164. margin: 0.2em 0.4em 0 0;
  165. }
  166. p.date {font-style: italic;}
  167. .important {background: #ffc; color: #000;}
  168. /* stolen from Gecko XML parsing error */
  169. .error {
  170. background: #ffffe0;
  171. color: #000;
  172. font-weight: bold;
  173. border: 1px inset;
  174. border-color: #800 #ffb2b2 #ffb2b2 #800;
  175. }
  176. .error .code {color: #d00; background: transparent;}

Ci soffermiamo solo su alcune caratteristiche interessanti:

  1. il layout è elastico, in quanto i margini laterali dell'elemento body sono stati impostati in em (righe 7-8)
  2. il logo è stato impostato come sfondo dell'elemento h1 (riga 16)
  3. è stato eliminato il focus dagli elementi, che alcuni browser rendono con un contorno tratteggiato (proprietà outline) (riga 35)
  4. gli elementi dt vengono visualizzati come elementi di un elenco non ordinato, tramite i valori list-item della proprietà display e square della proprietà list-style-type (righe 72-73).