HTML and CSS Reference
In-Depth Information
Il risultato finale è mostrato nella parte inferiore della
figura 6.2
.
Possiamo inoltre con-
trollare le dimensioni delle colonne con le proprietà
column-width
e
height
oppure
definire elementi (come, per esempio, un'intestazione) da disporre trasversalmente su più
colonne con
column-span
(in questo caso, specificando come valore
all
, l'elemento
occuperà tutte le colonne, indipendentemente dal loro numero).
nota
Per maggiori informazioni sulla gestione dei layout a colonne, è possibile vedere
la
pagina
“CSS
Multi-column
Layout
Module”
all'indirizzo
L'uso dei layout multi-colonna risulta molto pratico ed elastico perché tutto il contenuto
si adatta automaticamente alle impostazioni definite, compresi eventuali immagini o sotto-
elementi, senza dover intervenire sul markup della pagina come sarebbe invece necessario
fare se i contenuti fossero strutturati usando tabelle.
In passato le tabelle venivano usate per controllare l'allineamento e il posizionamento
di ogni elemento ma, da diversi anni, questo approccio è stato soppiantato in favore dei
cosiddetti layout table-less, ovvero basati sull'uso di contenitori (tipicamente dei tag
div
)
posizionati e dimensionati da CSS.
Come abbiamo visto anche nei precedenti capitoli, le possibilità di controllo
dell'impaginazione con CSS sono veramente notevoli. Oltre al controllo di dimensioni e
posizionamento, possiamo definire anche una serie di comportamenti specifici. Per esem-
pio, mediante la proprietà
text-overfow: ellipsis;
il browser è in grado di appli-
care automaticamente dei puntini di sospensione alla fine del testo che eccede le dimensio-
ni fissate dal contenitore.
Parlando del colore del testo, abbiamo anticipato che la stessa notazione può essere usata,
attraverso la proprietà
background-color
, per indicare il riempimento dello sfondo di
un elemento, definendo anche un'eventuale trasparenza, usando il formato HSLA o RGBA.
Oltre a un colore uniforme, possiamo impostare anche sfumature (gradient), sia lineari
sia circolari, evitando di fatto la necessità di ricorrere a immagini per la creazione degli ef-
fetti grafici più comuni.
L'esempio 6.6
mostra lo stile CSS da impostare per ottenere un ef-
fetto di riempimento con gradiente verticale su diverse tonalità di grigio, da
#999
a
#eee
.
