Tutorial for HTML og CSS Box Model
The Box Model tillater utviklere å lage nettsteder som området okkupert av HTML-elementer er godt definert. Hvert element i et HTML-dokument kan ha CSS (Cascading Style Sheet) egenskaper deklarert, bestemme bredde, høyde, padding, marginer og grenser. HTML for en webside dikterer innholdet og strukturen på siden, for eksempel tekst og bilder, mens CSS avgjør hvordan siden skal presenteres i brukerens nettleser. Både HTML og CSS bruke Box Model for å implementere nettstedet oppsett.
Bruksanvisning
1 Lag din HTML-side. Åpne en ny fil i en tekst editor og lagre den "/side.html" eller et annet navn du liker så lenge du bruker ".html" som forlengelse. Sett inn følgende disposisjon:
<Html>
<Head>
<Link rel = "stylesheet" type = "text / css" href = "pagestyle.css" />
</ Head>
<Body>
<Div id = "innhold">
<Div class = "style1"> Her er noe av innholdet </ div>
<Div class = "style2"> Her er mer innhold </ div>
</ Div>
</ Body>
</ Html>
Kroppen delen kan omfatte alt innhold du trenger på siden din, er dette enkelt eksempel bare for demonstrasjon.
2 Lag din CSS-dokument. Åpne en ny fil i et tekstredigeringsprogram og lagre det med navnet "pagestyle.css" for å matche "href" attributt i HTML hodet delen. Skriv inn følgende kode:
innhold {
background-color: # FFFF00;}
div.style1 {
width: 100px;
height: 100px;
background-color: # FF0000;}
div.style1 {
width: 200px;
height: 200px;
background-color: # 0000FF;}
Bakgrunnsfarger er inkludert, slik at du kan med et øyekast se hvilke deler av siden er opptatt av elementene. Lagre filen i samme katalog som HTML-side og åpne siden i en nettleser. Du bør se elementene som vises med bakgrunnsfarger.
3 Legg padding til dine elementer. Legg padding egenskapen til CSS-erklæringer for hver av de to klassene av "div" element på siden din som følger:
div.style1 {
width: 100px;
height: 100px;
background-color: # FF0000;
padding: 10%;}
div.style1 {
width: 200px;
height: 200px;
background-color: # 0000FF;
padding: 5px 10px 15px 20px;}
Den første type har samme mengde av polstring på hver av sine fire sider, representert som en prosentandel av elementet bredde. Den andre stilen bruker en fast måling i piksler, og har ulik mengde for hver side, og starter med den øverste og beveger seg rundt i klokkens retning. Lagre CSS-filen og oppdatere siden i nettleseren din for å se forskjellen.
4 Legg til rammer på de elementene. Legg til en ramme eiendom til CSS erklæringer som følger:
div.style1 {
width: 100px;
height: 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 dobbel # 000000;}
Det er mange forskjellige innstillinger for kantlinjer i HTML. Lagre CSS-filen og oppdatere siden i nettleseren for å se grensen rundt hvert element. Grensen ligger utenfor elementet og dens polstring.
5 Legg marginer til dine elementer. Legg margin egenskapene til dine CSS-regler som følger:
div.style1 {
width: 100px;
height: 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 dobbel # 000000;
margin: 5px 10px;}
Den første stilen bruker den samme bredden på margin på hver side, men den andre stilen bruker to forskjellige bredder. Når to verdier er angitt, den første dikterer margbredde for toppen og bunnen av elementet, den andre for venstre og høyre side. Lagre filen og vise siden i nettleseren. Du skal kunne se hullene vises utenfor grensen av hvert element.
Hint
- Bruke bakgrunnsfarger er spesielt nyttig når du utvikler en side. Hvis du ikke vil ha dem vises permanent kan du fjerne dem når layoutene er opprettet.
- Ikke utvikle seg i en nettleser, og stoppe når siden din ser ut slik du vil ha det til. Det vil nesten helt sikkert se annerledes ut i andre nettlesere, slik testing er viktig.