Hvordan lage en CSS Web Site

March 21

Opprette en CSS nettside lar designer til å lage layout, farger og fonter for et nettsted. Designeren kan endre disse funksjonene uten å endre websiden innholdet når som helst. CSS er lagret i en egen CSS-fil eller i HTML-filen for deg nettsted. Lagring av CSS i sin egen CSS-fil gir mulighet for enkel bytting av filer hvis designeren bestemmer endre oppsettet på et senere tidspunkt. Akkurat som HTML, CSS opprettet i en tekst editor.

Bruksanvisning

1 Åpne din tekst editor. Opprett en ny fil ved å klikke på "File", deretter "Ny". Lagre filen som index.html. Dette vil være din viktigste nettside fil.

2 Opprett en ny fil ved å bruke den samme fremgangsmåten ovenfor. Lagre filen som style.css dette vil være din CSS-fil.

3 Legg den grunnleggende web HTML til nettstedet. Dette er HTML som noensinne nettside trenger så leseren gjenkjenner den som en web-side. For eksempel:

<Html>

<Head>

</ Head>

<Body>

</ Body>

</ Html>

4 Legg innholdet på nettsiden din. Omgi innholdet med DIV-koder. Dette vil være mellom BODY-kodene. For eksempel vil en artikkel har tittelen og flere avsnitt med tekst:

<Html>

<Head>

</ Head>

<Body>

<Div>

<H1> Min Artikkel </ h1>

<P> Dette er et avsnitt. </ P>

<P> Dette er også et avsnitt. </ P>

</ Div>

</ Body>

</ Html>

5 Gi DIV tag en ID. Dette vil fortelle leseren at det er behov for å se på CSS-fil for at ID og bruke stiler for at ID. For eksempel:

Navnet på ID kan være alt du vil, så lenge det ikke er noen mellomrom.

6 Link CSS-filen ved å bruke i LINK tag mellom hodet koder.

Elementene i LINK tag fortelle leseren at det er på utkikk etter et stilark, navnet på stilarket, type kode i stilarket og hva stilark er for, som i dette tilfellet er for dataskjermen . Lagre HTML-fil.

7 Lag CSS layout og farger i CSS-filen. CSS krever at du definerer elementet og egenskapene for det elementet. For denne siden, vil vi endre fargen på bakgrunnen, sentrere siden og stil artikkelen. CSS kan style HTML koder, IDer og klasser. I eksempelet har vi flere koder, BODY, H1 og P. Vi har også en ID, artikkelen. Først layout disse elementene i CSS-filen. For eksempel:

kropp {}

Artikkelen {}

h1 {}

p {}

ID er definert i CSS-filen med # mark. Tagger er oppført uten <>.

8 Legg eiendommer å style CSS elementer. Det er mange måter å gjøre dette. For eksempel:

kropp {

bakgrunn: # ff0000;

color: # 000000;

marg: 0;

padding: 0;

font: Times 12px;}

For kroppen, er bakgrunnen satt til rød bruke hex-kode for rødt. Du kan få andre hex-koder ved hjelp av en fargevelger. Fargen eiendom komplekser tekstfargen til svart. Marginer og padding er satt til null slik at det dekker hele nettleservinduet. Font setter skriften og størrelsen på skriften for hele nettsiden.

artikkelen {

width: 1000px;

margin: auto 0;

padding: 15px;

bakgrunn: #ffffff;

border: 3px solid # 000000;}

I artikkelen ID, har vi satt bredden til 1000 piksler og marginene til auto 0 slik at nettleseren vil automatisk sentrere artikkelen. Polstringen flytter teksten bort fra kanten av boksen med 15 piksler. Bakgrunnen er satt til hvit, og det er en grense rundt boksen som er svart, en heltrukken linje og 3 piksler i bredde.

h1 {

color: # 0000ff;

text-align: center;

}

Overskriften er satt til blå med fargen eiendom og sentrert i artikkelen boksen. I avsnittene har allerede hatt farge, størrelse og font definert i kroppen element. Men du kan style P tags videre:

p {

line-height: 130%;

}

Linje høyde skiller teksten ved å sette mer plass mellom linjene. Dette gjør teksten lettere å lese.

9 Lagre CSS-fil.