Hvordan bruke CSS til å lage en webside Layout
Når du har mestret HTML, er neste steg å lære CSS. CSS, eller Cascading Style Sheet, er et skriptspråk som fjerner byrden av stil og layout fra HTML. Når du bruker CSS, kan du endre din design uten å endre innholdet. Dette er en klar fordel over HTML-bare design, noe som åpner for mer fleksibel webutvikling. I CSS 2, er nye layout alternativer inkludert, slik at designere til å bevege seg bort fra HTML design. CSS bruker terminologi som ligner på HTML og har standarder i henhold til World Wide Web Consortium (W3C).
Bruksanvisning
1 Link til CSS-fil. På basismappe, sette inn følgende kode etter titler, men før / head taggen.
<Link rel = "stylesheet" href = "stylesheet.css" type = "text / css" />
Dette forteller nettleseren hvor du finner CSS-filen.
2 Lag delene i HTML-filen. For CSS til å gjelde for HTML-filen, må du koble filer sammen og legge de aktuelle delene, og IDer. I HTML-filen du vil bruke DIV-koder. Disse kodene skape avsnittene i dokumentet. En nettleser vil ikke anerkjenne dem individuelt, men når kombinert med CSS koder som ID, vil nettleseren koble dem med CSS-fil og bruke oppsettet.
På grunnleggende filen på nytt, setter div koder rundt hver del. Denne filen vil ha tre åpenbare deler: en header, en meny og hovedinnholdet. Gi hver av DIV tags en ID med følgende syntaks: <div id = "header"> </ div>.
3 Opprett en ny fil i en teksteditor. Name it stylesheet.css og lagre den i samme mappe som HTML-fil. Det er der du vil sette CSS-koden. Hvert element følger samme syntaks:
Selector (hvis noen) Navn {stil: type;}
HTML-filen inneholder to typer av elementer vi kan velge å style: koder, som ikke har noen velger, og IDer, som bruker # for å betegne seg selv i en CSS-fil.
Style en tag ved å skrive:
body {stil: type;}
Style en ID type ved å skrive:
header {stil: type;}
4 Skriv ut CSS-koden for å lage din layout. En enkel layout for en nettside ville være en bakgrunnsfarge, en header, med sin egen farge, og to kolonner, en for menyen og en for innholdet.
Åpne fargevelgeren. Velg fargen du vil bruke på bakgrunnen og merk den hex-kode. En hex kode er en # symbol med en sekssifret nummer. Svart ville være # 000000 fordi det har ingen farge. Hvit ville være #FFFFFF fordi det er alle farger. Andre farger vil være en kombinasjon av tall og bokstaver AF.
body {background: # 000000;}
Bakgrunnen stil lar deg velge en farge for bakgrunnen. Legg noen flere stiler å gjelde for alt i kroppen tag.
body {background: # 000000; color: # ff0000; margin: 0; padding: 0; font-size: 12px;}
Farge betegner fargen på teksten, i dette tilfelle røde, i kroppen koder. Ved å nullstille margin og padding sørger vi for at siden vil strekke til å passe i nettleservinduet. Font-size vil gjøre alle ikke-ledetekst 12 piksler i høyden.
5 Style IDer i html-fil. Først layout hver ID slik at du har klart bilde av hva du trenger.
header {} menyen {} hoved {}
Det spiller ingen rolle hvilken rekkefølge du putter elementene i filen. Vi ønsker overskriften til å strekke over siden og har en hvit bakgrunn med blå tekst.
header {width: 100%; bakgrunn: #ffffff; color: # 006699; text-align: center;}
Bredden stil gir div bredde og ved å bruke en prosent, vil vi tillate siden for å krympe og vokse med størrelsen på nettleseren. Den text-align stil lar deg velge justeringen av teksten i div, i dette tilfellet sentrum. Nå ønsker vi menyen til høyre og hoved på venstre side.
Menyen {position: relative; float: right; bredde: 160 piksler;} hoved {position: relative; float: left; width: 400px;}
Stillingen stil gir leserens instruksjoner for å tillate div å flyte på en bestemt måte. Ved å gjøre den relative skal posisjonen ta hensyn til divs over og under det i HTML-filen. Dette vil holde flyteelementene fra dekker spissen. Float tillater element å bevege seg i den retningen du angir.
6 Lagre filen. Du kan vise HTML-filen i en nettleser, og det vil ringe til din CSS-fil og vise deg oppsettet.
Hint
- Du kan bruke CSS for hver tag i HTML-filen. Det er mange flere stiler tilgjengelig for CSS.
- CSS fungerer ikke på samme måte i alle nettlesere. Du må kanskje redigere CSS-filen til å arbeide i ulike nettlesere.