CSS Cascading Style Sheet

Questo sito utilizza cookie, anche di terze parti. Se vuoi saperne di più leggi la nostra Cookie Policy. Scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all’uso dei cookie.I testi seguenti sono di proprietà dei rispettivi autori che ringraziamo per l'opportunità che ci danno di far conoscere gratuitamente a studenti , docenti e agli utenti del web i loro testi per sole finalità illustrative didattiche e scientifiche.

CSS Cascading Style Sheet

CSS

CSS significa Cascading Style Sheet.
HTML è un linguaggio per la descrizione della struttura di un documento. Un documento è composto da più elementi e la pagina HTML fa da contenitore per questi elementi.
CSS è un linguaggio di formato che serve per definire la presentazione grafica del documento.
Se nel documento non ci sono direttive CSS, la presentazione del documento dipenderà dai valori di default del browser.

I comandi CSS possono essere inseriti in diverse parti del documento HTML o in un file esterno al documento HTML.

A seconda di dove vengono inseriti i comandi CSS, si ottengono tre tipi di fogli di stile:

FOGLI DI STILE IN LINEA – quando i comandi sono inseriti all’interno di elementi del documento tra i tag di <BODY> e </BODY>
FOGLI DI STILE INCORPORATI – quando i comandi CSS sono inseriti all’interno del documento HTML prima di </HEAD>
FOGLI DI STILE ESTERNI – quando i comandi CSS sono inseriti in un file (con estensione .css) separato dal documento HTML.

FOGLI DI STILE IN LINEA
Con i fogli di stile in linea, si implementa la presentazione di singoli elementi all’interno di un singolo documento HTML. In questo caso le direttive CSS si trovano nei singoli tag di elemento.

Esempio 1: FOGLI DI STILE IN LINEA

<HTML>
<HEAD>
<TITLE>
esempio di stile in LINEA
</TITLE>
</HEAD>
<BODY>

            IN QUESTO ESEMPIO VIENE DEFINITO UNO STILE SPECIFICO PER ALCUNI SINGOLI ELEMENTI DEL DOCUMENTO:

<H4>    I COMANDI CSS SI TROVANO ALL’INTERNO DEL TAG DELL’ELEMENTO DA FORMATTARE </H4>
<BR>
<P STYLE = COLOR:RGB(255,0,0)> QUESTO è UN PARAGRAFO FORMATTATO, CHE RISULTA COLORATO DI ROSSO </P>
<UL>
<LI>
QUESTO è IL PRIMO ELEMENTO DI UNA LISTA E NON è FORMATTATO
</LI>
<LI STYLE= COLOR:RGB(0,255,0)>
QUESTO è IL SECONDO ELEMENTO DI UNA LISTA, FORMATTATO E COLORATO DI   VERDE
</LI>
</UL>
<BR>

QUESTA PARTE DEL DOCUMENTO NON è Nè UN PARAGRAFO Nè UNA LISTA E NON è NEMMENO FORMATTATO

<P> QUESTO è UN ALTRO PARAGRAFO, MA NON è FORMATTATO, QUINDI è NORMALE</P>
</BODY>
</HTML>

FOGLI DI STILE INCORPORATI
Si utilizzano i fogli di stile incorporati per caratterizzare allo stesso modo gruppi di elementi all’interno di uno stesso documento. Le direttive riguardano tutti gli elementi del documento.

Esempio 2 : FOGLI DI STILE INCORPORATI.

<HTML>
<HEAD>
<TITLE>
esempio di stile incorporato
</TITLE>

<STYLE TYPE="TEXT/CSS">
P{COLOR:RGB(255,0,0)}
UL{COLOR:RGB(0,255,0)}
</STYLE>

</HEAD>

<BODY>
IN QUESTO ESEMPIO VIENE DEFINITO LO STILE DI DUE GRUPPI DI ELEMENTI DEL DOCUMENTO:
<BR>
- I PARAGRAFI <BR>
- LE LISTE    <BR>
<h4>    I COMANDI CSS SI TROVANO PRIMA DEL TAG &lt /HEAD &gt.
</h4>
<BR>

<P> QUESTO è UN PARAGRAFO, CHE RISULTA COLORATO DI ROSSO </P>
<UL>
<LI>
QUESTO è IL PRIMO ELEMENTO DI UNA LISTA, COLORATA DI VERDE
</LI>
<LI>
QUESTO è IL SECONDO ELEMENTO DI UNA LISTA, COLORATA DI VERDE
</LI>
</UL>
<BR> QUESTA PARTE DEL DOCUMENTO NON è Nè UN PARAGRAFO Nè UNA LISTA

<P> QUESTO è UN ALTRO PARAGRAFO, QUINDI è ROSSO</P>
</BODY>
</HTML>

SELETTORI DI CLASSE
E’ possibile utilizzare l’attributo CLASS degli elementi, per caratterizzare in modo diverso (quindi con stili diversi) elementi dello stesso tipo. Se ad esempio volessimo avere la possibilità di definire 2 aspetti differenti per i paragrafi, dovremmo definire due CLASSI di paragrafo, ciascuna con le proprie caratteristiche.
Nel seguente esempio, scegliamo di avere un colore rosso e un carattere più grande per i paragrafi di classe “codice” e un colore blu con un carattere più piccolo per i paragrafi di classe “pseudo”. Una volta definite le due classi nel tag style, utilizzando l’attributo CLASS dell’elemento P, possiamo applicare lo stile scelto per ciascun paragrafo.

Esempio 3 : UTILIZZO DI SELETTORI DI CLASSE.
<HTML>
<HEAD>
<TITLE>
ESEMPIO DI UTILIZZO DI CLASS
</TITLE>
<STYLE TYPE="TEXT/CSS">
P.codice {COLOR:RGB(255,0,0);FONT-SIZE:50}
P.pseudo {COLOR:RGB(0,0,255)}
BODY {FONT-SIZE:25}
</STYLE>
</HEAD>
<BODY>
In questo documento HTML si utilizzano fogli di stile incorporati.<br>
Con questo esempio si mostra come formattare diversamente elementi di una stessa categoria<br>
utilizzando i selettori di classe.<br>

<P CLASS="codice">
questo paragrafo è di classe &quot codice &quot <br>
Con il colore rosso e carattere più grande viene visualizzato il codice
</P>
<P CLASS="pseudo">
Quest'altro paragrafo è di classe &quot pseudo &quot e quindi viene
visualizzato in blu e con carattere più piccolo
</P>

<P CLASS="codice">
indovina di che classe è questo paragrafo ...</P>
<P CLASS="pseudo">
e questo ? ? ...</P>
<P> e questo??</P>
</body>
</html>

SELETTORE UNIVERSALE
Si possono usare i selettori di classe universali per creare delle classi che possono essere utilizzate da elementi di diverso tipo. La sintassi è la seguente:
*.NomeClasse { ….. }

