artemate: fogli di stile

PROGRAMMAZIONE PER IL WEB

STORIA - SCHEMA HTML - SCHEMA XHTML - SCHEMA XML - FOGLI DI STILE

INSERIRE ELEMENTI MULTIMEDIALI - COSTRUIRE UN SEMPLICE SITO

FOGLI DI STILE CCS

CCS = Cascading Style Sheets

LINGUAGGIO DI FORMATTAZIONE STILISTICA E STRUTTURALE

Con XHTML si deve separare la struttura della pagina dallo stile della pagina, quest'ultima viene definita con i Cascading Style Sheets, acronimo CSS "fogli di stile a cascata".
Il termine "a cascata" (cascading) richiama una delle caratteristiche principali di questa tecnologia, per cui e' possibile incorporare nel documento differenti fogli di stile, ognuno dei quali, in base a regole gerarchiche, prevale sull'altro. I CSS sono stati introdotti da Microsoft dalla terza versione di Internet Explorer. I CSS sono stati ufficialmente riconosciuti e standardizzati dal W3C (consorzio internazionale per lo sviluppo del Web) nelle raccomandazioni "CSS1" prima, e "CSS2" poi.

COME richiamare un foglio di stile IN UNA PAGINA

1) DIRETTAMENTE NELLA PAGINA con style. Attributo di (X)HTML . La dichiarazione avviene a livello dei singoli tag contenuti nella pagina	<h1 style="color: red; background: black;">...</h1>
2) Foglio INCORPORATO nell'header della pagina : inserito direttamente nel documento (X)HTML tramite l'elemento <style>. La dichiarazione va posta all'interno della sezione <head>:	<style type="text/css"> body { background: #FFFFCC; } </style>
3) FOGLIO DI STILE ESTERNO richiamato usando l'elemento <link>all'interno della sezione <head> L'elemento <link> presenta una serie di attributi : 1. rel: relaz tra doc e file coll: stylesheet e alternate stylesheet. 2. href: definisce l'URL assoluto o relativo del foglio di stile. 3. type: tipo dati da collegare. Per i CSS l'unico valore è text/css. 4. media: si identifica il supporto (schermo, stampa, etc) cui applicare CCS	<head> <title>MIO SITO</title> <link media="all" rel="stylesheet" type="text/css" href="stile.css"> </head>
4)FOGLIO DI STILE ESTERNO RICHIAMATO mediante la direttiva @import all'interno dell'elemento <style>. Questo sistema è uno dei modi più sicuri per risolvere problemi di compatibilità tra vecchi e nuovi browser.	<style> @import url(stile.css); </style>

Attributo media. Imposta un foglio di stile per ogni supporto mediante l'elemento <link> oppure l’elemento <style>
Es: <link media="print" rel="stylesheet" type="text/css" href="print.css" />
<style media="screen" type="text/css">...</style>
diversi valori possibili:
* all. Il CSS si applica a tutti i dispositivi di visualizzazione.
* screen. Valore usato per la resa sui normali browser web.
* print. Il CSS viene applicato in fase di stampa del documento.
* projection. Usato per presentazioni e proiezioni a tutto schermo.
* aural. Da usare per dispositivi come browser a sintesi vocale.
* braille. Il CSS viene usato per supporti basati sull'uso del braille.
* embossed. Per stampanti braille.
* handheld. Palmari e simili.
* tty. Dispositivi a carattere fisso.
* tv.Web-tv.
Il valore di default è all, In mancanza di una dichiarazione esplicita (ricordiamo infatti che media è un attributo opzionale).
SE USO più di un valore, i nomi della lista vanno separati da una virgola:
<link media="print,tv,aural" rel="stylesheet" type="text/css" href="print.css" />
utilizzo di fogli di stile esterni alternativi.

CCS alternativo selezionabile con opzione rel=”alternate stylesheet”
esempio:
<link rel="stylesheet" type="text/css" href="stile.css" />
<link rel="alternate stylesheet" type="text/css" href="stile_alternativo.css" />

