dal 2015 - visita n. 593
Attributi per margini
Attributi per margini

 

Attributi per margini

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.


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>


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.

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>


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>


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>


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>


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>


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>


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>


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>


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>


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>


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>


Visualizza un esempio pratico



















Particelle
Introduzione
CSS in linea
CSS incorporati
CSS esterni
Attributi per testo
Attributi per margini
Gestione sfondo
Raggruppare stili
Assegnare classi
Posizionamento dinamico
Controlli del cursore



Io tento una vita: ognuno si scalza e vacilla in ricerca.
Salvatore Quasimodo

Valid CSS!
pagina generata in 0.001 secondi