home page con xhtml strict

Lezione 14 - Il Foglio di Stile menudx.css

Il codice commentato

Scarica il file menudx.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:

Con le classi .menu2st e .menu2classi definiamo gli stili delle intestazioni dei due menu secondari, 'studenti' e 'dalle classi'. Avendo parecchie caratteristiche comuni (in realtà differiscono per i soli colori del testo e dello sfondo), abbiamo pensato di riunire i due selettori.
Per fare questo, prima di aprire la parentesi graffa, si devono scrivere le due classi separate da una virgola:
.menu2st, .menu2classi {... }.
All'interno delle parentesi sono scritte le proprietà con i rispettivi valori.
Si osservi, in particolare, che il box che contiene la scritta verrà disegnato lasciando un margine superiore di 10 pixel (margin-top: 10px) e laterale di 1 pixel (margin-right: 1px;
margin-left: 1px;), mentre le scritte, sono staccate dai bordi superiore e inferiore di 3 pixel (padding-top: 3px;
padding-bottom: 3px;).

Con il solo selettore .menu2classi si definiscono le proprietà che differiscono, rispetto a quelle appena definite, nel box che contiene la scritta 'dalle classi'. Il colore del testo sarà nero (#000000) e lo sfondo quadrettato azzurro (background-image: url(images/quadrazz.gif);).

Vediamo, ora, quali sono gli stili assegnati alle voci del menu.

Il menu secondario è organizzato come una lista non ordinata. Desiderando, però, che non venga visualizzato alcun elemento grafico come segnaposto delle singole voci, (nessun “puntoelenco”) viene assegnato il valore 'none' alla proprietà 'list-style-type' riferita al selettore #destra ul.

Si osservi che la presenza del box #destra davanti al tag ul fa in modo che la proprietà agisca sulle liste presenti solo nel box destro. In questo modo, eventuali altre liste presenti nel box #contenuto non risentiranno di tali attribuzioni e potranno essere visualizzate come liste in modo standard.

Con le classi .stud e .classi si definiscono le caratteristiche delle voci dell'elenco puntato dei due menu secondari, 'studenti' e 'dalle classi'.
E' importante sottolineare la presenza delle proprietà relative ai margini laterali, la cui presenza permette di sfruttare al meglio la larghezza a disposizione nel box.
I bordi destro e inferiore hanno funzione puramente decorativa e possono essere tranquillamente omessi.
I padding superiore ed inferiore sono invece importanti per staccare leggermente le scritte dai bordi e favorirne la leggibilità .

Con il solo selettore .classi si definiscono le proprietà diversificate nelle voci di menu relative al menu 'dalle classi' (si tratta del colore del testo, dello sfondo e del colore dei bordi destro e inferiore).

Ora mancano solo da definire gli effetti associati ai link:

I link relativi alle voci di menu definite nel box #destra non avranno sottolineatura in alcuno stato e si estenderanno lungo tutta la larghezza a disposizione (display: block;), favorendo, in questo modo, il puntamento da parte del mouse.

I pseudoselettori associati alle classi .stud e .classi hanno valori di proprietà diversi, in modo da personalizzare i link con il colore del testo e dello sfondo rispetto al tipo di menu ('studenti' o 'dalle classi') e allo stato del link (ad esempio il roll-over, definito con 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.

Risorse internet

template 'menu verticali con i css', da constile.org (con alcune indicazioni per superare un bug di Internet Explorer)

lezione precedente - sommario - lezione successiva