I fogli di stile permettono di giustificare il testo senza l'uso improprio di tabelle o espedienti simili. I CSS creano degli elementi visualizzati all'interno di box. Ogni box ha delle proprieta' che si possono dividere in tre categorie:
I valori di questi attributi sono espressi in pollici (in), centimetri (cm), pixel (px), punti (pt) e unita' (em).
Semplificando il concetto, i fogli di stile sono impostati come se si trattasse di finestre indipendenti all'interno della pagina. Hanno, quindi, una loro grandezza e valori di impostazione. Tra questi, oltre al testo visto in precedenza ed al background che si vedra' piu' oltre, sono presenti i valori relativi ai bordi di tali pseudo-finestre.
Esistono vari attributi per i bordi e l'allineamento, vediamo quali.
Attributi margin-left, margin-right, margin-top, margin-bottom
Si tratta di quattro attributi che impostano la distanza tra il box contenente i CSS e gli elementi adiacenti, dai quattro margini:
<STYLE>
BODY { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px }
</STYLE>
Attributo margin
I quattro valori visti in precedenza possono essere definiti con il solo attributo margin. Quando viene impostato questo valore, il browser assume come ordine il primo margine in alto (margin-top), il destro (margin-right), l'inferiore (margin-bottom) e il sinistro (margin-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono automaticamente assegnati in base al valore del lato regolarmente impostato:
<STYLE>
BODY { margin: 10px 10px 10px 10px }
</STYLE>
In questo primo esempio tutti gli elementi hanno uguale distanza rispetto agli elementi vicini, e ognuno di essi e' correttamente indicato.
<STYLE>
BODY { margin: 10px 10px }
</STYLE>
In questo secondo esempio sono impostati solo due valori (margin-top e margin-right). I mancati margini sinistro e inferiore vengono desunti rispettivamente dal valore del margine destro e superiore.
Attributi padding-top, padding-bottom, padding-right, padding-left
Tali attributi indicano la distanza tra i lati del box e gli elementi al suo interno. In altre parole hanno una funzione opposta a quella vista in precedenza per l'attributo margin. E' possibile usare le misure standard (pollici, centimentri, punti, pixel ecc.) o valori percentuali:
<STYLE>
BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in }
</STYLE>
Attributo padding
Come per l'attributo margin, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo padding. Quando viene impostato questo valore, il browser assume come ordine il primo valore di riempimento in alto (padding-top), il destro (padding-right), l'inferiore (padding-bottom) e il sinistro (padding-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono automaticamente assengati in base al valore del lato impostato:
<STYLE>
BODY { padding: 10pt 10px 110% 2in }
</STYLE>
In questo primo esempio tutti gli elementi hanno uguale distanza rispetto agli elementi vicini, e ognuno di essi e' correttamente indicato.
<STYLE>
BODY { padding: 10pt 10px }
</STYLE>
Attributi border-top, border-bottom, border-right, border-left
Questi attributi definiscono lo stile e il colore di ogni elemento e vengono impostati con alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset e outset:
<STYLE>
BODY { border-top: dotten green; border-left: dashed black; border-right: solid blue; border-bottom: groove yellow }
</STYLE>
Attributi border-top-width, border-bottom-width, border-right-width, border-left-width
La funzione di questi attributi e' di generare un effetto simile ai bordi delle table HTML. E' possibile stabilire misure percentuali o di riferimento (em), oltre a parole chiave quali thin, medium e thick:
<STYLE>
BODY { border-top-width: 5px; border-left-width: 4pt; border-right-width: thick; border-bottom-width: 2em }
</STYLE>
Attributo border-width
Come per gli attributi margin e padding, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo border-width:
<STYLE>
BODY { border-width: 10pt 10px 1em 2in }
</STYLE>
Attributo border-color
Questo attributo definisce i colori dei quattro bordi del CSS nella loro globalita', cioe' senza possibilita' di stabilire colori diversi per ognuno di essi:
<STYLE>
BODY { border-color: green }
</STYLE>
Attributo border-style
Questo attributo definisce lo stile dei quattro bordi del CSS nella loro globalita', cioe' senza possibilita' di stabilire stili diversi per ognuno di essi. I valori sono specificati da alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Gli ultimi quattro valori sono tridimensionali, sempre che il browser li supporti:
<STYLE>
BODY { border-style: groove }
</STYLE>
Attributo border
Si tratta di una sorta di attributo omnicomprensivo degli ultimi visti in questa pagina. Racchiude tutte le varianti relative ai bordi, agli stili, al colore e alla larghezza. Assegna gli stessi valori a tutti i lati, annullando gli effetti di altri attributi simili in precedenza inseriti:
<STYLE>
BODY { border: 12px groove green }
</STYLE>
Attributo width
Si riferisce alla larghezza per orizzontale del box. Puo' essere espresso nelle unita' di misura finora analizzate. Il valore "auto" permette al box di adattarsi al contenuto degli elementi:
<STYLE>
BODY { width: 300px }
</STYLE>
Attributo float
Questo attributo ha una funzione simile ad ALIGN in HTML classico. I valori a disposizione sono left, right e none:
<STYLE>
BODY { float: right }
</STYLE>
Attributo clear
Se vengono specificati i valori right o left, gli elementi si dispongono sotto float dal lato specificato. Usando none sono impostati su entrambi i lati:
<STYLE>
BODY { clear: left right }
</STYLE>
background e colori di sfondo
