Sommario
Il modello per riquadrati [box] CSS descrive i riquadrati rettangolari che vengono generati per gli elementi nell'albero del documento e rappresentati secondo il modello di formattazione visuale. Il riquadrato di pagina è un tipo speciale di riquadrato che è descritto in dettaglio nella sezione sui media a pagine.
Ogni riquadrato ha un' area di contenuto (per esempio del testo, un'immagine, ecc.) e un cuscinetto [padding] opzionale che lo circonda, un bordo, e aree di margine; la dimensione di ogni area è specificata dalle proprietà definite di seguito. Il seguente diagramma illustra come queste aree si relazionano e la terminologia usata per far riferimento alle parti di margine, bordo, e cuscinetto [padding]:
Il margine, bordo, e cuscinetto [padding] si possono dividere nei segmenti sinistro [left], destro [right], superiore [top], ed inferiore [bottom] (per esempio, nel diagramma, "LM" sta per left margin [margine sinistro], "RP" per right padding [cuscinetto destro], "TB" per top border [bordo superiore], ecc.).
Il perimetro di ognuna delle quattro aree (contenuto, cuscinetto, bordo, e margine) è chiamata "limite" [edge], sicchè ogni riquadrato ha quattro limiti:
Ogni limite può essere diviso in limite sinistro [left], destro [right], superiore [top], e inferiore [bottom].
Le dimensioni dell'area di contenuto di un riquadrato -- la larghezza del contenuto e l'altezza del contenuto -- dipendono da diversi fattori: se l'elemento che genera il riquadrato ha la proprietà 'width' o 'height' impostata [width sta per "larghezza", height per "altezza"; questi termini ricorreranno in seguito nelle specifiche], se il riquadrato contiene testo o altri riquadrati, se il riquadrato è una tabella, ecc. Le larghezze e le altezze del riquadrato sono discusse nel capitolo sui dettagli del modello di formattazione visuale.
La larghezza [width] del riquadrato è data dalla somma dei margini sinistro e destro, dal bordo sinistro e destro e dal cuscinetto sinistro e destro, nonchè dalla larghezza del contenuto. L'altezza [height] è data dalla somma dei margini superiore ed inferiore, dal bordo superiore ed inferiore e dal cuscinetto superiore ed inferiore, nonchè dall'altezza del contenuto.
Lo stile dello sfondo [background] delle varie aree di un riquadrato è determinato come segue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: black; /* text color is black */
background: gray; /* Content, padding will be gray */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: black;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is longer
to illustrate wrapping.
</UL>
</BODY>
</HTML>
risulta in un albero del documento con (fra le altre relazioni) un elemento UL che ha due figli LI.
Il primo dei seguenti diagrammi illustra cosa produrrà questo esempio. Il secondo illustra la relazione fra i margini, il cuscinetto, e i bordi degli elementi UL e quelli dei suoi elementi figli LI.
Si noti che:
Le proprietà dei margini specificano l'ampiezza dell' area di margine di un riquadrato. La proprietà stenografica [shorthand. se il lettore non è abituato al termine, per comodità di studio si può far riferimento a queste proprietà come a proprietà abbreviate] 'margin' imposta il margine per tutti e quattro i lati mentre le altre proprietà dei margini lo impostano solo per il loro rispettivo lato.
Le proprietà definite in questa sezione si riferiscono al tipo di valore <margin-width>, che può assumere uno dei seguenti valori:
Sono consentiti valori negativi per le proprietà dei margini, ma possono esservi limit nell'implementazione specifica.
| Valore: | <margin-width> | inherit |
| Iniziale: | 0 |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | in riferimento alla larghezza del blocco contenitore |
| Media: | visuale |
Queste proprietà impostano il margine superiore [top], destro [right], inferiore [bottom], e sinistro [left] di un riquadrato.
H1 { margin-top: 2em }
| Valore: | <margin-width>{1,4} | inherit |
| Iniziale: | non definita per le proprietà stenografiche |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | in riferimento alla larghezza del blocco contenitore |
| Media: | visuale |
La proprietà 'margin' è una proprietà stenografica per impostare 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' nella medesima posizione nel foglio di stile.
Se c'è un solo valore, si applica a tutti i lati. Se ci sono due valori, i margini superiore[top] ed inferiore [bottom] sono impostati sul primo valore e i margini destro [right] e sinistro [left] sono impostati sul secondo. Se ci sono tre valori, il superiore [top] è impostato sul primo valore, il sinistro [left e destro [right] sono impostati sul secondo, e l'inferiore [bottom] è impostato sul terzo. Se ci sono quattro valori, si applicano rispettivamente al superiore [top], destro [right], inferiore [bottom] e sinistro [left].
BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
L'ultima regola dell'esempio di sopra è equivalente all'esempio di sotto:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
In queste specifiche, l'espressione collassare i margini [collapsing margins] significa che margini adiacenti (non li separa nessuna area di bordo o cuscinetto) di due o più riquadrati (che possono essere vicini l'uno all'altro o annidati) si combinano per formare un singolo margine.
Nei CSS2, i margini orizzontali non collassano mai.
I margini verticali possono collassare fra determinati riquadrati:
Si prega di consultare gli esempi di margine, cuscinetto, e bordi per l'illustrazione di margini collassati [collapsed].
Le proprietà del cuscinetto specificano l'ampiezza dell'area del cuscinetto di un riquadrato. La proprietà stenografica 'padding' imposta il cuscinetto per tutti e quattro i lati mentre le altre proprietà del cuscinetto la impostano solo per il loro rispettivo lato.
Le proprietà definite in questa sezione si riferiscono al tipo di valore<padding-width> , che può assumere uno dei seguenti valori:
A differenza delle proprietà dei margini, i valori per il cuscinetto non possono essere negativi. Similmente alle proprietà dei margini, i valori di percentuale per le proprietà del cuscinetto si riferiscono all'ampiezza del blocco contenitore del riquadrato generato.
| Valore: | <padding-width> | inherit |
| Iniziale: | 0 |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | in riferimento alla larghezza del blocco contenitore |
| Media: | visuale |
Queste proprietà impostano il cuscinetto superiore [top], destro [right], inferiore [bottom], e sinistro [left] di un riquadrato.
BLOCKQUOTE { padding-top: 0.3em }
| Valore: | <padding-width>{1,4} | inherit |
| Iniziale: | non definito per le proprietà stenografiche |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | in riferimento alla larghezza del blocco contenitore |
| Media: | visuale |
La proprietà 'padding' è una proprietà stenografica per impostare 'padding-top', 'padding-right', 'padding-bottom', e 'padding-left' nella medesima posizione nel foglio di stile.
Se c'è un solo valore, si applica a tutti i lati. Se ci sono due valori, i cuscinetti superiore[top] ed inferiore [bottom] sono impostati sul primo valore e i cuscinetti destro [right] e sinistro [left] sono impostati sul secondo. Se ci sono tre valori, il superiore [top] è impostato sul primo valore, il sinistro [left e destro [right] sono impostati sul secondo, e l'inferiore [bottom] è impostato sul terzo. Se ci sono quattro valori, si applicano rispettivamente al superiore [top], destro [right], inferiore [bottom] e sinistro [left].
Il colore della superficie o immagine dell'area del cuscinetto è specificata con la proprietà 'background':
H1 {
background: white;
padding: 1em 2em;
}
L'esempio di sopra specifica un cuscinetto verticale di '1em' ('padding-top' e 'padding-bottom') e un cuscinetto orizzontale di '2em' ('padding-right' e 'padding-left'). L'unità 'em' è relativa alla dimensione del font [carattere] dell'elemento: '1em' è uguale alla dimensione del font [carattere] in uso.
Le proprietà dei bordi specificano l'ampiezza, il colore, e lo stile dell'area del bordo di un riquadrato. Queste proprietà si applicano a tutti gli elementi.
Nota. È da notare per l'HTML, che i programmi utente possono rendere i bordi per alcuni elementi (per esempio bottoni, menu, ecc.) in modo differente rispetto agli elementi "ordinari".
Le proprietà per la larghezza dei bordi specificano la larghezza dell'area del bordo. Le proprietà definite in questa sezione si riferiscono al tipo di valore <border-width>, che può assumere uno dei seguenti valori:
L'interpretazione dei primi tre valori dipende dal programma utente. Le seguenti relazioni, tuttavia, devono essere mantenute:
'thin' <='medium' <= 'thick'.
Inoltre queste larghezze devono essere costanti per tutto il documento.
| Valore: | <border-width> | inherit |
| Iniziale: | medium |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
Queste proprietà impostano la larghezza del bordo superiore [top], destro [right], inferiore [bottom], e sinistro [left] di un riquadrato.
| Valore: | <border-width>{1,4} | inherit |
| Iniziale: | si vedano le proprietà individuali |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
Questa proprietà è una proprietà stenografica per impostare 'border-top-width', 'border-right-width', 'border-bottom-width', e 'border-left-width' nella medesima posizione nel foglio di stile.
Se c'è un solo valore, si applica a tutti i lati. Se ci sono due valori, i bordi superiore[top] ed inferiore [bottom] sono impostati sul primo valore e i bordi destro [right] e sinistro [left] sono impostati sul secondo. Se ci sono tre valori, il superiore [top] è impostato sul primo valore, il sinistro [left e destro [right] sono impostati sul secondo, e l'inferiore [bottom] è impostato sul terzo. Se ci sono quattro valori, si applicano rispettivamente al superiore [top], destro [right], inferiore [bottom] e sinistro [left].
Nell'esempio di sotto, i commenti indicano le larghezze risultanti dei bordi superiore [top], destro [right], inferiore [bottom], e sinistro [left]:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thick */
Le proprietà del colore dei bordi specificano il colore del bordo di un riquadrato.
| Valore: | <color> | inherit |
| Iniziale: | il valore della proprietà 'color' |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
| Valore: | <color>{1,4} | transparent | inherit |
| Iniziale: | si vedano le proprietà individuali |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
La proprietà 'border-color' imposta il colore dei quattro bordi. I valori hanno i seguenti significati:
La proprietà 'border-color' può avere da uno a quattro valori, e i valori sono impostati sui differenti lati come per 'border-width'.
Se il colore del bordo di un elemento non è specificato con una proprietà del bordo, i programmi utente devono usare il valore della proprietà 'color' dell'elemento come il valore calcolato per il colore del bordo.
In questo esempio, il bordo sarà una linea nera solida.
P {
color: black;
background: white;
border: solid;
}
Le proprietà dello stile dei bordi specificano lo stile della linea del bordo di un riquadrato (solid, double, dashed, ecc.). Le proprietà definite in questa sezione si riferiscono al tipo di valore <border-style>, che può assumere uno dei seguenti:
Tutti i bordi sono disegnati sopra lo sfondo di un riquadrato. Il colore dei bordi tracciati per i valori di 'groove', 'ridge', 'inset', e 'outset' dipende dalla proprietà 'color' dell'elemento.
I programmi utente HTML conformi possono interpretare 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', e 'outset' come 'solid'.
| Valore: | <border-style> | inherit |
| Iniziale: | none |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
| Valore: | <border-style>{1,4} | inherit |
| Iniziale: | si vedano le proprietà individuali |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
La proprietà 'border-style' imposta lo stile dei quattro bordi. Può avere da uno a quattro valori, e i valori sono impostati sui differenti lati come per 'border-width' di sopra.
#xy34 { border-style: solid dotted }
Nell'esempio di sopra, i bordi orizzontali saranno 'solid' e i bordi verticali saranno 'dotted'.
Poichè il valore iniziale degli stili dei bordi è 'none', nessun bordo sarà visibile fin quando non si imposta lo stile dei bordi.
| Valore: | [ <'border-top-width'> || <'border-style'> || <color> ] | inherit |
| Iniziale: | si vedano le proprietà individuali |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
Questa è una proprietà stenografica per impostare la larghezza, lo stile e il colore del bordo superiore [top], destro [right], inferiore [bottom], e sinistro [left di un riquadrato.
H1 { border-bottom: thick solid red }
La regola di sopra imposterà la larghezza, lo stile ed il colore del bordo sotto l'elemento H1. I valori omessi vengono impostati ai loro valori iniziali. Poichè la regola che segue non specifica un colore del bordo, il bordo avrà il colore specificato dalla proprietà 'color':
H1 { border-bottom: thick solid }
| Valore: | [ <'border-width'> || <'border-style'> || <color> ] | inherit |
| Iniziale: | si vedano le proprietà individuali |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
La proprietà 'border' è una proprietà stenografica per impostare insieme la larghezza, il colore e lo stile per tutti e quattro i bordi di un riquadrato. Diversamente dalle proprietà stenografiche 'margin' e 'padding', la proprietà 'border' non può impostare differenti valori sui quattro bordi. Se si vuole fare questo, si devono usare una o più di una delle altre proprietà dei bordi.
Per esempio, la prima regola qui sotto è equivalente all'insieme delle quattro regole dopo di lei:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Poichè in una certa misura, le proprietà hanno funzionalità che si sovrappongono, l'ordine con cui le regole vengono specificate è importante.
Si consideri questo esempio:
BLOCKQUOTE {
border-color: red;
border-left: double;
color: black
}
Nell'esempio di sopra, il colore del bordo sinistro è nero, mentre gli altri bordi sono rossi. Questo è dovuto a 'border-left' che imposta la larghezza, lo stile ed il colore. Poichè il valore di colore non è dato dalla proprietà 'border-left', verrà preso dalla proprietà 'color'. Il fatto che la proprietà 'color' è impostata dopo la proprietà 'border-left' non è rilevante.