I moduli

Css con Front Page
La sintassi
Creare un foglio
Applicare uno stile
Le classi
Gli elenchi
I moduli
I puntatori
Css in linea
Sfondi
Testo
Selettori
Links
Margini e bordi
Fonts
Le tabelle
Le immagini e i piani

Css con FP

Modificare l' aspetto delle varie voci di un modulo

Per personalizzare con un foglio di stile i moduli o form utilizzeremo fogli di stile interni ed in linea. Useremo comunque elementi di stile che abbiamo già visto ed anche delle classi o dei selettori di identità.

Per definire l'aspetto generale dello scritto sulla pagina HTML utilizzeremo una classe così strutturata:

.text {background:#FFFF00; color: #0000FF;

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}

Esaminiamola nei dettagli.

lo sfondo della pagina sarà giallo ( background:#FFFF00)

il colore del carattere sarà blu (color:#0000FF)

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)

la pagina avrà un riempimento da sinistra di 6 pixels (padding-left: 6px) e un riempimento dall'alto di 1 pixels (padding-top: 1px)

I fogli di stile interni, applicati ad ogni parte del modulo, a questo punto del manuale, sarai in grado di capirli da solo. Un ultima precisazione: il modulo è solo un esempio e NON E' FUNZIONANTE.

Vediamo subito l'esempio:

<html>

<head>

<title>Titolo del documento</title>

BODY{ background:#FFFFD1;color:#000000;}

.text {background:#FFFF00; color: #0000FF;

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>

<div class="text" align="center"><p>Scegli dal menù sottostante</p>

</div>

<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>

<div class="text" align="center"><p>Dimmi perché lo preferisci</p></div>

<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>

<div class="text" align="center"><p>Indica qui il tuo indirizzo di posta

elettronica</p></div>

<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>

</p></center></div>

</form>

</body>

</html>

Guarda l'esempio

Nota: nell'esempio precedente sono stati usati fogli di stile in linea anche per farti comprendere come possa modificarsi ogni elemento della pagina. Avremmo però potuto usare delle altre classi e dei selettori d'identità ed il risultato sarebbe stato identico.