STRUTTURA DI UNA REGOLA CSS
elemento{ attibuto1:valore; attributo2:valore; attributo3;valore }

oppure:

elemento{
attibuto1:valore;
attributo2:valore;
attributo3;valore
}

I CSS definiscono lo stile degli ELEMENTI DIV ,p, h1, h2, h3, img, a , body, del linguaggio html.
La dichiarazione formata da due parti : elemento e attributi
note:- CSS è case sensitive
   - per assegnare un valore ad un attributo uso : (DUE PUNTI)
   - gli attributi sono separati da ;( punto e virgola) o da - (trattino)
COMMENTI:
/* testo del commento */

DEFINIRE I CONTENITORI di pagina DIV

/*sfondo di tutto ( l'intero schermo con l'immagine di greca sul giallino)
BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: url(../images/sfondo.gif);
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana,Helvetica,sans-serif
}

/*contenitore di tutta la pagina intera bianca, contenete TOP nella parte superiore*/
DIV#container {
BORDER-RIGHT: #36c 1px solid;
MARGIN: 0px auto;
BORDER-LEFT: #36c 1px solid;
WIDTH: 761px;
POSITION: relative;
HEIGHT: auto;
text-align: center;
background-color: #FFFFFF;
}

/*TOP parte superiore contenente toolup1-fucsia e toolup3-menu navigazione bordo e Contain-giallo */
DIV.top {
MARGIN-BOTTOM: 0px;
BORDER-COLLAPSE: collapse;
border-spacing: 0px;
background-color: #FF99CC;
font-size: 760px;
padding: 0px;
width: 760px;
}
/*toolup1 è la parte fucsia contienente TESTA E ORIENTA
DIV.toolup1 {
BACKGROUND-IMAGE: none;
WIDTH: 768px;
BORDER-COLLAPSE: collapse;
HEIGHT: 76px;
TEXT-ALIGN: center;
border-spacing: 0px;
}
DIV.testa {
PADDING-RIGHT: 0px;
FLOAT: left;
MARGIN: 4px 9px 0px 0px;
WIDTH: 570px;
COLOR: #34567e;
FONT-FAMILY: Verdana,Helvetica,sans-serif;
BORDER-COLLAPSE: collapse;
HEIGHT: 63px; border-spacing: 0px
}
/* contenitore per immagine a fianco titolo */
DIV.orienta {
PADDING-RIGHT: 0px;
FLOAT: right;
MARGIN: 1.5em 1em 0px 0px;
WIDTH: 105px;
HEIGHT: 51px;
}
/* contenitore per menu navigazione */
DIV.toolup3 {
BACKGROUND-IMAGE: none;
WIDTH: 768px;
BORDER-COLLAPSE: collapse;
HEIGHT: 19px;
TEXT-ALIGN: center;
border-spacing: 0px;
font-size: 768px;
}
/* contain striscia GIALLA parte sottostante titolo con*/
DIV.contain {
BORDER-RIGHT: #cccccc 1px solid;
PADDING-RIGHT: 1px;
BORDER-TOP: #cccccc 1px solid;
PADDING-LEFT: 1px;
PADDING-BOTTOM: 0px;
MARGIN: auto;
BORDER-LEFT: #cccccc 1px solid;
WIDTH: 758px;
PADDING-TOP: 0px;
BORDER-BOTTOM: #cccccc 1px solid;
background-color: #FFFF33;
}

