![Porte Aperte sul Web [logo]. Link alla home page](../../img/logopab.gif)
sei in home - tutorial - home page con xhtml strict - lezione 18
Scarica il file ritocco.css e leggi il codice corrispondente.
Con il Foglio di Stile definiamo le caratteristiche per le classi .disegno e .porte:
.disegno {
text-align: center;
margin-top: 30px;
} .porte {
font-size: 90%;
text-align: center;
font-weight: bold;
color: #000066;
background-image: url(images/quadrb.gif);
margin: 30px 15px 0 15px;
padding: 5px;
}
La classe .disegno contiene due sole proprietà: l'allineamento centrato e il margine superiore pari a 30 pixel, in modo da staccare un po' l'immagine del disegno dalle voci di menu.
La classe .porte, progettata per essere applicata anche a parti di testo, contiene qualche informazione in più.
Il testo avrà una dimensione pari al 90% (rispetto a quella definita nel body), sarà centrato, in grassetto e di colore blu scuro su sfondo quadrettato bianco.
Il margine del paragrafo è stato definito utilizzando un'unica proprietà (margin: 30px 15px 0 15px;). In questo caso l'informazione deve essere letta in senso orario partendo dall'alto; quindi si avrà:
Il padding di 5 pixel, infine, determina il distanziamento del testo dal bordo del paragrafo che lo contiene.
