CSS Menù

Vorrei in questo tutorial illustrare brevemente come costruire un semplice menù ma dall'effetto simpatico attraverso l'uso di un foglio di stile. Ciò che otterremo sarà un menù come questo:

> Prima voce

> Seconda voce

> Terza voce

> Quarta voce

FOGLIO DI STILE STYLE.CSS

Per ottenere questo menù abbiamo bisogno di costruire un foglio di stile che chiameremo stile.css. Il nostro foglio di stile conterrà le seguenti istruzioni:

@charset "utf-8";

/* CSS Document */



.style1

{

font-family:"Trebuchet MS";

font-size:13px;

color:#000000;

}



#boldchar a:hover {color: #000000;font-weight:bold;}

#boldchar a:visited {color: #000000;}

#boldchar a {color: #000000; text-decoration:none;}

Sostanzialmente abbiamo definito una classe style1 nel quale definiamo le proprietà che deve avere il font del menù.
Poi definiamo una proprietà per i link e la chiamiamo boldchar.
Questa proprietà ci dice che quando viene passato il mouse sopra il link (hover), il colore del font deve rimanere scuro e deve trasformarsi in grassetto, se il link viene cliccato (visited) il colore deve rimanere scuro e mell'ultima riga si definisce che il link non deve avere sottolineatura (text-decoration:none).

Ora andiamo a costruire la pagina html contenente il menù. La chiamiamo menu_bold.html.

PAGINA MENU_BOLD.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS Menù</title>

</head>



<body>

<table width="160" border="0" cellpadding="4" bgcolor="#FFFFCC" style="border:1px dashed;border-color:#FFCC99;">

<tr>

<td style="border-bottom:1px dashed;border-color:#FFCC99;"><div class="style1" id="boldchar">&gt; <a href="#">Prima voce</a></div></td>

</tr>

<tr>

<td style="border-bottom:1px dashed;border-color:#FFCC99;"><div class="style1" id="boldchar">&gt; <a href="#">Seconda voce</a></div></td>

</tr>

<tr>

<td style="border-bottom:1px dashed;border-color:#FFCC99;"><div class="style1" id="boldchar">&gt; <a href="#">Terza voce</a></div></td>

</tr>

<tr>

<td><div class="style1" id="boldchar">&gt; <a href="#">Quarta voce</a></div></td>

</tr>

</table>

</body>

</html>