Esempio 5 : SELETTORE DI CLASSE UNIVERSALE
<HTML>
<HEAD>
<TITLE>
ESEMPIO DI UTILIZZO DI SELETTORE DI CLASSE UNIVERSALE
</TITLE>
<STYLE TYPE="TEXT/CSS">
*.testospeciale{COLOR:RGB(255,0,0);FONT-SIZE:50;FONT-STYLE:oblique}
*.testosquallido{COLOR:green;FONT-SIZE:10}
BODY{FONT-SIZE:25}
</STYLE>
</HEAD>
<BODY>
In questo documento HTML si utilizzano ancora fogli di stile incorporati.<br>
Con questo esempio si mostra come formattare allo stesso modo elementi di categorie diverse <br>
utilizzando i selettori di classe universali.<br>

<P CLASS="testospeciale">
questo paragrafo è di classe &quot testo speciale &quot <br>
Con il colore rosso, il carattere più grande e corsivo viene visualizzato un testo speciale
</P>
<P CLASS="testosquallido">
Quest'altro paragrafo è di classe &quot testosquallido&quot e quindi viene
visualizzato in verde e con carattere più piccolo
</P>

<PRE CLASS="testospeciale">
indovina

di che classe è

questo testo

preformattato ...

</PRE>
<PRE CLASS="testosquallido">

e
questo

? ? ...

</PRE>

<P> e questo paragrafo di che classe è ??</P>
</body>
</html>

FOGLI DI STILE ESTERNI
Si utilizzano i fogli di stile esterni per caratterizzare allo stesso modo gruppi di elementi presenti in documenti diversi.

Esempio 6 : FOGLI DI STILE ESTERNI.
CREATE DUE FILE DI TESTO CONTENENTI:

IL PRIMO IL SEGUENTE CODICE HTML E SALVATO CON NOME “prova_esterni.html”.
IL SECONDO CONTENENTE LE DUE RIGHE DI CODICE CSS E SALVATO COME “prova.css”.

APRITE DA EXPLORER IL FILE “prova_esterni.html”.

CODICE HTML
<HTML>
<HEAD>
<LINK REL="Stylesheet" HREF="prova.css"
TYPE="TEXT/CSS">
</HEAD>
<BODY>
<H3> LO STILE PER L’INTERO DOCUMENTO, è STATO DEFINITO NEL FILE &quot prova.css &quot
</H3>
<H4> il link al foglio di stile si trova all’interno dei tag &lt HEAD &gt e &lt /HEAD &gt </h4>

<P CLASS="codice"> questo è codice</P>
<P CLASS="pseudo"> questo è pseudo </P>
</BODY>
</HTML>

CODICE CSS
P.codice{COLOR:RGB(255,0,0)}
P.pseudo{COLOR:RGB(0,255,0)}

