CSS
home esempi

1. introduzione
cos'è lo stile e perché è importante

2. dove si mette lo stile
in linea, incorporato, esterno
sintassi e classi

3. attributi del testo
font-family, -size, -style, -variant, -weight, -decoration

4. attributi dei margini, bordi e riempimento
margin, padding, border, width, float, clear

5. attributi di sfondo e posizionamento
position, background, visibility, overflow, z-index

6. effetti per MSIE
cursore, immagini, transizione,
scroll bar

7. effetti sui forms
position, background, visibility, overflow, z-index

 1. introduzione

cos'è lo stile

istruzioni per la formattazione di elementi di testo che costituiscono un vero e proprio linguaggio di stile.

<STYLE TYPE="text/css" MEDIA="strumento">
<!--linguaggio_di_stile-->
</STYLE>

TYPE= individua il linguaggio di stile utilizzato

  • text/css: il più usato (questo)
  • text/javascript: proposto da Netscape

MEDIA= individua lo strumento per il quale si specifica lo stile in questione

  • screen: schermo, il default
  • tty : terminali o devices con capacità grafiche limitate
  • tv : devices tipo-televisione (bassa risoluzione, a colori, limitata scrollabilità).
  • projection : proiettori
  • handheld : schermi piccoli, monocromatici, con ampiezza di banda limitata
  • print : documenti visualizzati sullo schermo in print preview mode
  • braille : devices con feedback tattile per il braille
  • aural : sintetizzatori vocali
  • all : tutti

perché è importante

dal punto di vista metodologico perchè tende a separare l'informazione dalla forma e perchè estende i tag HTML mediante l'uso delle classi;

nella pratica perchè permette di modificare la forma di un intero sito in poco tempo e senza errori.

Le principali caratteristiche sono:

  • flessibilità: posizionandoli in file separati i comandi di stile possono essere riutilizzati facilmente
  • indipendenza: sono supportati diversi linguaggi di stile (il più comune è CSS = Cascading Style Sheets)
  • ereditarietà: le istruzioni possono provenire da fonti differenti e concorrere nel formare "a cascata" lo stile della pagina
  • focalizzazione sullo strumento: è possibile indicare formattazioni particolari della pagina, a seconda dello strumento utilizzato (schermo, stampante, browser testuale, proiettore, etc)
  • differenzazioni: indicando stili in alternativa si possono offrire diversi modi di visualizzare lo stesso documento
  • performance: i comandi di stile sono caricati solo in caso di effettivo utilizzo da parte del browser, aumentando pertanto la velocità di trasferimento e impaginazione