Nwlapcug.com


Tutorial per HTML & CSS Box Model

Tutorial per HTML & CSS Box Model


Il modello Box consente agli sviluppatori di creare siti Web in cui l'area occupata dagli elementi HTML è ben definito. Ogni elemento in un documento HTML può avere proprietà CSS (Cascading Style Sheet) dichiarate, determinare la larghezza, altezza, imbottitura, margini e bordi. Il codice HTML per una pagina Web determina i contenuti e la struttura della pagina, quali testo e immagini, mentre il CSS determina come la pagina dovrebbe essere presentato entro il browser dell'utente. HTML e CSS è possibile utilizzare il modello a scatola per implementare layout sito Web.

Istruzioni

1

Crea la tua pagina HTML. Aprire un nuovo file in un editor di testo e salvarlo in "pagina" o qualsiasi altro nome che ti piace, purché si utilizza ". html" come l'estensione. Inserire il seguente schema:

< html >

< head >

< link rel = "stylesheet" type = "text/css" href="pagestyle.css" / >

< / head >

< corpo >

< div id = "contenuto" >

< div class = "style1" > Ecco alcuni contenuti < / div >

< div class = "style2" > qui è più contenuto < / div >

< / div >

< / body >

< / html >

La sezione corpo può includere contenuto hai bisogno sulla tua pagina, questo semplice esempio è solo per dimostrazione.

2

Creare il documento CSS. Aprire un nuovo file in un editor di testo e salvarlo con il nome "pagestyle.css" per abbinare l'attributo "href" nella vostra sezione di testa di HTML. Immettere il seguente codice:

contenuto () {

background-color: #FFFF00;}

div.style1 () {

Larghezza: 100px;

Height: 100px;

background-color: #FF0000;}

div.style1 () {

Larghezza: 200px;

Height: 200px;

background-color: #0000FF;}

I colori di sfondo sono inclusi, in modo che si può vedere in un colpo d'occhio quali parti della pagina sono occupati dagli elementi. Salvare il file nella stessa directory della pagina HTML e aprire la pagina in un browser Web. Si dovrebbero vedere gli elementi visualizzati con colori di sfondo.

3

Aggiungere spaziatura interna agli elementi. Aggiungere la proprietà padding le dichiarazioni CSS per ciascuna delle due classi dell'elemento "div" nella tua pagina come segue:

div.style1 () {

Larghezza: 100px;

Height: 100px;

background-color: #FF0000;

Imbottitura: 10%;}

div.style1 () {

Larghezza: 200px;

Height: 200px;

background-color: #0000FF;

padding: 5px 10px 20px 15px;}

Il primo stile è la stessa quantità di riempimento su ciascuno dei suoi quattro lati, rappresentate come una percentuale della larghezza dell'elemento. Il secondo stile utilizza una misura fissa in pixel e ha importi diversi per ogni lato, a partire con la parte superiore e muoversi in senso orario. Salvare il file CSS e aggiornare la pagina nel browser per vedere la differenza.

4

Aggiungere bordi agli elementi. Aggiungere una proprietà di bordo per le dichiarazioni CSS come segue:

div.style1 () {

Larghezza: 100px;

Height: 100px;

background-color: #FF0000;

Imbottitura: 10%;

border: 1px solid #00FF00;}

div.style1 () {

Larghezza: 200px;

Height: 200px;

background-color: #0000FF;

padding: 5px 10px 15px 20px;

border: 5px double #000000;}

Ci sono molte diverse impostazioni per i bordi in HTML. Salvare il file CSS e aggiornare la pagina nel browser per visualizzare il bordo attorno a ogni elemento. Il confine si trova fuori dell'elemento e la sua imbottitura.

5

Aggiungere margini agli elementi. Aggiungere la proprietà margin alle regole CSS come segue:

div.style1 () {

Larghezza: 100px;

Height: 100px;

background-color: #FF0000;

Imbottitura: 10%;

border: 1px solid #00FF00;

margine: 5%;}

div.style1 () {

Larghezza: 200px;

Height: 200px;

background-color: #0000FF;

padding: 5px 10px 15px 20px;

border: 5px double #000000;

margin: 5px 10px;}

Il primo stile utilizza la stessa larghezza del margine su ogni lato, ma il secondo stile utilizza due diverse larghezze. Quando due valori vengono forniti, il primo detta la larghezza del margine per la parte superiore e inferiore dell'elemento, il secondo per i lati destro e sinistro. Salvare il file e visualizzare la pagina nel browser. Si dovrebbero vedere le lacune visualizzate all'esterno del bordo di ogni elemento.

Consigli & Avvertenze

  • Utilizzando colori di sfondo è particolarmente utile durante lo sviluppo di una pagina. Se non si desidera vengano visualizzati in modo permanente è possibile rimuoverli una volta che i layout sono stati creati.
  • Non si sviluppano in un browser Web e fermare una volta che la pagina viene visualizzata nel modo desiderato per. Quasi certamente verrà visualizzato in modo diverso in altri browser, così test è vitale.