Se per un elemento fossero applicati più stili, la priorità più alta viene assegnata al foglio di stile in linea, seguito dal foglio di stile incorporato e infine da quello esterno.
I Selettori
Selettore di elementi (type selector)
È il più semplice dei selettori. È costituito da uno qualunque degli elementi di (X)HTML.
Esempi
h1 {color: #000000;}
p {background: white; font: 12px Verdana, arial, sans-serif;}
table {width: 200px;}
È possibile nei CSS raggruppare diversi elementi al fine di semplificare il codice. Gli elementi raggruppati vanno separati da una virgola.
Esempio
h1 {background: white;}
h2 {background: white;}
h3 {background: white;}
Tutti e tre gli elementi hanno uno sfondo bianco. Invece di scrivere tre regole separate si può fare così:
h1, h2, h3 {background: white;}
Selettore universale (universal selector)
Il selettore universale serve a selezionare tutti gli elementi di un documento. Si esprime con il carattere * (asterisco).
Esempio
* { color: red ; }
<H1> Titolo H1: il testo è rosso </H1>
<p> Paragrafo: anche qui il testo è rosso </p>
selettore di Classe
Per definire una classe si usa far precedere il nome da un semplice punto:
.nome_della_classe
Questa è la sintassi di base. Un selettore classe così definito può essere applicato a tutti gli elementi di un documento (X)HTML.
Esiste un secondo tipo di sintassi:
<elemento>.nome_della_classe
Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola:
p.testorosso {color: red;}
lo stile verrà applicato solo ai paragrafi che presentino l'attributo class="testorosso". Anche qui è importante stabilire un minimo di strategia. Il secondo tipo di sintassi va usato solo se pensate di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece ritenete di doverla applicare a tipi diversi usate la sintassi generica.
Una terza possibile modalità è quella che prevede la dichiarazione di classi multiple:
p.testorosso.grassetto {color:red; font-weight:bold;}
Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore. Avranno dunque il testo rosso e in grassetto questi paragrafi:
<p class="grassetto testorosso maiuscolo">..</p>
<p class="testorosso grassetto">...</p>
ma non questo, perchè solo uno dei nomi è presente come valore di class:
<p class="grassetto">...</p>
Esempi di questa e delle altre modalità in questa pagina di esempio (http://html.it/guide/esempi/css/test/sel_classi.html).
SELETTORE ID
La sintassi di un selettore ID è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #:
#nome_id
Con questa regola:
#titolo {color: blue;}
assegniamo il colore blue all'elemento che presenti questa definizione:
<h1 id="titolo">...</h1>
Come per le classi è possibile usare una sintassi con elemento:
p#nome_id
In realtà questa modalità è assolutamente superflua. Se l'id è univoco non abbiamo alcun bisogno di distinguere l'elemento cui verrà applicata. Inoltre: la sintassi generica si rivela più razionale e utile. Se si dichiara un ID semplice è possibile assegnarlo a qualunque tipo di elemento. Posso usarlo su un paragrafo, ma se poi cambio idea posso passare tranquillamente ad un div senza dover modificare il foglio di stile. Usando la seconda sintassi, invece, sono costretto a rispettare l'elemento definito nel selettore.
Gli Pseudo-elementi
Vi sono parti in un documento (X)HTML che non sono rappresentate da nessun tag in particolare, ma che è possibile comunque modificare e formattare secondo i propri desideri con i CSS grazie ai cosiddetti pseudo-elementi. Il supporto di questo tipo speciale di selettore è garantito solo dai browser più recenti.
:first-letter
Con questo selettore è possibile formattare la prima lettera di qualunque elemento contenente del testo. Le proprietà modificabili sono ovviamente tutte quelle relative al carattere e al testo, ma anche quelle legate al colore, allo sfondo, ai margini e al padding.
Sintassi
La sintassi di tutti gli pseudo-elementi è soggetta alla stesse regole. La più importante è che essi non possono essere dichiarati da soli, ma vanno sempre collegati ad altri selettori. Non importa di che tipo essi siano. La definizione più semplice è quella che prevede l'applicazione di uno pseudo-elemento a un selettore semplice:
p:first-letter {color: red; font-weight: bold;}
È possibile anche usare classi:
p.nome_classe:first-letter {color: red; font-weight: bold;}
O selettori di tipo ID:
#nome_id:first-letter {color: red; font-weight: bold;}
Per tutte le regole usate negli esempi il testo degli elementi presenterà la prima lettera rossa e in grassetto.
:first-line
Imposta lo stile della prima riga di un elemento contenente del testo.
Sintassi
Valgono le stesse regole generali viste per :first-letter.
Esempi
p:first-line {color: blue;}
p.nome_classe:first-letter {color: blue;}
td#nome_id:first-letter {color: blue;}
:before
Grazie allo pseudo-elemento :before è possibile inserire nel documento un contenuto non presente nello stesso. Più esattamente, con :before si inserisce contenuto prima dell'elemento definito nel selettore. Il contenuto da inserire si definisce tramite la proprietà content e può essere una semplice stringa di testo, un URL che punti a un'immagine o ad un'altro documento, un contatore numerico, semplici virgolette.
Sintassi
Facciamo un esempio per chiarire l'uso. Immaginiamo di voler inserire un'immagine particolare prima di ogni titolo <H1>. Useremo in questo modo lo pseudo-elemento :before:
h1:before {content: url(immagine.gif);}
Volendo inserire una stringa essa va racchiusa tra virgolette:
h1:before {content: "Il titolo è...";}
:before non è supportato da Explorer per Windows.
:after
Pseudo-elemento complementare a :before. L'unica differenza è che il contenuto viene inserito dopo l'elemento specificato nel selettore.
Sintassi
h1:after {content: url(immagine.gif);}
h1#nome_id {content: "Testo del titolo";}
Stringhe
Alcune proprietà dei CSS possono avere come valore una stringa di testo da inserire come contenuto aggiunto nel documento. I valori espressi da stringhe vanno sempre racchiusi tra virgolette. Le proprietà in questione sono tre: content, quotes, text-align (ma solo per le tabelle definite con i CSS).
Valori URI
Si tratta di URL che puntano a documenti esterni (in genere immagini, come negli sfondi). Possono essere URL assoluti o relativi. In questo caso il path fa sempre riferimento alla posizione del foglio di stile e non del documento HTML. La definizione dell'indirizzo è sempre introdotta dalla parola chiave url e va inserita tra parentesi tonde senza virgolette. Esempio: url(immagini/sfondo.gif).
Esempio 1:
<html>
<head>
<style type="text/css">
*:first-letter {color:red; font-size:40;}
</style>
<body>
Ogni parola di un elemento inizia con una lettera rossa grande.
<h1>Questo è un elemento h1 </h1>
<pre><center> Questo
è
un
elemento
pre
centrato
</center></pre>
<p>Questo è un elemento paragrafo</p>
</body>
</html>

Esempio 2:
<html>
<head>
<style type="text/css">
*:first-line {color:red; font-size:40;}
</style>
<body>
Ogni parola di un elemento inizia con una lettera rossa grande. Questo è l'elemento body.
<h1>Questo è un elemento h1 <br> Questa è la seconda riga di h1</h1>
<pre><center> Questo
è
un
elemento
pre
centrato

</center></pre>
<p>Questo è un elemento paragrafo. <br> Questa è la seconda riga del paragrafo.</p>
</body>
</html>
Il box model
Una pagina (X)HTML non è altro che un insieme di box rettangolari. Tutto l'insieme di regole che gestisce l'aspetto visuale degli elementi blocco viene in genere riferito al cosiddetto box model.
Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS. La figura qui sotto mostra visivamente tali componenti:

Partendo dall'interno abbiamo:

l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width. Quelle verticali con height.
il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.
il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

Quando realizziamo una pagina (X)HTML senza fogli di stile è il browser ad applicare per alcune di queste proprietà le sue impostazioni predefinite. Per esempio, introdurrà un certo margine tra un titolo e un paragrafo o tra due paragrafi. La novità è che con i CSS possiamo controllare con precisione al pixel tutti questi aspetti.
Il box model è governato da una serie di regole di base concernenti la definizione di un box e il suo rapporto con gli altri elementi.
1. Larghezza del box
Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box . La prima è data dal valore della proprietà width. La seconda è data da questa somma:
margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro
Come si vede infatti nella figura margini, padding e bordi devono considerarsi a tutti gli effetti parte dell'area complessiva dell'elemento.

2. Larghezza ed elemento contenitore
Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore.

3. Uso del valore auto
Solo per tre proprietà è possibile impostare il valore auto: margini, altezza e larghezza (width). L'effetto è quello di lasciar calcolare al browser l'ammontare di ciascuna di esse in base alla risoluzione dello schermo e alle dimensioni della finestra.
Solo i margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza.

4. Margini verticali e orizzontali tra gli elementi
Per due box adiacenti in senso verticale che abbiano impostato un margine inferiore e uno superiore la distanza non sarà data dalla somma delle due distanze. A prevalere sarà invece la distanza maggiore tra le due. E' il meccansimo del cosiddetto margin collapsing. Tale meccanismo non si applica ai box adiacenti in senso orizzontale.

Esempio:
<html>
<head>
<style type="text/css">
#div1 {
background: red;
margin : 100px;
border : 4px solid pink;
padding : 10px;
width : 150px;
height : 100px;
}
#div2 {
background: green;
margin : 50px;
border : 8px solid silver;
padding : 50px;
width : 150px;
height : 100px;
}
</style>
</head>
<body>
<table >
<th colspan=2 id="div1">tabellonica</th>
<tr>
<td id="div1">uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno uno <br>
il bordo è 4 solid; il padding 10; la larghezza è 150; l'altezza varia a seconda del contenuto.</td>
<td id="div1">due</td>
</tr>
<tr>
<td id="div1">testo td</td>
<td id="div1">altro testo td</td>
</tr>
</table>
<p id="div1">paragrafo di tipo div1: il margine è 100; il bordo è 4 solid; il padding 10;
la larghezza è 150; l'altezza varia a seconda del contenuto.</p>
<p id="div1">altro paragrafo di tipo div1</p>
<p id="div2">paragrafo di tipo div2: il margine è 50; il bordo è 8 solid; il padding 50;
la larghezza è 150; l'altezza varia a seconda del contenuto.</p>
<p id="div2">altro paragrafo di tipo div2</p>
</html>
Gestione del colore
Definizione del colore:

Parole chiave

#RRGGBB

Le semplici 16 parole chiave non esauriscono la gamma dei colori visualizzabili su un monitor moderno. Già in HTML era possibile impostare il colore di un elemento servendosi di codici esadecimali. In essi, le prime due lettere (o numeri) corrispondono ai valori per il colore rosso (RED), la seconda coppia fa riferimento al verde (GREEN), l'ultima al blue (BLUE).
La proprietà color
Per ogni elemento si possono definire almeno tre colori:

il colore di primo piano (foreground color)
il colore di sfondo (background color)
il colore del bordo (border color)

La proprietà color definisce esclusivamente:

il colore di primo piano, ovvero quello del testo
il colore del bordo di un elemento quando non si imposti esplicitamente quest'ultimo con le proprietà border o border-color .

Sintassi
La proprietà color si applica a tutti gli elementi ed è ereditata. Significa che se si imposta il colore per un elemento esso sarà ereditato da tutti gli elementi discendenti per cui non si definisca esplicitamente un altro colore. La sintassi è semplice:
selettore { color: <valore> }
Valore è qualunque valore di un colore definito (ad es. black | navy …)
Esempi
p {color: black; background-color: white; }
.p6 {
color: black;
border : 1px solid;
}
.p7 {
color: black;
border : 1px solid red;
}
Gestione dello sfondo
La scelta dello sfondo in HTML si restringe a due elementi: il corpo principale della pagina (<BODY>) o le tabelle. Grazie ai CSS questa limitazione viene rimossa .
Ecco la lista delle proprietà applicabili a tutti gli elementi:

background-color
background-image
background-repeat
background-attachment
background-position

Ciascuna di essa definisce un solo, particolare aspetto relativo allo sfondo di un elemento:
background-color
Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi
selettore {background-color: <valore>;}
Valori

un qualunque colore
la parola chiave transparent

Usando transparent come valore un elemento avrà come colore quello dell'elemento parente.
Esempi
body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)
background-image
Definisce l'URL di un'immagine da usare come sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi
selettore { background-image: url(<valore>); }
Valori

un URL assoluto o relativo che punti ad un'immagine
la parola chiave none. Valore di default.

Usare none equivale a non impostare la proprietà: nessuna immagine verrà applicata come sfondo.
Esempi
body {background-image: url(sfondo.gif); }
div body {background-image: url(http://www.server.it/images/sfondo.gif); }
Usando questa proprietà da sola si ottiene lo stesso risultato che in HTML si aveva con l'attributo background .
background-repeat
Con questa proprietà iniziano le novità. Essa consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata.
Sintassi
selettore {background-repeat: <valore>;}
Valori

repeat. L'immagine viene ripetuta in orizzontale e verticale. E' il comportamento standard.
repeat-x. L'immagine viene ripetuta solo in orizzontale.
repeat-y. L'immagine viene ripetuta solo in verticale.
no-repeat. L'immagine non viene ripetuta.

Esempi
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }
background-attachment
Con questa proprietà si imposta il comportamento dell'immagine di sfondo rispetto all'elemento cui è applicata e all'intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa. Proprietà non ereditata.
Sintassi
selettore {background-attachment: <valore>;}
Valori

scroll. L'immagine scorre con il resto del documento quando si fa lo scrolling della pagina
fixed. L'immagine rimane fissa mentre il documento scorre

Questa proprietà consente risultati estetici di grande impatto ed è consigliabile, per ottenerne il meglio, usarla sia in combinazione con le altre proprietà sia con immagini grandi.
Esempi
body { background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: fixed; }
background-position

Proprietà un pò complessa. Definisce il punto in cui verrà piazzata un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Si applica solo agli elementi blocco o rimpiazzati. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser. Proprietà non ereditata.
Sintassi
selettore {background-position: <valore> o <valori>;}
Valori
I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull'asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:
con valori in percentuale
con valori espressi con unità di misura
con le parole chiave top, left, bottom, right

ESEMPIO:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
}
Significa che l'immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra. La scelta delle percentuali assicura una maggiore affiidabilità a risoluzioni diverse. Allo stesso modo si potevano utilizzare le parole chiave:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: center center;
}
l'immagine di sfondo apparirà centrata in entrambe le direzioni .
Nel definire le coordinate, sarebbe opportuno impostare due valori. Definendone uno solo, esso sarà usato sia per l'asse orizzontale che per quello verticale.
background
E veniamo alla proprietà background. Con essa, ricordiamolo, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo.
Sintassi
selettore {background: background-color background-image background-repeat background-attachment background-position;}
I valori non vanno separati da virgole. L'ordine non è importante, ma quello dato è il più logico e andrebbe rispettato: si va in ordine di importanza.
Esempio
body { background: white url(sfondo.gif) repeat-x fixed; }
Esempio:
<html>
<head>
<style type="text/css">
*.escolor{color:pink; background-color:red; border-color:blue;border-style:solid ;
font-size:50;margin=100;}
</style>
</head>
<body>
<p CLASS=escolor>paragrafo di classe escolor: lo sfondo è rosso; il bordo è blu;
il foreground, cioè il colore in primo piano (quello del carattere) è rosa;
la dimensione del carattere è 50; il margin è 100</p>
<h1 CLASS=escolor> anche questo h1 è di classe escolor. La dimensione del carattere è sempre 50</h1>
<h6 class=escolor> questo è un h6 sempre di classe escolor. Ha lo stesso carattere di h1.</h6>
</body>
</html>

Gestione del testo: proprietà di base
In HTML si usava il tag <font>. In CSS le proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante. Le proprietà di base sono quelle che definiscono i seguenti aspetti:

il font da usare
la sua dimensione
la sua consistenza
l'interlinea tra i paragrafi
l'allineamento del testo
la sua decorazione (sottolineature e simili)

font-family
La proprietà font-family serve a impostare il tipo di carattere di una qualunque porzione di testo. Si applica a tutti gli elementi ed è ereditata.
E’ possibile impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativi:
p {font-family: arial, Verdana, sans-serif;}
Quando la pagina verrà caricata, il browser tenterà di usare il primo font della lista. Se questo non è disponibile userà il secondo. In mancanza anche di questo verrà utilizzato il font principale della famiglia sans-serif presente sul sistema. E’ opportuno inserire alla fine l'indicazione di una famiglia generica. Esse sono cinque (tra parentesi riportiamo i caratteri predefiniti su ciascuna sui sistemi Windows):

serif (Times New Roman)
sans-serif (arial)
cursive (Comic Sans)
fantasy (Allegro BT)
monospace (Courier)

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette.
Sintassi
selettore {font-family: <font 1>, <font2>, ....,<famiglia generica>;}
Esempio
div {font-family: Georgia, "Times New Roman", serif;}
Esempio
<html>
<head>
<style type="text/css">
*.TNR{font-family:"Times New Roman";
font-size:50;}
*.mono{font-family:Courier;
font-size:50;}

