|
Home -> Manuali e Tutorials -> Guida CSS -> Moduli e Pulsanti
Scarica il tutorial  | Stampa il tutorial  | Cerca nel sito 
MODULI E PULSANTI CON I CSS
In questo capitolo analizziamo i moduli di compilazione dati ed i relativi pulsanti; anche per questi elementi è possibile definire degli stili più o meno complessi per renderli più apprezzabili ai visitatori.
Vediamo subito un esempio completo:
<head>
<style type = "text/css">
.form { color: #0033FF;
font-family: 'Book Antiqua',
Verdana, 'Times New Roman', Serif; font-size: 15px;
font-weight : bold; text-decoration:none;
text-align:
center;padding-left:6px;padding-top:1px }
</style>
</head>
<body>
<form align = "center">
Scegli dal menù sottostante </p>
<center><p>
<select style = "color: #FF0000; font-family: Verdana, Serif; font-weight: bold; font-size: 12px; background-color: #FFFFAA" name = "selezione" size = "1">
<option>---- Il tuo browser ---- </option>
<option> Internet Explorer </option>
<option> Netscape </option>
<option> Opera </option>
<option> altro </option>
</select>
<br>
</p></center></div>
<p> Dimmi perché lo preferisci </p>
<center><p>
<textarea style = "color: #FF0000; font-family: Verdana, Serif; font-weight: bold; font-size: 12px; background-color: #FFFFAA" name = "comments" rows = "8" cols = "35">
</textarea>
<br>
</p></center></div>
<p> Indica qui il tuo indirizzo di posta elettronica </p></div>
<center><p><input type = "text" style = "color: #FF0000; font-family: Verdana, Serif; font-weight: bold; font-size: 12px; background-color: #FFD5D5" name = "email" size = "25">
<br>
<br>
<input type = "submit" name = "send" value = "Invia">
<input type = "reset" name = "reset" value = "Cancella">
</p></center></div>
</form>
</body>
|
Esaminiamola nei dettagli:
- il colore del carattere sarà blu ( color:#0033FF )
- utilizzeremo un carattere della famiglia serif, preferibilmente il Book Antiqua, oppure, in alternativa, il Verdana, il Times New Roman ( font-family: 'Book Antiqua', Verdana, 'Times New Roman', Serif )
- le dimensioni del carattere saranno di 15 pixels ( font-size: 15px )
- il carattere sarà grassetto ( font-weight: bold )
- il carattere sarà privo di decorazioni ( text-decoration:none )
- il testo sarà allineato al centro ( text-align:center )
- i due bottoni avranno determinati aspetti estetici di stile ( color:#FF0033; font-family:Verdana,Serif; font-size:10px; background-color:#FFFF00 ).
Ecco un altro esempio:
Ecco un altro esempio:
Torna su  | Indice Guida  | Pagina << 20 >>
|
