home page con xhtml strict

Lezione 12 - Il Foglio di Stile contenuto.css

Il codice commentato

Scarica il file contenuto.css e leggi il codice corrispondente.

Con il Foglio di Stile definiamo le caratteristiche dei blocchi di notizie che si susseguono all'interno del box #contenuto:

I contenuti dell'area centrale occupano lo spazio definito dal blocco <div class="notizia">...</div>. Trattandosi di un blocco che si ripete più volte, per definirne le caratteristiche di formattazione, viene utilizzato l'attributo class, in luogo dell'attributo id (vedi lezione precedente).
Il box ha una larghezza del 100% (essendo inserito all'interno del contenitore #contenuto, occupa tutta la larghezza messa a disposizione al suo interno), lascia uno spazio libero inferiore di 20 pixel (padding-bottom: 20px) ed ha il testo allineato alla sinistra.

La classe .testonotizia, applicata ai paragrafi interni, fa in modo che i testi stacchino dai bordi laterali di 10 pixel, favorendone la leggibilità e la riconoscibilità.

La classe .testonotn, invece, è stata utilizzata solo all'interno della sezione 'Argomenti' che, dovendo ospitare più di un contenuto, richiede un layout personalizzato.
Utilizzando le proprietà relative al bordo, viene visualizzata, tra una notizia e l'altra, una linea orizzontale di un pixel, tratteggiata (border-bottom-style: dashed;) e di colore celeste. La linea rientra lateralmente di 10 pixel (margin-right e margin-left: 10px;) e sotto di essa viene lasciato uno spazio libero di 20 pixel.

Vediamo, ora, come sono stati definiti i titoli di ogni singola notizia. Ci riferiamo ai testi 'Notizia della settimana, 'Appuntamenti', 'In evidenza' e 'Curiosando nel sito' (vedi contenuto.htm):

I titoli (definiti in html dal tag <h1>) avranno una dimensione del 130% (rispetto alla dimensione definita per il box, #centrale, che li contiene, che, a sua volta, eredita la dimensione definita per il body), saranno di colore celeste (#0033cc) con sfondo quadrettato bianco.
Con margin:0px si toglie il margine assegnato per default dall'html ai titoli, mentre il padding-left, fissato in 10 px, permette anche in questo caso di lasciare un po' di spazio alle destra del testo, che altrimenti sarebbe troppo attaccato al bordo.
Le lettere del titolo (letter-spacing: 0.1em;) sono leggermente spaziate tra di loro.

Con il selettore border (qui presentato in forma estesa) si disegnano nei bordi superiore e inferiore del titolo due linee tratteggiate di un pixel e colore celeste.

Un'osservazione. Nel caso in cui una misura sia di 0 pixel (o 0%, 0ems,...) si può omettere l'unità di misura e scrivere, ad esempio, margin: 0;. In tutti gli altri casi l'unità di misura è ovviamente obbligatoria.

L'ultimo spezzone di codice del Foglio di Stile è dedicato a ridefinire i link con i pseudo selettori a:link, a:visited e a:hover.

Lo stato di link viene evidenziato dal colore blu su sfondo bianco, mentre in caso di link visitato il testo sarà di colore viola su sfondo bianco.
L'effetto roll over (testo bianco su sfondo blu, senza sottolineatura) viene aggiunto per evidenziare maggiormente la presenza del link, a vantaggio in particolare modo di chi ha problemi di vista o di mobilità fine nell'uso del mouse.

Si noti che, a differenza di quanto visto nella lezione 8, gli pseudoselettori non sono preceduti dall'indicazione del box a cui si riferiscono. Il fatto che tutti i link presenti in altre sezioni siano, invece, preceduti dal box di riferimento, ha reso non necessaria l'aggiunta di #contenuto.

lezione precedente - sommario - lezione successiva