*.SS{font-family:arial;font-size:50;
*.spazioso{margin:100;}
</style>
</head>
<body class=spazioso>
<p CLASS=TNR>paragrafo in Times New Roman</p>
<h1 CLASS=mono> h1 in Courier</h1>
<pre class=SS> testo
preformattato
in
arial
</pre>
</body>
</html>
font-size
Insieme a font-family è la proprietà considerata essenziale nella definizione dell'aspetto del testo, di cui definisce le dimensioni. Applicabile a tutti gli elementi ed ereditata.
Sintassi
selettore { font-size: <valore>; }
Valori
I valori delle dimensioni del testo possono essere espressi in vari modi.
I diversi sistemi si possono distinguere a seconda che definiscano le dimensioni in senso assoluto o relativo. Dimensione assoluta significa che essa non dipende da nessun altro elemento ed è quella definita dall'unità di misura usata. Dimensione relativa significa che essa viene calcolata in base alla dimensione del testo dell'elemento parente.
Sono valori assoluti:

le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large
quelli espressi con le seguenti unità di misura: pixel (px), centimetri (cm), millimetri (mm), punti (pt), picas (pc), pollici (in), x-height(ex). Di tutte queste unità le uniche proponibili per il testo sono punti e pixel. Si consiglia di usare la prima solo per CSS destinati alla stampa.

Sono valori relativi:

le parole chiave smaller e larger
quelli espressi in em (em-height)
quelli espressi in percentuale

Esempi
p {font-size: 12px;}
div.titolo {font-size: 50%;}
#div1 {font-size: large;}
h2 {font-size: 1.2em;}
font-weight
Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata.
Sintassi
selettore {font-weight: <valore>;}
Valori
Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave:

valori numerici 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900 ordinati in senso crescente (dal leggero al pesante)
normal. Valore di default. E' l'aspetto normale del font ed equivale al valore 400
bold. Il carattere acquista l'aspetto che definiamo in genere grassetto. Equivale a 700
bolder. Misura relativa. Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell'elemento parente
lighter. Misura relativa. Il testo sarà più leggero di quello dell'elemento parente

Esempi
p {font-weight: 900;}
div {font-weight: bold;}
font-style

Imposta le caratteristiche del testo in base ad uno di questi tre valori:

normal: il testo mantiene il suo aspetto normale
italic: formatta il testo in corsivo
oblique: praticamente simile a italic

La proprietà si applica a tutti gli elementi ed è ereditata.
Sintassi
selettore {font-style: <valore>;}
Esempi
p {font-style: italic;}
Line-height
Grazie a line-height è possibile finalmente usare nelle nostre pagine un sistema di interlinea degno di questo nome. La proprietà, in realtà, serve a definire l'altezza di una riga di testo all'interno di un elemento blocco. Ma l'effetto ottenuto è appunto quello tanto agognato da tutti i web designer: un modo per impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi ed è ereditata.
Sintassi
selettore {line-height: <valore>;}
Valori

normal. Il browser separerà le righe con uno spazio ritenuto "ragionevole". Dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2
valore numerico. Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l'altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore.
un valore numerico con unità di misura. L'altezza della riga sarà uguale alla dimensione specificata.
percentuale. L'altezza della riga viene calcolata come una percentuale della dimensione del font.

Il consiglio è di usare il valore numerico.
Esempi
p {line-height: 1.5;}
body {line-height: 15px;}
font
La proprietà font può essere paragonata a background. Si tratta di una proprietà a sintassi abbreviata che serve a impostare con una sola dichiarazione tutte le principali caratteristiche del testo. Le proprietà definibili in forma abbreviata con font sono:

font-family
font-size
line-height
font-weight
font-style
font-variant
font di sistema

Sintassi
selettore {font: <valori>;}
Alcune indicazioni sull'uso. I valori relativi alle singole proprietà non vanno separati da virgole. Virgola che deve invece separare i valori definiti per la font-family. Anche in questo caso i nomi dei font costituiti da più parole vanno racchiusi tra virgolette. Per quanto riguarda l'ordine, la dichiarazione dovrebbe sempre finire con la coppia font-size > font-family.
Il valore della proprietà line-height si imposta invece così, facendo seguire il suo valore a quello di font-size e separando i due con una slash:
font-size/line-height
Esempi
p {font: bold 12px/1.5 Georgia, "Times New Roman", serif;}
Nell'ordine abbiamo definito: font-weight, dimensione/ interlinea, font-family.
Usare i font di sistema
All'interno della proprietà font è possibile impostare, invece della normale lista di caratteri, un valore corrispondente ai cosiddetti font di sistema. Si tratta del tipo di carattere che usiamo sul nostro sistema operativo per definire l'aspetto di elementi dell'interfaccia come barre dei menu, icone o barra di stato. In particolare, le parole chiave relative ai font di sistema sono 6 e riguardano:

caption: carattere usato per pulsanti e menu a tendina
icon: carattere usato per la descrizione delle icone
menu: carattere usato nei menu delle varie finestre
message-box: usato per i gli alert e gli altri box con messaggi di sistema
small-caption: carattere per i controlli più piccoli
status-bar: il font usato per la barra di stato

Se si intende usare uno dei font di sistema non è necessario specificare altri valori oltre alla keyword. Il nostro testo, in pratica, erediterà le impostazioni definite nel sistema operativo relative a carattere e dimensione.
Esempi
p {font: menu;}
div {font: status-bar;}
Text-align
La proprietà serve a impostare l'allineamento del testo. E' ereditata e si applica a tutti gli elementi.
Sintassi
selettore { text-align: <valore>; }
Valori

left. Allinea il testo a sinistra
right. Allinea il testo a destra
center. Centra il testo
justify. Giustifica il testo

Text-decoration
Imposta particolari decorazioni e stili per il testo. Ereditabile e applicabile a tutti gli elementi.
Sintassi
p {text-decoration: <valore> o <valori>;}
Valori

none. Il testo non avrà alcuna decorazione particolare
underline. Il testo sarà sottolineato
overline Il testo avrà una linea superiore
line-through. Il testo sarà attraversato da una linea orizzontale al centro
blink. Testo lampeggiante

Esempi
p {text-decoration: none;}
a {text-decoration: underline;}
Proprietà del box model - gestione delle dimensioni: altezza
Come si impostano le dimensioni verticali di un elemento: in genere l'altezza di un elemento è determinata dal suo contenuto. Più testo inserisco in box, in un paragrafo o in una cella di tabella più essi saranno estesi in senso verticale. Le seguenti proprietà servono a fornire un meccanismo in grado di controllare o superare in qualche modo questo comportamento standard.
height
Questa proprietà definisce la distanza tra il bordo superiore e quello inferiore di un elemento. Non è ereditata e si applica a tutti gli elementi tranne:

colonne di tabelle
elementi inline non rimpiazzati

Sintassi
selettore {height: <valore>;}
Valori

un valore numerico con unità di misura.
un valore in percentuale. Il valore in percentuale si riferisce sempre all'altezza del blocco contenitore, purché esso abbia un'altezza esplicitamente dichiarata. Diversamente, la percentuale viene interpretata come auto.
auto. L'altezza sarà quella determinata dal contenuto.

Se il contenuto dovesse superare i limiti imposti tramite la proprietà, il comportamento dei vari browser è notevolmente diverso. Molte volte si può ottenere lo stesso risultato visivo desiderato usando proprietà come padding e margin.
Esempi
div {height: 250px;}
p.blocco {height: 50%;}
overflow
Esiste un modo per gestire il contenuto che superi i limiti imposti con height. Usare la proprietà overflow. Si applica a tutti gli elementi blocco e non è ereditata.
Sintassi
selettore {overflow : <valore>;}
Valori

visible. Valore iniziale. Il contenuto eccedente rimane visibile
hidden. Il contenuto eccedente non viene mostrato.
scroll. Il browser crea barre di scorrimento che consentono di fruire del contenuto eccedente.
auto. Il browser tratta il contenuto eccedente secondo le sue impostazioni predefinite. Di norma dovrebbe mostrare una barra di scorrimento laterale.

Esempi
div {overflow: auto;}
Proprietà del box model Gestione delle dimensioni: larghezza
La definizione della larghezza e più in generale la formattazione orizzontale degli elementi sono più problematiche rispetto all'altezza e alla formattazione verticale. A questo punto è utile richiamare alla mente i concetti visti per il box model e ribadire a cosa si riferiscono le proprietà che stiamo per esaminare.
width
Le dimensioni orizzontali di un elemento sono date dalla combinazione di varie proprietà. Un errore macroscopico è ritenere che esse siano definite semplicemente dalla proprietà width. In pratica, dovete sempre distinguere tra la larghezza effettiva di un elemento (i pixel di spazio che occupa sulla pagina) e la larghezza dell'area del contenuto. La prima è data dalla somma di questi valori:
margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro
La seconda è impostata tramite la proprietà width. E' possibile ovviamente che i due valori coincidano. Accade quando di un particolare elemento non si impostino margini, paddding e bordi; o quando il valore di tali proprietà sia uguale a 0.
Sintassi
selettore {width: <valore>;}
Valori

auto. Valore di default. Se non si impostano margini, bordi e padding la larghezza dell'elemento sarà uguale all'area del contenuto dell'elemento contenitore.
un valore numerico con unità di misura.
un valore in percentuale. La larghezza sarà calcolata rispetto a quella dell'elemento contenitore.

La proprietà width non è ereditata.
Esempi
p {width: 90px;}
div.box {width: 50%;}
I Margini
Il margine è la distanza tra il bordo di un elemento e gli elementi adiacenti. Sono cinque le proprietà con cui è possibile definire un margine. Quattro di esse sono singole e impostano la distanza per ciascun lato del box. L'ultima, margin, è una proprietà a sintassi abbreviata utile per definire con una sola dichiarazione tutte le impostazioni per i quattro lati (margin-bottom, margin-top, margin-left, margin-right).
Valori

un valore numerico con unità di misura. Il valore è espresso in termini assoluti.
un valore in percentuale. Il valore è calcolato come percentuale rispetto alla larghezza (width) o all’altezza del blocco contenitore.
auto. E' quasi sempre corrispondente a 0. Per la proprietà margin il valore auto significa che la distanza sarà automaticamente calcolata rispetto alla larghezza dell'elemento contenitore.

Ricordiamo che se per un elemento si imposta un margine inferiore ed esso si trova sopra ad un altro elemento che abbia impostato un margine superiore, la distanza tra i due sarà quella maggiore e non data dalla somma delle due proprietà (meccanismo del margin collapsing).
Esempi
p {margin: 10px;}
div.box {margin: 20%;}
Per usare al meglio questa proprietà è fondamentale conoscere le regole che ne gestiscono il funzionamento.
In prima istanza è ovvio usare per essa quattro valori, uno per ciascun lato:
div {margin: 10px 15px 10px 20px;}
L'ordine di lettura va inteso in senso orario. Per cui: il primo valore si riferisce al lato superiore, il secondo a quello destro, il terzo al lato inferiore, il quarto a quello sinistro. In pratica usare la sintassi vista nell'esempio equivale a scrivere:
div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 20px; }
Nella definizione dei valori, inoltre, è possibile mischiare percentuali con valori assoluti in unità di misura.
Un ulteriore abbreviazione della sintassi si può ottenere usando tre, due o un solo valore. Queste le regole:

