CARATTERISTICHE DEI BOX

Innanzi tutto vediamo come vengono chiamati i vari spazi di un box in una pagina web :

E' importante notare che il border può avere un certo spessore (come si vedrà nelle istruzioni che lo riguardano). L'istruzione OUTLINE lavora nello spazio tra il bordo e l'esterno del margine.

Ora vediamo come vengono scritte le caratteristiche di una classe o id nelle pagine CSS :

.nome classe

{

istruzioni CSS per la gestione della classe

}

Vediamo ora le istruzioni principali del CSS3 :

Permette di posizionare un elemento html in modo diverso

position : valore ;

valore	descrizione	esempio
static	(default) Ogni nuovo box viene posizionato sotto il precedente
absolute	Posizionato in modo assoluto (mediante top, right, bottom e left definisco distanza dall'angolo contenitore) rispetto a un box genitore non statico. Altrimenti fa riferimento al box body
fixed	Posizione fissa rispetto alla finestra del browser, quando scrolla la pagina questo box rimane fermo sullo schermo
relative	I parametri sono riferiti partendo da quelli che dovrebbe avere (per spostarlo uso sempre top, right, bottom e left)
inherit	Il valore della proprietà position è ereditata dall'elemento genitore

top : indica la distanza dal lato superiore del box (es. top:20px;)

right : indica la distanza dal lato destro del box (es. right:20px;)

bottom : indica la distanza dal lato inferiore del box (es. bottom:20px;)

left : indica la distanza dal lato sinistro del box (es. left:20px;)

border definisce in ordine la larghezza, lo stile e il colore (valori separati da uno spazio).

border:width style color;

Oppure uso le istruzioni specifiche per i tre attributi.

border-style : valore ;

valore	descrizione	esempio
none	Nessuna linea di contorno
hidden	Nascosta (equivalente a none)
dotted	Puntini (l'effetto dipende dalla larghezza)
dashed	Tratteggio (l'effetto dipende dalla larghezza)
solid	Linea continua
double	Due righe (l'effetto dipende dalla larghezza)
groove	Effetto 3D che dipende dal colore
ridge	Effetto 3D che dipende dal colore
inset	Effetto 3D che dipende dal colore
outset	Effetto 3D che dipende dal colore
inherit	Ereditato dal genitore
valore numerico	Nomi, codice (#xxxxxx)	border-width:3px

nota – un solo valore rappresenta i quattro lati uguali, mentre per assegnare valori diversi (o comunque in modo separato) si inseriscono i valori, separati da uno spazio, TOP RIGHT BOTTOM LEFT. Specificando due soli valori, il primo viene assegnato a TOP e BOTTOM, mentre il secondo a RIGHT e LEFT.

Esiste anche l'istuzione border-posizione-style, dove al posto di posizione posso inserire TOP, RIGHT, BOTTOM e LEFT.

border-color : valore ;

valore	descrizione	esempio
trasparent	Come lo sfondo del box
inherit	Ereditato dal genitore
valore numerico	Nomi, codice (#xxxxxx)	border-color:red

Esiste anche l'istuzione border-posizione-color, dove al posto di posizione posso inserire TOP, RIGHT, BOTTOM e LEFT.

border-width : valore ;

valore	descrizione	esempio
thin	Sottile (circa 1px)
medium	Medio (circa 3px)
thick	Spesso (circa 5px)
inherit	Ereditato dal genitore
valore numerico	Unità di misura : px	border-width:3px

Esiste anche l'istuzione border-posizione-width, dove al posto di posizione posso inserire TOP, RIGHT, BOTTOM e LEFT.

Border-radius specifica l'arrotondamento degli spigoli del box. Quelli sotto sono specifici per ogni angolo. Il valore1 valore2 sono due valori separati per definire due raggi diversi (raggio_orizzontalepx raggio_verticalepx). Nel primo caso si separano i valori con una slash “/”, negli altri casi solo uno spazio. Come unità di misura si può usare il px o %.

border-radius : valore1/valore2 ;

border-top-left-radius : valore1 valore2 ;

border-top-right-radius : valore1 valore2 ;

border-bottom-left-radius : valore1 valore2 ;

border-bottom-right-radius : valore1 valore2 ;

l'istruzione box-shadow permette di dare un ombreggiatura ad un elemento html.

box-shadow : valoreH valoreV sfumatura colore ;

valore	descrizione	esempio
valoreH	Indica la larghezza in px. Un valore positivo la posiziona a dx del box, un valore negativo a sx.
valoreV	Indica la larghezza in px. Un valore positivo la posiziona sotto al box, un valore negativo sopra.
sfumatura	Più è alto e più evidente è la sfumatura (espresso in px). 0 non ha sfumatura.
colore	Nome colore o codice #xxxxxx

permette di usare e modificare un immagine per costruire il bordo del box.

border-image : valore ;

Il margin definisce lo spazio intorno ai limiti degli elementi non riempiti con il colore dello sfondo.

margin : valore ;

margin-top:valore;

margin-right:valore;

margin-bottom:valore;

margin-left:valore;

valore	descrizione	esempio
auto	Sottile (circa 1px)
%	Espresso in percentuale rispetto al genitore
inherit	Ereditato dal genitore
valore numerico	Unità di misura : px, pt, cm	margin:3px 20px 3px 20px

Il padding definisce lo spazio intorno ai limiti degli elementi riempiti con il colore dello sfondo.

padding:valore;

padding-top:valore;

padding-right:valore;

padding-bottom:valore;

padding-left:valore;

valore	descrizione	esempio
auto	Sottile (circa 1px)
%	Espresso in percentuale rispetto al genitore
inherit	Ereditato dal genitore
valore numerico	Unità di misura : px, pt, cm	margin:3px 20px 3px 20px

Background-color definisce il colore dello sfondo. I valori sono il nome o il codice #xxxxxx.

Background-color: valore;

valore	descrizione	esempio
trasparent	Trasparente (valore di default)
inherit	Ereditato dal genitore
valore numerico	Nomi, codice (#xxxxxx) colori_html.html

Questo attributo definisce l'immagine di sfondo per un elemento e può essere adoperato indipendentemente dal colore dello sfondo assegnato alla pagina.

Se abbinato al markup body diventa l'immagine di sfondo di tutta la pagina.

Background-image: url(percorso/....../nome_immagine.est);

Esempio.

Body {background-image: url(percorso/nome_immagine.gif;}

A volte l'immagine è piccola per riempire gli spazi di un box, allora si usa questo attributo che ripete la stessa immagine. La ripetizione può essere controllata con dei parametri.

Background-repeat:valore;

valore	descrizione	esempio
repeat	indica che l'immagine deve essere replicata in orizzontale ed in verticale coprendo tutto il box.
repeat-x	deve essere replicata soltanto in orizzontale.
repeat-y	deve essere replicata soltanto in verticale.
no-repeat	Visualizza una sola immagine, NON deve essere replicata.
inherit	Eredita il parametro dal genitore.

Logicamente questo attributo dovrà necessariamente essere adoperato in abbinamento con background-image illustrato sopra. Quindi un esempio

body {background-image: url (percorso/nome_immagine.gif); background-repeat: repeat;}

Partendo da questa immagine :

l'effetto dei possibili valori, in ordine di presentazione, è il seguente

repeat

repeat-x

repeat-y

no-repeat

Questo attributo definisce il punto da cui iniziare a posizionare l'immagine di sfondo e funziona se abbinato con background-image e background-repeat.

background-position: coordinataH coordinataV;

Si possono adoperare parole chiave :

per la posizione orizzontale: left, center, right
per la posizione verticale: top, center,bottom.
Coordinate percentuali = è possibile esprimere valori percentuali, dove:
- 0% 0% indica l'angolo in alto a sinistra (default)
- 100% 100% indica l'angolo in basso a destra.
coordinate x y = seguite da unità di misura per maggior precisione. Si possono specificare anche coordinate espresse in mm, cm, inc.

esempio.

Background-position: 10px 50px;

tanto per prendere confidenza con il linguaggio, è importante sapere che il codice sopra si può scrivere anche nel seguente modo :

body

{

background-image: url (percorso/nome_immagine.gif);

background-repeat: repeat;

background-position:50% 50%;

}

altri esempi:

background-position 30% 50%
background-positione left
background-position center
background-position right
background-position top
background-position top right
background-position bottom
background-position bottom left

Background-attachment:valore;

valore	descrizione	esempio
scroll	L'immagine scorre con il resto della pagine sotto la guida delle barre di scorrimento.
fixed	L'immagine rimane fissa, e il resto della pagina scorre.
local	Scorre assieme all'elemento di cui fa da sfondo.

Background-clip:valore;

valore	descrizione	esempio
border-box	Lo sfondo (colore o immagine) riempie lo spazio fino al bordo.
padding-box	Lo sfondo (colore o immagine) riempe lo spazio fino al padding (se la width del bordo è 0 coincide con la voce sopra).
content-box	Lo sfondo (colore o immagine) riempe lo spazio del contenuto.

Definisce le caratteristiche dimensionali dell'immagine inserita nello sfondo.

Background-size:valore;

valore	descrizione	esempio
valore1 valore2 (il secondo è opzionale)	Il primo è la larghezza il secondo l'altezza. Se viene inserito un solo valore, il secondo viene creato automaticamente per mantenere le proporzioni dell'immagine iniziale. Il valore può essere inserito in px o %.
cover	Copre l'intero spazio del contenuto con il rischio che parte dell'immagine (sull'eventuale lato corto) sia non visibile perchè fuoriesce dallo spazio.
contain	Lo adatta allo spazio del contenuto mantenendo le proporzioni dell'immagine.

Per definire e controllare un immagine di sfondo con un solo comando c'è il background: che richiede di inserire i parametri in ordine come sono stati singolarmente presentati sopra e separati da uno spazio.
background: valore1 valore2 valoren;

Esempio.

body
{
background: #00ffcc url('percorso/.../nome_immag.gif') no-repeat fixed center;
}

in pratica posiziona un'immagine al centro del box bloccata al centro (cioè non scorre) e il colore di fondo è definito dal codice #00ffcc.

valori massimi e minimi riferiti alle dimensioni di un paragrafo a livello di spazio occupato.

max-height:valore;

max-width:valore;

min-height:valore;

min-width:valore;

gestisce il contenuto e le eventuali barre di scorrimento all'interno di un blocco. Il secondo gestisce solo la linea orizzontale e il terzo solo quella verticale.

overflow:valore

overflow-x:valore

overflow-y:valore

valore	descrizione	esempio
visible	Il contenuto della pagina web all'interno del box, se occupa più spazio del box stesso, invade lo spazio esterno, soprapponendosi ai contenuti.
hidden	La pagina web che esce dai bordi del box rimane nascosta e non si vede.
scroll	Inserisce sotto e a sinistra le barre di scorrimento, vengono inserite anche se non sono utili.
auto	Inserisce sotto e a sinistra le barre di scorrimento, vengono inserite solo se il lato deve scorrere per visualizzare il contenuto della pagina web.

Cornice all'esterno del bordo (tra bordo ed esterno margine). Con la prima istruzione uso una sola riga, altrimenti uso le altre tre distinte.

outline:valore_color valore_style valore_width;

outline-color:valore;

outline-style:valore;

outline-width:valore;

valore	descrizione	esempio
colore	(color) nome o codice del colore #xxxxxx
invert	(color) invertendo il colore, viene sempre evidenziato rispetto allo sfondo.
none	(style) Nessuna linea di contorno
hidden	(style) Nascosta (equivalente a none)
dotted	(style) Puntini (l'effetto dipende dalla larghezza)
dashed	(style) Tratteggio (l'effetto dipende dalla larghezza)
solid	(style) Linea continua
double	(style) Due righe (l'effetto dipende dalla larghezza)
groove	(style) Effetto 3D che dipende dal colore
ridge	(style) Effetto 3D che dipende dal colore
inset	(style) Effetto 3D che dipende dal colore
outset	(style) Effetto 3D che dipende dal colore
thin	(width) Sottile.
medium	(width) Medio.
thick	(width) Spesso.
valore	(width) Unità di misura in px.
inherit	Per tutti vale il valore ereditario dal genitore.

display:

Background-repeat:valore;

Per definire e controllare un immagine di sfondo con un solo comando c'è il background: che richiede di inserire i parametri in ordine come sono stati singolarmente presentati sopra e separati da uno spazio.background: valore1 valore2 valoren;

Per definire e controllare un immagine di sfondo con un solo comando c'è il background: che richiede di inserire i parametri in ordine come sono stati singolarmente presentati sopra e separati da uno spazio.
background: valore1 valore2 valoren;