In questa esercitazione faremo delle prove per illustrare il modello a box di CSS. Lo faremo assegnando attributi di stile all'are del contenuto, ai paddings, ai bordi e ai margini degli elementi presenti nel file.
Dal punto di vista estetico il risultato sarà piuttosto discutibile, ma lo scopo è quello di evidenziare gli elementi del modella a box.
Questo nuovo paragrafo dove si posizionerà?
Gli esercizi di questa lezione consistono nell'applicare valori agli proprietà di stile del modello a box degli elementi del documente. Pertanto si tratterà di eseguire modifiche nel file CSS ed osservarne l'effetto.
In HTML_02.css modificare il selettore main come segue:
main {
border-style:solid;
border-width:thin;
border-color:gray;
}
Il primo aspetto da osservare è come il main occupi tutta l'ampiezza a suo disposizione che è quella del body.
Per default l'elemento main non ha ne margini ne padding così che il bordo che abbiamo aggiunto è adiacente alla content area.
Per evidenzire i box dell'intestazione e dei paragrafi del main assegnamo i seguenti attributi:
main h1{
text-align:center;
background-color:yellow;
border-style:solid;
border-width:thin;
border-color:gray;
}
main p{
background-color:yellow;
border-style:solid;
border-width:thin;
border-color:gray;
}
Il primo aspetto da osservare è come tanto l'elemento h1 che l'elemento p occupino tutto lo spazio a loro disposizione.
Sia h1 che p sono dotati di margini verticali, ma non di padding.
Per evidenziare la differenza fra padding e margin eseguiamo le modifiche evidenziate:
main h1{
text-align:center;
background-color:yellow;
border-style:solid;
border-width:thin;
border-color:gray;
margin-left:1em;
}
main p{
background-color:yellow;
border-style:solid;
border-width:thin;
border-color:gray;
padding-left:1em;
padding-right:1em;
}
Il primo aspetto da osservare è come tanto l'elemento h1 che l'elemento p occupino tutto lo spazio a loro disposizione.
Sia h1 che p sono dotati di margini verticali, ma non di padding.
Questa sezione è destinata a contenere gli appunti personali del lettore.