se si usano tre valori, il primo si riferisce al margine superiore, il secondo a quelli sinistro e destro, il terzo a quello inferiore
se si usano due valori, il primo si riferisce ai lati superiore e inferiore, il secondo al sinistro e al destro
se si usa un solo valore, un uguale distanza sarà ai quattro lati

Un uso interessante del valore auto per i lati sinistro e destro è quello che consente di centrare in tal modo un elemento rispetto alla pagina o al box contenitore
Esempi
p {margin: 20px 10px;}
div {margin: 20px;}
h1 {margin: 10px auto;}
Il Padding
Un altro modo per creare spazio intorno ad un elemento è quello di usare il padding. Quando si usa il padding, lo spazio di distanza viene inserito al di qua dei bordi dell'elemento e non all'esterno. La cosa risulta evidente se usate un colore di sfondo per l'elemento diverso da quello della pagina. Nel caso del padding, lo spazio inserito avrà proprio il colore di sfondo dell'elemento, a differenza dei margini. Pertanto, valutate in base alle vostre esigenze se usare la prima o la seconda via.
Un'analogia rispetto ai margini sta nella sintassi. Anche qui quattro proprietà singole per i lati e una a sintassi abbreviata (padding-bottom, padding-left, padding-top, padding-right, padding).
padding
Proprietà a sintassi abbreviata. Serve a impostare i valori del padding per tutti e quattro i lati di un elemento.
Valori

un elenco di valori numerici con unità di misura.
un elenco di valori in percentuale.

Esempi
p {padding: 10px 20px;}
div {padding: 10%;}
body {
margin: 0px;
padding: 0px; }
I Bordi
Sono proprietà a sintassi abbreviata o relative a ciascuno dei quattro i lati:
border, border-bottom, border-top, border-right, border-left, border-color, border-style, border-width
Definire lo stile del bordo
Sintassi
selettore { border-<lato>: <valore width> <valore style> <valore color>; }
E’ possibile sostituire a <lato> uno degli indicatori dei quattro lati: top, right, bottom o left.
Valori
Come si vede dall'elenco delle proprietà di ciascun lato si possono definire per il bordo tre aspetti:

il colore (color)
lo stile (style)
lo spessore (width)

I valori possibili per il colore sono:

un qualsiasi colore
la parola chiave inherit

