7. Gli stili del layout di partenza
Gli stili del layout di partenza sono i seguenti:
- body {
- font-family: Helvetica, Arial, sans-serif;
- font-size: 100.01%;
- color: #000;
- background: #fff;
- line-height: 1.5;
- margin-left: 2em;
- margin-right: 2em;
- }
- h1, h2, h3, h4, h5, h6 {
- line-height: normal;
- }
- h1 {
- margin: 0;
- padding-bottom: 0.2em;
- background: transparent url("../img/logo.png") no-repeat top right;
- color: #000;
- font-family: "Arial Black", Arial, sans-serif;
- font-size: 3em;
- text-transform: uppercase;
- }
- h2 {
- border-bottom: 1px dashed #000;
- }
- a:link, a:visited {
- color: #00c;
- background: transparent;
- }
- a:hover {
- color: #00f;
- background: transparent;
- }
- a img {border: 1px solid #fff;}
- a:hover img {border-color: #f00;}
- *:focus {outline-style: none;}
- blockquote {
- padding-left: 0.5em;
- border-left: 0.5em solid #ccc;
- }
- address {
- margin: 1em 0;
- }
- ul {
- list-style: disc;
- }
- ul ul {
- list-style: circle;
- margin-top: 0;
- margin-bottom: 0;
- }
- ul ul ul {
- list-style: square;
- margin-top: 0;
- margin-bottom: 0;
- }
- ol ol {
- list-style: upper-roman;
- margin-top: 0;
- margin-bottom: 0;
- }
- ol ol ol {
- list-style: lower-roman;
- margin-top: 0;
- margin-bottom: 0;
- }
- dl {
- padding: 1em;
- border: 1px solid #000;
- }
- dt {
- margin-left: 2.5em;
- display: list-item;
- list-style-type: square;
- }
- dl dl.highlight {
- padding: 0.8em;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- border: 1px solid #000;
- font-size: 1em;
- }
- caption {
- margin: 0;
- padding: 0.5em 0;
- text-align: center;
- font-weight: bold;
- font-variant: small-caps;
- }
- td {
- border: 1px solid #000;
- padding: 0.4em;
- vertical-align: middle;
- text-align: left;
- }
- th {
- border: 1px solid #000;
- padding: 0.4em;
- vertical-align: middle;
- text-align: center;
- font-weight: bold;
- }
- table.property {
- border: none;
- background: #def;
- color: #000;
- }
- table.property caption {
- text-align: left;
- font-variant: normal;
- background: #005a9c;
- color: #fff;
- }
- table.property td, table.property th {
- border: none;
- }
- table.property th {
- text-align: left;
- }
- pre, code, samp, kbd {
- font: 1em "Andale Mono", "Courier New", Courier, monospace;
- }
- pre {
- background: #e5ecf3;
- color: #000;
- }
- q:before {
- content: no-open-quote;
- }
- q:after {
- content: no-close-quote;
- }
- em, cite, dfn {
- font-style: normal;
- font-weight: bold;
- }
- abbr, acronym {
- cursor: help;
- border-bottom: 1px dashed #000;
- font-variant: small-caps;
- }
- img.wide {
- width: 100%;
- }
- form {
- margin: 0;
- padding: 0;
- }
- /* various */
- .summary {
- list-style: none;
- }
- .css {
- color: #363688;
- background: transparent;
- }
- .html {
- color: #900;
- background: transparent;
- }
- .left {
- float: left;
- margin: 0.2em 0.4em 0 0;
- }
- p.date {font-style: italic;}
- .important {background: #ffc; color: #000;}
- /* stolen from Gecko XML parsing error */
- .error {
- background: #ffffe0;
- color: #000;
- font-weight: bold;
- border: 1px inset;
- border-color: #800 #ffb2b2 #ffb2b2 #800;
- }
- .error .code {color: #d00; background: transparent;}
Ci soffermiamo solo su alcune caratteristiche interessanti:
- il layout è elastico, in quanto i margini laterali dell'elemento
body
sono stati impostati in em
(righe 7-8)
- il logo è stato impostato come sfondo dell'elemento
h1
(riga 16)
- è stato eliminato il focus dagli elementi, che alcuni browser rendono con un contorno tratteggiato
(proprietà
outline
) (riga 35)
- 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).