TITOLI h1 h2 h3 h4 h5 h6 ( valori decrescenti ) E PARAGRAFO p
h1 {color:”#0000FF”} h1 è l'elemento, color l'attributo e 0000FF il valore
h1,h2{margin: 0;padding:0}
h1{padding-left:10px; font: bold 2.3em/80px arial,sans-serif}
h2{color: #0000FF; font-size: 1.5em}
h1 { font-size:1.50em }
h2 { font-size:1.25em }
h3, h4, h5, h6 { font-size:1em }
p { font-size: 12 pt; font-family: Arial, Verdana, sans-serif; color: black; text-align: justify; }
p {font: 12px Verdana, Arial; text-align:center}

font-size:25pt sono i punti sullo schermo ogni punto è 1/72 di pollice
font-size:12px sono i pixel la cui densità dipende dalla risoluzione video
font-size:1in sono i pollinci in misura anglosassone
font-size:3cm misura in cm poco usata
fornt-size:200% cioè 24px il doppio del valore di default dei caratteri del browser(che di solito è 12px)
font-size:1,5em enfasi pari a 1 volta e mezza rispetto al valore di default 12px
text-align:justify; text-align:left ; text-align:right; allineamento testo giustificato,sinistra,destra t

LA LISTA ol ordinata ul non ordinata

ul { list-style: circle outside; }                   con testo a capo indentato rispetto al pallino
ol { list-style: upper-roman inside; }            con testo sotto i numeri romani maiuscoli
ul { list-style-type: square; }                  list-style-type : square, disc, circle,
ol { list-style-type: upper-roman ; }        lower-roman (romani min), lower-alpha ,upper-alpha, none
ul { list-style-image: url(immagine.gif); }      list-style-image per url a immagine
ul { list-style-position: outside; }                list-style-position: inside (a capo sotto il puntino) o outside
ul { list-style: circle inside; }                   list-style per una o più proprietà contemporaneamente
ul { list-style: url(immagine.gif) square outside; }:

LE IMMAGINI img e il testo attorno

img{ width: 10%;} ridimensionata al 10% finestra browser
img{ width:200; height:150 ;} dimensioni diverse da quelle proprie:larghezza 200px altezza 150px

img {display: block; } display: block per testo sopra e sotto all'immagine o
img {float : left; } float: left; testo intorno all'immagine.

img {float : left; margin: 15px 15px 15px 15px;}           margini testo attorno:alto destro sotto sinistro
img{float: right; margin: 15px 15px 15px 15px;}           img a sinistra
img{vertical-align:top}                            testo al top in lato a destra (bottom basso a destra;middle:mezzo)

SCORCIATORIE per definire con una sola dichiarazione un insieme di proprietà.
div {margin: 10px 5px 10px 5px;} per margini:alto destro sotto sinistro
Per il momento ci limitiamo all'elenco:
background | border | border-top | border-right | border-bottom | border-left
| cue | font | list-style | margin | outline | padding | pause |

ID selezionare stile richiamabile da specifico elemento p o h1

serve per identificare univocamente un elemento . Nel foglio di stile è assegnato un nome logico

#nome_id{..}                   si richiama nella pagina html usando dentro al tag elemento id="nome_id"
#titolo {color: blue;}         assegna il colore blue all'elemento <h1 id="titolo">...</h1>
img#ridim{ width: 10%;}    ridimensiona al 10% finestra browser l'elemento <img id="ridim" src="foto.jpg" />

img#sinistro {float: left; margin: 15px 15px 15px 15px;} def i margini attorno all'img
img#destro {float: right; margin: 15px 15px 15px 15px;}

NB:Se uno stile va applicato ad un solo specifico elemento usate un ID. Se invece prevedete di usarlo più volte ovvero su più elementi definite nel CSS una classe.

Classi di stili per definire stile richiamabile da tutti elementi p,h1,h2

.classestile{..}             classe di stile PER TUTTI GLI ELEMENTI CHE LA RICHIAMANO
.testored {font: 12px Arial;;color: #FF0000;}
                     richiamata con:<p class="testored">....</p> l'attributo class applicato a tutti elementi del paragrafo
                  <h3 class="testorred">....</h3>    l'attributo class viene applicato a tutti gli elementi di h3
elemento.CLASSE_SPECIFICA{..}          per applicare la classe ad uno specifico ELEMENTO
p.testorosso {color: red;}                   richiamata solo nei paragrafi così: <p class="testorosso">....</p>
Elemento.CLASSI_1.CLASSE_2 {..}
PER CLASSI MULTIPLE applicabili ad un elemento:
p.testorosso.grassetto {color:red; font-weight:bold;}

Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) TUTTI i nomi delle classi definiti nel selettore. Avrà dunque il testo rosso e in grassetto questo paragrafo:
<p class="grassetto testorosso maiuscolo">..</p> MA NON questo:
<p class="grassetto">...</p>

PSEUDO-CLASSE di stili AL VERIFICARSI DI CERTE CONDIZIONI

selettore:PSEUDO_CLASSE {dichiarazione} imposta stile per un elemento al verificarsi di certe condizioni
PSEUDO CLASSE ASSOCIATA A SELETTORE SEMPLICE
a:link {color: blue;} vuol dire: collegamenti ipertestuali (<A>) non visitati (:link) avranno il colore blue.
NB:Gli pseudo_elementi vanno sempre collegati ad altri selettori semplice o di classe messo all’inizio
Esempio per personalizzare i links occorre inserire queste speudo classi in ordine:in questa sequenza: link, visited, hover e si riferiscono rispettivamente ai links ancora da visitare, a quelli visitati, e quando il mouse si trova sopra
A:link{ text-decoration: none; color: #0000cc; } text-decoration:none toglie sottolineatura
A:visited{ text-decoration: none; color: #009900; }
A:hover{ Color: #3366ff; text-decoration: none; }

UNA PSEUDO-CLASSE ASSOCIATA A SELETTORI DI TIPO CLASSE.
a.collegamento:link {color: green;}        testoverde PER i link non_visitati con attributo class="collegamento".
              <a href="pagina.htm" class="collegamento">
Ma non questo:
              <a href="pagina2.htm">
alla specifica CSS2 è consentita anche questa sintassi:
a:link.collegamento        in cui la classe segue la pseudo-classe.

TIPI DI SPEUDO-ELEMENTI

:link
Si applica solo all'elemento (X)HTML <A> che abbia anche l'attributo href. Quindi, non alle cosiddete ancore invisibili ma solo ai link ipertestuali. Definisce lo stile per questo elemento quando il collegamento punta ad un sito o ad una pagina non ancora visitati.esempio sopra.

:first-child
È supportata solo dai browser Gecko-based (Mozilla e Netscape 6/7) e da Explorer 5 Mac. Seleziona e formatta un elemento che si trovi ad essere il primo elemento figlio di un altro elemento.
<elemento>:first-child {<dichiarazioni>;}
Esempi: p:first-child {color:red;}

:first-letter
Con questo selettore è possibile formattare la prima lettera di qualunque elemento contenente del testo. Le proprietà modificabili sono ovviamente tutte quelle relative al carattere e al testo, ma anche quelle legate al colore, allo sfondo, ai margini e al padding.
p:first-letter {color: red; font-weight: bold;}
È possibile anche usare classi:
p.nome_classe:first-letter {color: red; font-weight: bold;}
O selettori di tipo ID:
#nome_id:first-letter {color: red; font-weight: bold;}
Per tutte le regole usate negli esempi il testo degli elementi presenterà la prima lettera rossa e in grassetto.

:first-line
Imposta lo stile della prima riga di un elemento contenente del testo.
p:first-line {color: blue;}
p.nome_classe:first-letter {color: blue;}
td#nome_id:first-letter {color: blue;}

:bifore no IE
è possibile inserire nel documento un contenuto non presente nello stesso.
Immaginiamo di voler inserire un'immagine particolare prima di ogni titolo <H1>.
h1:before {content: url(immagine.gif);}
Volendo inserire una stringa essa va racchiusa tra virgolette:
h1:before {content: "Il titolo è...";}

:after
Pseudo-elemento complementare a :before. L'unica differenza è che il contenuto viene inserito dopo l'elemento specificato nel selettore.
h1:after {content: url(immagine.gif);}
h1#nome_id {content: "Testo del titolo";}

ELEMENTO BODY

BODY color=colore testo

Il colore del testo è definito dalla proprietà color alla quale è possibile assegnare uno qualsiasi dei 16 milioni di colori disponibili. Stessa cosa per il colore di sfondo definito dalla proprietà background-color che accetta gli stessi valori assegnabili a color con l'aggiunta del valore transparent.

body {
color: Blue;
background: White;
}
body {
background-image: url(immagine.gif);
color: Blue;
}

Ci sono altre proprietà che è possibile adoperare insieme alla proprietà background-image, si tratta di:

background-attachment: scroll
background-attachment: fixed

Con valori scroll o fixed
Servono per tenere fermo lo sfondo mentre si scorre lungo la pagina, per default lo sfondo scorre con la pagina, scroll se si adopera fixed lo sfondo resta fermo.

background-repeat: repeat-y;
background-repeat: repeat-x;
background-repeat: no-repeat

Con valori repeat-y o repeat-x o no-repeat
Servono per avere una ripetizione dell'immagine di sfondo non su tutta la pagina ma soltanto in senso verticale: repeat-y o soltanto in senso orizzontale: repeat-x o nessuna ripetizione: no-repeat

APPROFONDIMENTI

note su SELETTORE DI ELEMENTI singolo o di gruppo(type selector)

ELEMENTO SINGOLO
h1 {color: #000000;}
p {background: white; font: 12px Verdana, Arial, sans-serif;}
table {width: 200px;}

ELEMENTI RAGGRUPPATI
h1, h2, h3 {background: white;}

SELETTORE UNIVERSARE PER TUTTI GLI ELEMENTI. carattere *
* { color: black; }

Selettore del discendente (descendant selector) definito "selettore contestuale".
div p {color: black;} Seleziona i paragrafi (P) discendenti di elementi DIV
p strong {color: red;} SELEZ elementi STRONG che si trovino in un paragrafo.

Selettore del figlio (child selector) no IE Explorer su Windows,
body > p {color: black;} selezionano i paragrafi figli diretti di body.

adjacent-sibling selector. Seleziona gli elementi adiacenti. No IE
h1 + p {color: red;} selez i paragrafi adiacenti al titolo.

Selettore dell'attributo (attribute selector)Il supporto di questo selettore non è diffuso.
Seleziona gli elementi in base ai loro attributi e/o al valore di tali attributi.
Quattro sono i modi d'uso possibili.
Attributo semplice
elemento [ attributo ] per elementi con un det attributo. ES:
input [ id ] {background: red;} per sfondo rosso a tutti gli elementi input per cui sia stato impostato un attributo id, a prescindere dal valore ad esso assegnato.
Attributo con valore
elemento [ attributo = "valore" ] per elementi che abbiano come valore dell'attributo la stringa definita nella regola. ES:
input [ id = "text" ] { backgorund: red; } applicherà un sfondo rosso a tutti gli elementi input che abbiano come valore dell'attributo id "text". Come si vede una sintassi più restrittiva rispetto alla prima.
Attributo il cui valore contiene una stringa
elemento [ attributo t= "valore" ]
vengono selezionati tutti gli elementi in cui il valore dell'attributo dichiarato contenga la stringa definita nella regola.
img [ alt= "foto" ] {margin: 10px;}
La regola applicherà un margine di 10px a tutte le immagini in cui l'attributo alt contiene "foto". Quindi, saranno selezionate sia questa immagine:
<img src="figura1.gif" alt="Foto Colosseo" /> sia questa: <img src="figura2.jpg" alt="bella foto" />
Attributo il cui valore inizia con una stringa
elemento [ attributo |= "valore" ]
Seleziona gli elementi in cui il valore dell'attributo dichiarato inizia con la stringa definita nella regola. Esempio:
img [ alt |= "figura" ] {margin: 10px;}
selezionerà tutte le immagini in cui l'attributo alt inizia con la stringa "figura".

Costrutti introdotti dal simbolo della chiocciola. pronuncia at @-rules

rappresentano vie alternative, ma spesso più flessibili e potenti, per realizzare cose attuabili in altri modi.

@import viene usata innanzitutto per collegare un css esterno al documento.L'indicazione url precede l'indirizzo del CSS. Questo è racchiuso tra parentesi tonde. La @-rule deve presentare alla fine il punto e virgola di chiusura.

L'url del foglio di stile può essere relativo o assoluto, come in questo:
<style type="text/css">
@import url(http://www.miosito.it/foglio_di_stile.css);
</style>

Altre possibili sintassi, accettate dai browser recenti, ma problematiche con quelli più datati:
URL con virgolette: @import url("stile.css");
Direttiva senza l'indicazione url: @import "stile.css";

Un principio fondamentale è che all'interno del tag <STYLE> @import deve essere la prima regola definita. In pratica, se si scrive così la direttiva non funzionerà e il CSS non sarà caricato in quanto @import è preceduta da una regola che applica uno stile all'elemento <H1>:
<style type="text/css">
h1 { color: black; }
@import url(foglio_di_stile.css);
</style>
Il modo giusto è dunque questo:
<style type="text/css">
@import url(foglio_di_stile.css);
h1 { color: black; }
</style>

Per importare all'interno di un singolo tag <STYLE> più fogli di stile:
<style type="text/css">
@import url(foglio_di_stile.css);
@import url(foglio_di_stile2.css);
</style>

Le regole di tutti i CSS collegati in questo modo saranno applicate al documento secondo l'ordine e i criteri stabiliti dalle norme sull'importanza e la specificità USATO PER incorporare IN UN css un altro CSS esterno:
@import url(foglio.css)
h1 { color: black; }

PER definire il supporto cui applicare il CSS,:
<style type="text/css">
@import url(foglio_stampa.css) print;
@import url(foglio_schermo.css) screen, handheld;
</style>

@media <valore> {regole CSS} @media va quindi seguito dal nome di uno dei supporti scelti come target specifico e dalle regole di stile racchiuse tra parentesi graffe. Esempio:
<style type="text/css">
@media screen {
h1 {color: black;}
p {color: red;}
}
@media print {
h1 {color: red;}
p {color: black;}
}
</style>

@charset
serve a specificare l'impostazione relativa alla codifica dei caratteri di un documento. Svolge in pratica la stessa funzione che in (X)HTML è possibile ottenere con l'uso dei meta-tag:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
La sintassi è semplicissima:
@charset "iso-8859-1"
La direttiva non può essere usata in fogli incorporati. Quando si vuole usarla in un foglio esterno essa deve essere la prima dichiarazione del CSS.

@font-face
può essere usata per descrivere un font usato nel documento: potrebbe essere usata per specificare l'url di un carattere particolare da scaricare su una macchina che non lo veda presente tra i suoi font. La sintassi classica è infatti questa:
@font-face {
font-family: Santiago;
src: url("http://www.mioserver.it/fonts/santiago.tt");
}

I BOX MODEL

#box {
width: 350px;
height: 150px;
padding: 20px;
border: 5px solid;
margin: 20px;
}
width ed height sono rispettivamente larghezza ed altezza dei contenuti che possono essere inseriti all'interno del box.
padding =IMBOTTITURA lo spazio fra i contenuti ed il bordo del box.
border lo spessore del bordo.
margin la distanza del box dagli altri elementi della pagina.

<div id="box">Testo di prova per riempire il box... </div> CODICE PER RICHIAMARLO

Da notare che la larghezza e l'altezza totale di un box sono dati dalla somma dei contenuti più quello del padding più quello dello spessore del bordo. Nel nostro caso lo spazio occupato realmente sarà: 350 + 20 + 20 + 5 + 5 = 400 pixel per la larghezza e 150 + 20 + 20 + 5 + 5 = 200 pixel in altezza. Praticamente le misure specificate (350 x 150) si riferiscono ai contenuti.

Questo è vero per tutti i browser tranne che per IE, il famoso browser della Microsoft, il più adoperato ma anche quello che meno di altri rispetta gli standards o se preferite le direttive del W3C. Li chiameremo bugs e di questi ce ne sono diversi che si sommano a molte proprietà dei CSS che non sono supportate. Pazienza, noi navigatori confidiamo nelle versioni future e nel frattempo chiediamoci come mai noi ci diamo da fare per adeguarci ai nuovi metodi quando poi certe case produttrici di browser possono fare come gli pare. Ma questo è un discorso che qui non c'entra molto.

Se si tratta di un solo box probabilmente nessuno si accorgerebbe di nulla ma dovendo creare un layout formato da più box ecco che le differenze si noterebbero, qualche pixel in più o qualche pixel in meno sarebbe sufficiente per scombinare tutta la nostra impaginazione, per fortuna si può rimediare, vediamo come.

Internet Explorer nelle versioni 5 e 5.5 ma anche per la versione 6 (se opera in quirks mode) considera la larghezza e l'altezza dei contenuti sottraendo dalle misure specificate quelle dello spessore del bordo e dello spazio padding. Nel nostro caso il box esterno sarà realmente 350 x 150 Pixel ma il box dei contenuti si rimpicciolisce diventando: 350 - 20 - 20 - 5 - 5 = 300 pixel per la larghezza e 150 - 20 - 20 - 5 - 5 = 100 pixel per l'altezza.

In questo esempio la differenza sarebbe notevole se visto con Un browser come Firefox ed un IE V.5 e dal momento che IE sottrae bordo e padding dalla larghezza e dall'altezza totale, si potrebbe risolvere creando due box uno interno all'altro dove nel box esterno non si specificano ne bordi ne padding che metteremo nel box interno.

#box-esterno {
width: 400px;
height: 200px;
}

#box-interno{
padding: 20px;
border: 5px solid;
margin: 20px;
}

CODICE PER RICHIAMARLO:

<div id="box-esterno">
<div id="box-interno">
Testo di prova per riempire il box...
</div>
</div>

POSIZIONARE I BOX MODEL

proprietà dei fogli di style dal nome position che permette di posizionare il box in modo diverso da quello naturale.Gli attributi ammessi per la proprietà position sono: static, relative, absolute e fixed.
Notate come i blocchi inseriti nella pagina seguendo il flusso naturale del codice disponendosi verticalmente pur non avendo inserito alcun ritorno a capo e questo perchè il tag <div> come tutti gli elementi di blocco provoca automaticamente un ritorno a capo.

Non avendo impostato alcun margin i bordi risultano incollati fra loro. L'esempio sotto è lo stesso box con margin impostato a 5 pixel. Ricordate quanto detto nella lezione precedente riguardo al box model? si fa riferimento al box interno per cui i 5 pixel che distanziano i vari box sono 3 pixel più 2 pixel esterni che fanno da bordo.

#box1 {
width: 400px;
height: 20px;
border: solid 1px; attributo che identifica il tipo= SOLID
margin: 5px;
color: black;
background-color: #ffff99;
}

IMPOSTO COSì #box2 #box3 VARIANDO IL COLORE. SENZA MARGIN SAREBBERO ATTACCATI

Quando il contenuto del box supera le sue dimensioni, per esempio inserendo un'immagine più larga, si hanno comportamenti differenti a seconda del tipo di browser, tanto per cambiare ognuno di questi interpreta a modo suo. Alcuni allargano il box per adattarlo alla dimensione del suo contenuto, altri fanno uscire l'immagine dal box.

E' possibile regolare questo comportamento al fine di unificarlo su tutti i browser grazie alla proprietà overflow che accetta i seguenti possibili attributi: visible predefinito, hidden nascosto, auto appaiono le barre di scorrimento soltanto se necessario, scroll appaiono le barre di scorrimento sempre anche se non necessitano.

il Box Liquido.

box liquido che consentirà al box di adattarsi alla pagina ridimensionandosi automaticamente, proprio come fosse un liquido versato in un recipiente, da qui il nome box liquido.

Dovendo centrare un box abbiamo visto che è sufficiente impostare il valore auto alla proprietà margin