CSS Bokser Tutorial
Hvis du utformer et nettsted som inneholder CSS i koden, må du vite om boksen modell som CSS bruker. Hvert element i en nettside regnes som en boks av et eller annet slag, og CSS lar deg endre utseendet og konfigurasjon av boksene på måter som vanlig HTML ikke kan matche. Ved hjelp av CSS til å redigere nettstedets bokser, kan du helt endre utseendet og selv utformingen av området ved bare å endre noen små deler av selve koden.
Bruksanvisning
1 Opprett et nytt, tomt HTML-dokument i et tekstbehandlingsprogram, for eksempel Notisblokk.
2 Angi standard koder som trengs for et HTML-dokument inn i dokumentet. Dette er HTML hode og kropp koder, og i riktig rekkefølge de bør se slik ut: <html> <head> </ head> <body> </ body> </ html>.
3 Legg et antall blanke linjer mellom body-kodene. Dette er hvor du vil plassere koden for testboksen.
4 Lag en boks med tekst i det ved å legge følgende kode:
<Div> test tekst </ div>
Du kan erstatte "test tekst" med alt du vil. Hvis du åpner HTML-dokument i en leser nå, vil du se teksten i boksen, men selve boksen vil være usynlig.
5 Legg til følgende kode:
style = ""
i åpningen div tag, mellom div og den avsluttende brakett. Det skal se slik ut:
<Div style = ""> test tekst </ div>
Denne stilen attributtet lar deg sette inn CSS-koden i HTML div tag til å påvirke boksen. Resten av koden du vil legge bør gå i mellom anførselstegn.
6 Legg til følgende kode:
background-color: gul
til stilen attributtet. Dette endrer bakgrunnsfargen på boksen, så hvis du åpner dokumentet nå, vil du se testen tekst i en gul boks.
7 Legg til et semikolon etter din fargekode og legg til koden
border: solid
til stilen. Dette legger et solid svart ramme rundt boksen, noe som gjør det litt større. CSS boks grenser alltid gå på utsiden av sine bokser. Du kan også legge til et mellomrom etter ordet "solid" og inkluderer en bredde måling, slik som 5px, eller et fargenavn, eller begge, for å endre utseendet på grensen.
8 Legg til et semikolon etter at grensen kode og legge til koden
padding: 5px
til stilen. En boks er padding er usynlig mellomrom mellom kantene på boksen og det faktiske innholdet i boksen. Gjør padding størrelse større vil gjøre selve boksen større, så det har å romme mer tom plass på innsiden av det rundt teksten.
9 Legg til et semikolon etter padding kode og legge til koden
margin: 20px
til stilen. Marginen er lik padding, men mens padding er tomrom inne i boksen, er marginen tomrom rundt boksen. Jo større margin, jo lenger vekk fra alt rundt det boksen vil få.
10 Eksperimenter med forskjellige tall i dine grense, padding og margin koder for å se hvordan de påvirker helhetsinntrykket av boksen. Hver boks du redigere med CSS har disse tre komponenter samt selve innholdet automatisk, men hvis du ikke definerer sin opptreden i koden, de har en størrelse på null og vil være usynlig.