Il colore può essere espresso in uno qualunque dei modi visti nella lezione " Il box model". Se non si imposta un valore specifico, il colore sarà quello di primo piano impostato con la proprietà color.
Lo stile di un bordo può invece essere espresso con una delle seguenti parole chiave

none. L'elemento non presenta alcun bordo e lo spessore equivale a 0.
hidden. Equivalente a none
dotted
dashed
solid
double.
groove
ridge
inset
outset

Infine abbiamo lo spessore. Esso può essere modificato secondo i seguenti valori:

un valore numerico con unità di misura
thin. Bordo sottile.
medium. Bordo di medio spessore.
thick. Bordo di largo spessore.

Nel caso delle parole chiave la dimensione esatta non è specificata dal linguaggio.
Esempi
div {
border-color: black;
border-style: solid;
border-width: 1px;
}
Molto più comodo scrivere così:
div {border: 1px solid black;}
Per ciascuna di queste proprietà è possibile definire da uno a quattro valori, uno per lato. Se ne usiamo quattro l'ordine di lettura è questo: top, right, bottom, left. Se invece ne impostiamo uno, due o tre valgono le stesse regole viste per i margini nella lezione "Gestione delle dimensioni: larghezza"
Esempi
div {
border-width: 1px 2px 1px 2px;
border-style: solid;
border-color: black red black red;
}
Usare la proprietà border
L'ultima proprietà a sintassi abbreviata è border. Con essa possiamo definire con una sola regola le impostazioni per i quattro bordi. Il suo uso è però limitato a un solo caso, peraltro molto comune: che i quattro bordi abbiano tutti lo stesso colore, lo stesso stile e lo stesso spessore.
Sintassi
selettore {border: <valore spessore> <valore stile> <valore colore>;}
Esempi
div {border: 2px solid black;}
Le Liste
Grazie ai CSS possiamo definire in vari modi l'aspetto delle liste (X)HTML. In realtà tutte le proprietà che andremo ad esaminare si riferiscono non ai canonici tag usati per inserire una lista ordinata (<OL>) o non ordinata (<UL>), ma ai singoli elementi che le compongono, ovvero l'elemento <LI>. In effetti, è solo questo che trova una rappresentazione effettiva sulla pagina, mentre OL e UL sono semplici dichiarazioni del tipo di lista usato.
Le proprietà dedicate alla formattazione delle liste sono quattro. tre definiscono singoli aspetti, l'ultima, list-style, è una proprietà a sintassi abbreviata.
list-style-image
Definisce l'URL di un'immagine da usare come marcatore di un list-item. Proprietà ereditata. Si applica agli elementi LI.
Sintassi
<selettore> {list-style-image: url(<url_immagine>);}
Nella definizione della sintassi per tutte queste proprietà sono possibili diverse scelte:
La prima e più semplice è quella di definire lo stile a livello degli elementi lista o list-item:
ul {list-style-image: url(immagine.gif);}
ol {list-style-image: url(immagine.gif);}
li {list-style-image: url(immagine.gif);}
Più correttamente e per un fatto di rigore strutturale (lo stile si applica ai list-item), è preferibile, usando UL o OL, affidarsi ad un selettore del discendente (descendant selector):
ul li {list-style-image: url(immagine.gif);}
La soluzione è ottimale se prevedete di usare sempre uno stesso stile per tutte le liste. Se invece pensate di usare stili diversi, affidatevi alla potenza delle classi, che applicherete di volta in volta secondo le necessità. La sintassi consigliata è questa:
ul.nome_della_classe li {list-style-image: url(immagine.gif);}
Esempio:
<html>
<head>
<style type="text/css">

ul.dise {list-style-image:url(list.gif);}
ul.sma {list-style-image:url(smail.bmp);}

</style>
</head>
<body>
<img src="list.gif">
<img src="smail.bmp">
<ul>lista senza disegnino azzurro
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>
<br><br>
<ul class=dise>lista con disegnino di stellina
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>
<br><br>
<ul class=sma>lista con disegnino di smile
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>

</body>
</html>
Valori

un URL assoluto o relativo che punti ad un'immagine.
none. Non viene usata nessuna immagine.

