A Sbafo! Tutto per il web gratis e in italiano...

 AVVISO

   Aggiungi ai preferiti  

:: Sei qui: Home > Manuali > Indice generale dei manuali - Giochiamo con i fogli di stile - pagina 17
:: Home

Grafica
:: Sfondi
:: Pulsanti
:: Linee
:: Gioielli
:: Puntini
:: Gif animate
:: Clipart
:: Icone
:: Set completi

Risorse
:: Caratteri
:: Applet e Javascript
:: Suoni
:: Programmi
:: Manuali

Servizi
:: Spazio web
:: Contatori di accessi
:: Libri degli ospiti
:: Crea i tuoi metatag

Richieste
:: Pulsanti
:: Assistenza
:: Scrivici

Varie
:: Dicono di noi
:: Note legali
 
Crea il tuo sito con noi...
In collaborazione
Testi e Manuali
Pubblicità
Pubblicità
Noi sosteniamo
C'E' BISOGNO ANCHE DI TE
 
Indice di questo manuale Indice di tutti i manuali Area download

Giochiamo con i fogli di stile

Versione 1.0

Manuale scritto da Seatiger Team™ nel mese di agosto 2002

A SBAFO! Tutto per il web gratis e in italiano...

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

LEZIONE 10

I moduli

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

 

10.1 Aspetto delle varie voci di un modulo

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>
     <style type="text/css">
     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>
<form align="center">
<div class="text" align="center"><p>Scegli dal menù sottostante</p>
</div>
<div align="center"><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>
<div class="text" align="center"><p>Dimmi perché lo preferisci</p></div>
<div align="center"><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>
<div class="text" align="center"><p>Indica qui il tuo indirizzo di posta
elettronica</p></div>
<div align="center"><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>
</html>

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

 
Torna alla pagina precedente Vai alla pagina successiva
Pagina precedente Pagina successiva
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Registrazione dominio, spazio illimitato, 5 caselle di posta, a soli 24,79 euro all'anno iva inclusa.

www. .

Questo sito è ottimizzato per Explorer 5.0 o superiore, Java compatibile. Alcune delle applicazioni presenti potrebbero non essere supportate da Netscape© o da sistemi operativi diversi da Microsoft© Windows. Tutti i marchi citati sono di proprietà dei loro legittimi autori.

Webmaster: Seatiger Team