Il primo passo è avere nel div navigazione del CSS le
categorie in formato testuale.
Nel codice HTML ogni voce ha una proprietà, messa
all’interno dell’attributo “<a href”. Per esempio: <a href=”estate.html”> estate
</a> Così richiamiamo la pagina estate.html
e verrà visualizzato il testo “estate”.
Un’alternativa è usare il tag delle liste che setteremo con
i fogli di stile. Per fare ciò dovremo inserire ogni blocco di codice dentro l’elemento
per le liste <ul> </ul>. Ogni voce dovremo inserirla in un list
item <li> </li>
Nel nostro esempio:
<div
id="navigation">
navigazione
<ul>
<li>
<a href="estate.html"> estate </a> </li>
<li> <a href="autunno.html"> autunno </a> </li>
<li> <a href="inverno.html"> inverno </a></li>
<li> <a href="primavera.html"> primavera </a> </li>
</ul>
</div>
Con i fogli di stile è possibile creare altri livelli. Nel
nostro caso: quello che metto dentro le graffe di div#navigation ul{} vale solo
quando usiamo l’elemento per le liste <ul>. Lo stesso vale per
div#navigation li{} e gli altri.
Per mettere i blocchi in linea dovremo inserire inline
dentro div#navigation li{}.
Con <a> creiamo i link
Possiamo gestire la proprietà del “mouse over” inserendo
alcune proprietà con div#navigation a:hover, nel nostro caso il testo diventa
bianco e si sottolinea.
Le componenti come div#navigation a:hover si chiamano pseudoclassi.
Le pseudoclassi
sono quelle che con i “:” posso dare a parti specifiche del codice alcune
proprietà, diverse da quelle del foglio di CSS.
Per maggiori info sulle pseudoclassi:
Nessun commento:
Posta un commento