Gli elementi della pagina
I CSS permettono di lavorare in modo molto preciso sui margini e i bordi degli elementi in blocco che vengono visualizzati all’interno di box. Ogni box ha delle proprietà che si possono dividere in sei categorie:
- le proprietà dei margini (
margin): assegnano un bordo esterno al box, quindi la distanza del box dagli elementi che lo circondano;
- le proprietà di riempimento (
padding): assegnano al box uno spazio interno che separa il contenuto dai margini del box stesso. Se è definito un bordo, aumentando i valori di queste proprietà si aumenta lo spazio fra il bordo stesso e il contenuto;
- le proprietà dei bordi (
border): definiscono le linee grafiche intorno al box;
- le proprietà relative alle dimensioni;
- le proprietà relative all'allineamento: non solo l’allineamento orizzontale visto per il testo nello scorso articolo, ma anche l’allineamento verticale;
- colori e sfondo.
Possiamo utilizzare queste proprietà per quasi tutti gli elementi in blocco. Per la creazione dei layout si ricorre spesso a elementi <div>. Cominciamo dalle proprietà più semplici, ossia quelle che impostano le dimensioni di un elemento. Si tratta di height e width, che richiedono un valore numerico espresso con le solite unità di misura che abbiamo visto nella prima puntata dal titolo "Introduzione ai CSS".
Per la larghezza, è anche possibile assegnare alla proprietà width il valore auto. In questo caso, la larghezza dell’elemento sarà calcolata in base a quella del blocco contenitore, meno la dimensioni dei bordi, del margine e del padding (di queste proprietà parleremo tra poco).
Esistono poi vari attributi per margini, bordi e riempimento. Cominciamo dalla possibilità di definire la distanza del testo dal margine. Le proprietà disponibili sono:
- margin-left: per definire il margine sinistro. I valori per tutti i tipi di margine sono espressi in punti, pollici, centimetri o pixel;
- margin-right: per il margine destro;
- margin-top: per il margine superiore;
- margin-bottom: per il margine inferiore.
I valori accettati sono numeri con le relative unità di misura. È possibile scrivere i valori di queste proprietà in forma ridotta, così:
{margin: 10px 20px 30px 90px;}
Il browser riferisce questi valori, nell’ordine, al margine superiore (margintop), al margine destro (margin-right), al margine inferiore (margin-bottom) e al margine sinistro (margin-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono automaticamente assegnati in base al valore del lato opposto regolarmente impostato.
È anche possibile impostare velocemente un solo valore per tutti e quattro i margini, così:
{margin: 5%;}
Se usate la proprietà margin per il tag <img> potete distanziare gli elementi circostanti dall’immagine, ottenendo un effetto analogo a quello che si può avere con gli attributi XHTML vspace e hspace, che sono però deprecati.
Per impostare la distanza del testo di un elemento dai suoi stessi bordi, occorre usare la proprietà padding, o meglio:
- padding-top;
- padding-bottom;
- padding-right;
- padding-left.
Questi 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. 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 assegnati automaticamente in base al valore del lato impostato.
Infine, passiamo a occuparci dei bordi. È possibile impostarne spessore, linea e colore. Per quanto riguarda lo spessore, possiamo usare le proprietà:
- border-top;
- border-bottom;
- border-right;
- border-left.
Queste proprietà devono assumere un valore numerico e possono essere scritte in forma “abbreviata”, come quelle relative ai margini e al padding.
Quando impostate larghezza, altezza, margini e padding, ricordate che dovete sempre fare in modo che i conti tornino, soprattutto se l’elemento su cui state lavorando è contenuto in un altro. La somma delle dimensioni dell’elemento contenuto non può essere superiore a quella dell’elemento contenitore. Per trovare le misure “corrette” dovrete fare un po’ di prove, perché non tutti i browser si comportano alla stessa maniera. Alcuni includono il padding nella somma delle dimensioni per calcolare la larghezza complessiva, altri no.
Per quanto riguarda i bordi, è anche possibile definirne la dimensione, o meglio lo spessore. Utilizzeremo le proprietà border-top-width, borderbottom-width, border-right-width e border-left-width. Queste proprietà possono assumere un valore numerico oppure i valori predefiniti:
- thin: per un bordo sottile;
- medium: per un bordo medio;
- thick: per un bordo spesso.
Se volete che tutti i bordi abbiano lo stesso spessore potete usare la notazione abbreviata border:spessore (per esempio, {border: thick;}).
Con la coppia proprietà-valore border:none usata per un’immagine, potete eliminare il bordo che compare intorno all’immagine quando questa è usata come collegamento.
Se volete agire sull’aspetto del bordo potete usare border-top-style, border-bottom-style, border-right-style e border-left-style, o semplicemente border-style per impostare lo stesso valore per tutti bordi. I valori possibili sono specificati da alcune parole chiave:
- none: nessun bordo;
- dotted: punteggiato;
- dashed: tratteggiato;
- solid: continuo;
- double: doppio;
- groove: incassato;
- ridge: in rilievo;
- inset: interno;
- outset: esterno.
Per concludere con l’esposizione delle proprietà del bordo, ricordiamo che usando border-color è possibile specificare il colore che si desidera per il bordo del nostro box.
A questo è opportuno fermarsi un attimo e proporre alcuni semplici esempi, dai quali potrete poi trarre spunto per il vostro lavoro. Nel primo esempio, visibile in figura 1, creeremo due box di larghezza diversa, entrambi col bordo.
<head>
<style type="text/css">
.primo {margin: 100px; padding: 20px; width: 50%; border: medium dashed #FF0000;}
.secondo {width: 80%; border: 15px double;}
</style>
</head>
<body>
<div class="primo">Lorem ipsum … </div>
<div class="secondo">Lorem ipsum … </div>
</body>
Ricordate, dallo scorso articolo, che è possibile adottare una notazione abbreviata per quelle proprietà, come border-color, border-style, ecc., che hanno la prima parte uguale (border: medium dashed #FF0000).
Figura 1: due box di diversa dimensione
Notate che il primo blocco è distanziato dal secondo perché abbiamo definito un margine di 100px (margin: 100px) su tutti e quattro i suoi lati. Proviamo adesso a inserire due box all’interno di un box contenitore, come visibile in figura 2.
<head>
<style type="text/css">
.contenitore {width: 80%; border: thick dotted;}
.contenuto1 {margin: 20px; width: auto; border: thin solid;}
.contenuto2 {width: 50%; border: thick double #FF00FF; padding: 10px;}
</style>
</head>
<body>
<div class="contenitore">
<div class="contenuto1">Lorem ipsum … </div>
<div class="contenuto2">Lorem ipsum … </div>
</div>
</body>
Figura 2: due box in un contenitore
Notate che la larghezza del primo contenuto (.contenuto1) è definita auto: il contenuto è largo quanto il suo contenitore fatti salvi i margini (margin: 20px) e la larghezza dei bordi.
Per il secondo contenuto (.contenuto2) non abbiamo definito la larghezza dei margini: per questo il box è “attaccato” al suo contenitore.
|
