È possibile definire personalmente lo stile da attribuire ad ogni singolo tag all'interno della pagina Html ad esempio ridefinendo il comando H1 colore argento, sfondo verde, Arial e sottolineato

*Le principali caratteristiche di questo comando 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

*Sono stati introdotti due comandi da utilizzare con lo stile:

*<SPAN></SPAN>: continua senza interruzioni; utile per formattare frasi di poche parole

*<DIV></DIV>: manda a capo (come <P>); indicato per formattare testi più lunghi

   raggruppano gli elementi all'interno di un documento Html e consentono di applicare a tutto il contenuto una classe di stile

*Lo stile viene gestito da (in ordine crescente):

1. browser - formattazione di default delle pagine
2. utente - personalizzando le opzioni del browser
3. autore - attraverso il comando STYLE

*Lo stile può essere inserito:

1. singolo tag - vale per il singolo tag (CSS in linea)
2. HEAD - vale per tutto il documento html (CSS incorporati)
3. file esterno - vale per vari documenti html (CSS esterni)

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

*TYPE="text/css" individua il linguaggio di stile utilizzato (è il default, ma esistono anche CSS in formato text/jass, cioe' accessibili in javascript).

*strumento: 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

*linguaggio_di_stile ha la seguente sintassi

• tag_da_modificare{Attributo:Valore;...}
  
• Ecco qualche semplice esempio
  
• Un elenco degli attributi e dei valori possibili
  

  Le opzioni del testo

  Un esempio: i link evidenziati

  Font	Attributo	Valore
  	font-family	carattere
  	font-size	in (pollici: udm anglosassone) pt (punti: 1/72 di pollice in altezza) px (pixel: numero di punti accesi sullo schermo) cm (udm poco usata) percentuale (es. 200%: indica la misura rispetto alla grandezza default del font dell'utente)
  	font-style	normal: lascia invariato lo stile default del browser italic: rende il font italico oblique: simile a italico, ma leggermente obliquo verso destra
  	font-variant	normal: lascia invariato il default small-caps: rende il font maiuscoletto
  	font-weight	extra-bold, demi-bold, bold, medium, light, demi-light, extra-light: definisce lo spessore del font
  	text-decoration	none, underline, overline, line-through Usato per fare i link non sottolineati
  	text-transform	uppercase, capitalize, lowercase
  	text-align	left, center, right, justify (allineamento testo)
  	text-indent	pt px cm em (udm pari alla larghezza della lettera m): dimensione indentazione
  	color	imposta il colore del testo
  	line-height	pt px cm in em % (distanza verticale tra le varie linee di testo: è in proporzione a font-size)
  	letter-spacing	pt px cm in em (distanza tra le lettere del testo: è in proporzione a font-size)

   

  ogni elemento dello stile è circondato da un box
  di cui si possono moficare i margini, i bordi, il riempimento

  Box in, pt, px, cm, em	Attributo	Valore
  	margin-top	distanza del margine superiore dagli altri elementi
  	margin-right	distanza del margine destro dagli altri elementi
  	margin-bottom	distanza del margine inferiore dagli altri elementi
  	margin-left	distanza del margine sinistro dagli altri elementi
  	margin	consente di attribuire la distanza di tutti i 4 margini in senso orario dall'alto
  	padding-top padding-right padding-bottom padding-left	definisce la distanza interna tra i bordi del box e il contenuto
  	padding	definisce i 4 lati in senso orario dall'alto
  	border-top-width border-right-width border-bottom-width border-left -width	con le udm viste oppure thin, medium, thick imposta le dimensioni del bordo
  	border-width	definisce i 4 lati in senso orario dall'alto
  	border-color	stabilisce il colore del bordo (unico per i 4 lati)
  	border-style	none, dotted, dashed, solid, double, groove, [ridge, inset, outset: tridimensionali]; stabilisce lo stile del bordo (unico per i 4 lati)
  	border-top border-right border-bottom border-left	riepiloga tutti gli attributi precedenti del bordo (larghezza, colore, stile)
  	border	definisce i 4 lati in senso orario dall'alto
  	width	larghezza orizzontale del box auto: consente al box di adattarsi al contenuto
  	float	left, right, none stabilisce l'allineamento del testo

   

  è possibile modificare il colore del testo
  e/o l'immagine di sfondo di ogni elemento definito dallo stile

  Sfondo	Attributo	Valore
  	color	imposta il colore del testo dell'elemento
  	background-color	imposta il colore dello sfondo dell'elemento
  	background-image	url(nomefile.gif) imposta l'immagine di sfondo
  	background-repeat	repeat-x: replica l'immagine di sfondo solo in orizzontale repeat-y: replica l'immagine di sfondo solo in verticale repeat: replica l'immagine di sfondo sia in orizzontale sia in verticale no-repeat: inserisce l'immagine una sola volta
  	background-position	left, center, right: in orizzontale top, center, bottom: in verticale decide il punto in cui far partire l'immagine di sfondo
  	background	riepiloga tutti gli attributi dello sfondo precedenti (colore, immagine, ripetizione dell'immagine, punto di partenza dell'immagine)

   

  il posizionamento tradizionale (o statico) prevede il flusso dei dati
  dal margine in alto a sinistra, senza possibilità di sovrapporre gli elementi

  un esempio: l'ombreggiatura di un testo

  Posizionamento dinamico	Attributo	Valore
  	position	absolute: consente di posizionare gli elementi in qualsiasi punto della pagina relative: posiziona gli elementi in relazione a quelli che lo precedono
  	top, left	in, pt, px, cm definiscono la distanza dell'elemento in verticale e in orizzontale dal margine in alto a sinistra
  	width, height	larghezza in orizzontale e in verticale dell'elemento
  	visibility	visible, hidden determina la visibilità o meno di un elemento
  	z-index	stabilisce una gerarchia tra elementi eventualmente sovrapposti (l'elemento con il numero intero più alto risulta sopra agli altri)
  	overflow: permette di gestire il caso in cui l'elemento ecceda l'area impostata	scroll: si attivano le barre di scorrimento hidden: il contenuto in eccesso viene tagliato se non viene utilizzato il box si adatta al contenuto

• Sintassi abbreviata
• Il tutorial dell'Università degli Studi di Modena
  solo per MS Internet Explorer:

  effetti sul cursore e sulle immagini

  effetti sui forms

 

*altri esempi:

1. un sorgente e il risultato
2. esempi Microsoft
3. altri esempi Microsoft: web embedding font - la possibilità di fornire automaticamente i font usati all'interno delle pagine