Eccoci qui. Rifacendoci al precedente post sui layout, dove abbiamo impostato l’html, procediamo con il definire il css per gestire la pagina e il suo aspetto.
Passiamo ora a definire il css relativo:
body {
margin: 0;
padding: 0;
text-align: center; /* (questo serve a centrare la pagina su explorer 5, poi riallineeremo il testo a sinistra dentro al box principale) */
color: #666666; /* valore esadecimale del colore del testo */
background-color: #ffffff; /* valore esadecimale del colore dello sfondo */
font-size: 12px; /* per ora usiamo i pixel, poi vedremo come sia meglio usare gli em */
font-family: Verdana, Arial, sans-serif; /* definisce la famiglia di caratteri che sarà presente nella nostra pagina. se nel sistema dal quale l’utente sta navigando non esiste il primo font, verrà automaticamente scelto il secondo della lista, e così via. L’ultimo segnalato è generalmente un “serif” o “sans-serif”, cioè sceglie il font di base, purchè sia con glifi (serif) o senza. Per la cronaca i glifi sono quelle “decorazioni” sulle lettere che troviamo ad esempio su un Times New Roman invece che su un Arial */
}
#contenitore {
margin-left: auto;
margin-right: auto; /* questi ultimi due servono per centrare il layout nella pagina per tutti i browser diversi da explorer 5 */
text-align: left; /* ripristiniamo l’allineamento a sinistra del testo */
margin-top: 0;
margin-bottom: 0;
padding: 0;
width: 760px; /* definiamo la larghezza che avrà il contenitore e quindi tutto il sito. N.B. 760px sono la dimensione minima visualizzabile a partire da una risoluzione video 800×600 */
}
Come vedete non ho ritenuto opportuno ripetere nel div #contenitore i dati relativi al font e ai colori, perchè come già accennato, trattandosi di fogli di stile a cascata, gli stili saranno automaticamente definiti in modo ereditario.
Proseguiamo.
#testata {
height: 200px;
background-color: #ff66cc;
color: #000000;
font-size: 18px;
width: 760px;
}
#contenuti {
background-color: #eeeeee; /*non definisco il colore del font perchè so che prenderà ereditariamente il colore #666666 del body
width: 760px;
}
#footer {
clear: left; /*questo serve affinchè siamo sicuri che il piè di pagina venga sempre sotto al box contenuti. in questo caso il layout è semplice e anche non mettendolo verrebbe comunque sotto, ma ricordatelo per il futuro */
font-size: 11px;
color: #dddddd;
border-top: 1px solid #dddddd; /*bordo di dimensione di un pixel, solido (perchè può essere anche “dotted”-puntato o “dashed”-tratteggiato, e infine il colore */
}
Provate, e fatemi sapere! Sperimentate, modificate colori etc. Presto passeremo a definire sempre più oggetti e sarà sempre più complicato. Ricordatevi le impostazioni base per footer body e contenitore, dopodichè chi vivrà vedrà.
Alla prossima!
