November 19
Il modello di sicurezza permette agli sviluppatori di creare siti web in cui l'area occupata da elementi HTML è ben definito. Ogni elemento in un documento HTML può avere CSS (Cascading Style Sheet) beni dichiarati, determinando larghezza, altezza, padding, margini e confini. Il codice HTML di una pagina web impone il contenuto e la struttura della pagina, come testo e immagini, mentre il CSS determina come la pagina deve essere presentata entro il browser dell'utente. Sia HTML e CSS utilizzano il modello di sicurezza per implementare i layout del sito web.
1 Crea la tua pagina HTML. Aprire un nuovo file in un editor di testo e salvarlo "page.html" o qualsiasi altro nome a piacere fino a quando si utilizza ".html" come estensione. Inserire il seguente schema:
<Html>
<Head>
<Link rel = "stylesheet" type = "text / css" href = "pagestyle.css" />
</ Head>
<Body>
<Div id = "content">
<Div class = "style1"> Ecco alcuni contenuti </ div>
<Div class = "style2"> Qui è più contenuto </ div>
</ Div>
</ Body>
</ Html>
La sezione di corpo può includere qualsiasi contenuto hai bisogno sulla tua pagina, questo semplice esempio è solo per la dimostrazione.
2 Creare il documento CSS. Aprire un nuovo file in un editor di testo e salvarlo con il nome di "pagestyle.css" per corrispondere l'attributo "href" nella sezione head HTML. Inserire il seguente codice:
contenuto {
background-color: # FFFF00;}
div.style1 {
width: 100px;
altezza: 100px;
background-color: # FF0000;}
div.style1 {
width: 200px;
height: 200px;
background-color: # 0000FF;}
I colori dello sfondo sono inclusi in modo che si può vedere a colpo d'occhio quali parti della pagina sono occupati dagli elementi. Salvare il file nella stessa directory come pagina HTML e aprire la pagina in un browser Web. Si dovrebbe vedere gli elementi visualizzati con colori di sfondo.
3 Aggiungere imbottitura per gli elementi. Aggiungere la proprietà padding alle dichiarazioni CSS per ciascuna delle due classi di elemento "div" nella vostra pagina come segue:
div.style1 {
width: 100px;
altezza: 100px;
background-color: # FF0000;
padding: 10%;}
div.style1 {
width: 200px;
height: 200px;
background-color: # 0000FF;
padding: 5px 10px 15px 20px;}
Il primo stile ha la stessa quantità di imbottitura su ciascuno dei quattro lati, rappresentata come percentuale della larghezza dell'elemento. Il secondo stile utilizza una misura fissa in pixel e ha un diverso valore ogni lato, a partire dalla parte superiore e si spostano in senso orario. Salvare il file CSS e aggiornare la pagina nel browser per vedere la differenza.
4 Aggiungere bordi alle elementi. Aggiungere una proprietà di confine per le dichiarazioni CSS come segue:
div.style1 {
width: 100px;
altezza: 100px;
background-color: # FF0000;
padding: 10%;
border: 1px solid # 00FF00;}
div.style1 {
width: 200px;
height: 200px;
background-color: # 0000FF;
padding: 5px 10px 15px 20px;
border: 5px doppio # 000000;}
Ci sono molte impostazioni diverse per i bordi in formato HTML. Salvare il file CSS e aggiornare la pagina nel browser per vedere il bordo appare attorno ad ogni elemento. Il confine siede fuori l'elemento e la sua imbottitura.
5 Aggiungere i margini per gli elementi. Aggiungere proprietà dei margini per le regole CSS nel modo seguente:
div.style1 {
width: 100px;
altezza: 100px;
background-color: # FF0000;
padding: 10%;
border: 1px solid # 00FF00;
margin: 5%;}
div.style1 {
width: 200px;
height: 200px;
background-color: # 0000FF;
padding: 5px 10px 15px 20px;
border: 5px doppio # 000000;
margin: 5px 10px;}
Il primo stile utilizza la stessa larghezza di margine su ciascun lato, ma il secondo stile utilizza due larghezze differenti. Quando due valori vengono forniti, il primo dettami larghezza del margine per la parte superiore e inferiore dell'elemento, il secondo per i lati sinistro e destro. Salvare il file e visualizzare la pagina nel browser. Dovreste vedere le lacune mostrate al di fuori del confine di ogni elemento.