Esempi
Per tutte le proprietà abbiamo preparato il consueto documento (http://html.it/guide/esempi/css/test/liste.html) con codice ed esempi.
Una considerazione "estetica" di cui tenere conto è la dimensione delle immagini. Devono essere sempre adeguate alla dimensione del testo.
list-style-position
Imposta la posizione del marcatore rispetto al testo del list-item. Proprietà ereditata. Si applica agli elementi LI e a quelli per i quali si imposti la proprietà display sul valore list-item.
Sintassi
<selettore> {list-style-position: <valore>;}
Valori

outside. Valore di default. E' il comportamento standard: il marcatore è piazzato all'esterno del testo.
inside. Il marcatore diventa parte integrante del testo e ne rappresenta in un certo senso il primo carattere. Se il testo va a capo il marcatore apparirà all'interno del box.

Esempi
ul li {list-style-position: inside;}
#lista li {list-style-position: outside;}
list-style-type
Definisce l'aspetto del marcatore. Proprietà ereditata. Si applica agli elementi LI e a quelli per i quali si imposti la proprietà display sul valore list-item.
Sintassi
<selettore> {list-style-type: <valore>;}
Valori
La scelta dei valori possibili è lunghissima. Definiamo nei dettagli solo i più importanti, limitandoci a citare quelle che fanno riferimento a sistemi di scrittura non occidentali. Tali valori sono stati inseriti per venire incontro alle esigenze di numerazione di lingue come l'ebraico o il giapponese, che usano sistemi diversi dal nostro.

disc: un cerchietto pieno colorato. Il colore può essere modificato per tutti i tipi con la proprietà color.
circle: un cerchietto vuoto.
square: un quadratino
decimal: sistema di conteggio decimale 1, 2, 3, ....
decimal-leading-zero: sistema di conteggio decimale ma con la prima cifra preceduta da 0. 01, 02, 03,
lower-roman: cifre romane in minuscolo. i, ii, iii, iv, .......
upper-roman: cifre romane in maiuscolo. I, II, III, IV, ....
lower-alpha: lettere ASCII minuscole. a, b, c, ......
upper-alpha: lettere ASCII maiuscole. A, B, C, .....
lower-latin: simile a lower-alpha
upper-latin: simile a upper-alpha
lower-greek: lettere minuscole dell'alfabeto greco antico.

Si riferiscono a sistemi di conteggio internazionali i seguenti valori:
hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-hiroha | katakana-hiroha
I diversi tipi di marcatori si riferiscono ciascuno, logicamente, a liste ordinate o non ordinate. Useremmo, ad esempio, square, per un UL e decimal per un OL.
list-style
Proprietà a sintassi abbreviata con cui si definiscono tutti gli aspetti e gli stili di un list-item. Proprietà ereditata.
Sintassi
<selettore> {list-style: <valore tipo> <valore posizione> <valore immagine>;}
Valori
I valori possibili sono quelli visti in precedenza per le proprietà singole. A rigor di logica solo due delle tre proprietà singole dovrebebro trovare posto in questa dichiarazione abbreviata: per definire l'aspetto del marcatore, infatti, o decido di usare un'immagine o propendo per un marcatore a carattere. Se si inseriscono indicazioni per tipo e immagine, prevale l'immagine e il tipo è ignorato.
Esempi
ul li {list-style: square inside;}
ul.lista1 li {list-style: outside url(imamgine.gif);}
Posizionamento degli elementi
La parte dei CCS relativa al posizionamento degli elementi è un argomento complesso, ma affascinante. In prospettiva quello più promettente per le conseguenze che può portare. E' solo con queste regole che si può pensare di realizzare il layout delle nostre pagine solo con i CSS e giungere così alla definitiva e reale separazione tra presentazione e struttura.
Affrontremo la questione in due lezioni. Nella prima esamineremo la proprietà position e le diverse modalità di posizionamento. Nella seconda vedremo con quali proprietà è possibile posizionare con precisione gli elementi e gestirne alcuni decisivi aspetti visuali.
position
position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata.
Sintassi
<selettore> {position: <valore>;}
Valori

static.
absolute
fixed
relative

Ciascuno di questi valori merita un spiegazione approfondita da cui emergeranno i concetti di base che governano le regole sul posizionamento.
static
E' il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento.
absolute
L'elemento, o meglio, il box dell'elemento viene rimosso dal flusso del documento ed è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom. Il posizionamento avviene sempre rispetto al box contenitore dell'elemento. Questo è rappresentato dal primo elemento antenato (ancestor) che abbia un posizionamento diverso da static. Se tale elemento non esiste il posizionamento avviene in base all'elemento radice HTML, che in condizioni standard coincide con l'area del browser che contiene il documento e che ha inizio dall'angolo superiore sinistro di tale area.Un elemento posizionato in modo assoluto scrorre insieme al resto del documento.
fixed
Usando questo valore il box dell'elemento viene, come per absolute, sottratto al normale flusso del documento. La differenza sta nel fatto che per fixed il box contenitore è sempre il cosiddetto viewport. Con questo termine si intende la finestra principale del borwser, ovvero l'area del contenuto. Altra differenza fondamentale: un box posizionato con fixed non scorre con il resto del documento. Rimane, appunto, fisso al suo posto. L'effetto è lo stesso che si può ottenere con l'uso dei frame, in cui una parte della pagina rimane fissa e il resto scorre. Solo che qui il documento è solo uno. Purtroppo, il valore non è supportato da Explorer su Windows.
relative
L'elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l'elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l'ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.
Agire sulle tabelle
Alcune proprietà dei CSS sono destinate alla modifica stilistica delle tabelle. Il supporto, chiariamolo subito, non è uniforme per tutti i browser. Mozilla brilla anche qui per la sua fedeltà agli standard, mentre Explorer Windows cade su parecchi aspetti. Nell'analisi delle proprietà ci limiteremo all'enunciazione dei concetti di base, tralasciando la miriade di regole particolari e spesso complesse che ne governano il comportamento. Del resto, l'uso di queste proprietà è davvero molto ridotto, dal momento che gli stessi risultati possono essere ottenuti in diversi modi, anche con i tradizionali sistemi incorporati in (X)HTML.
table-layout
Questa proprietà imposta il metodo di layout di una tabella. Non è ereditata. Si applica solo alle tabelle.
Sintassi
<selettore> {table-layout: <valore>;}
Valori

auto. Il layout della tabella viene definito automaticamente dal browser.
fixed. Le regole di presentazione sono quelle impostate dall'autore nel CSS.

Nel caso del valore auto tutto è affidato al meccanismo di rendering dello user agent. Usando invece fixed possiamo innanzitutto definire la larghezza della tabella tramite la proprietà width. Volendo creare una tabella di 400px, quindi, scriveremo questa regola:
table {
table-layout: fixed;
width: 400px;
}
Capite bene che la stessa cosa si può ottenere in (X)HTML usando sempre l'attributo width:
<table width="400px">
Nella pagina di esempio (http://html.it/guide/esempi/css/test/tabelle.html) abbiamo riportato un paio di casi speciali per spiegare meglio il meccanismo di funzionamento. In particolare abbiamo verificato cosa accade se si imposta auto come valore della proprietà width e il comportamento dei vari browser nei casi in cui si stabilisca una larghezza esplicita anche per le celle della tabella.
Esempi
table.tabella1 {table-layout: fixed;}
table {table-layout: auto;}
border-collapse
Attraverso questa proprietà possiamo stabilire in che modo trattare i bordi e gli spazi tra le celle di una tabella. Si applica solo alle tabelle ed è ereditata.
Sintassi
<selettore> {border-collpse: <valore>;}
Valori

collapse. Se viene impostato un bordo, le celle della tabella lo condividono.
separate. Se viene impostato un bordo, ogni cella ha il suo, separato dalle altre. Lo spazio tra le celle e tra i bordi si imposta con la proprietà border-spacing.

Esempi
table { border: 2px solid black;
border-collapse: separate;
border-spacing: 5px; }
border-spacing
Imposta lo spazio tra le celle di una tabella. Va usata solo in presenza di un modello di border-collapse settato su separate. Proprietà ereditata e applicabile solo alle tabelle.
Sintassi
<selettore> {border-spacing: <valore>;}
Valori

un valore numerico con unità di misura

Esempi
Vedi sopra
empty-cells
Gestisce il trattamento delle celle di tabella senza contenuto. Agisce solo su quelle che non presentino al loro interno alcun tipo di markup, nemmeno   inserito in genere per simulare la presenza di contenuto. Proprietà ereditata.
Sintassi
<selettore> {empty-cells: <valore>;}
Valori

show. Mostra i bordi della cella.
hide. I bordi non vengono mostrati e apparirà solo uno spazio vuoto.

caption-side
Le buone norme dell'accessibilità vogliono che una tabella sia sempre preceduta da una sorta di titolo/riassunto. In (X)HTML questa funzione è demandata al tag <CAPTION> di cui riportiamo sotto un esempio di sintassi:
<table>
<caption>Titolo della tabella</caption>
<tr>
<td>...
</table>
La proprietà caption-side definisce il lato su cui vogliamo far comparire tale titolo. E' ereditata. La supporta solo Mozilla.
Sintassi
<selettore> {caption-side: <valore>;}
Valori

top. Caption sul lato superiore.
right. Caption sul lato destro.
bottom. Caption sul lato inferiore.
left. Caption sul lato sinistro.

Esempi
table.tabella9 {
table-layout : fixed;
width : 300px;
background : Silver;
caption-side : bottom;
}

CSS Cascading Style Sheet