Hvordan bruke CSS til Layout Sider

Hvordan bruke CSS til Layout Sider


Legging ut en webside med CSS er ekstremt vanskelig oppgave, og brukerne må være dyktige på HTML før du implementerer, men det er nødvendig å holde websiden ser stilig og up-to-date. HTML er ment å brukes til å lage selve innholdet som skal brukes på sidene, og CSS brukes til å sette elementene på siden på en måte som er visuelt tiltalende for publikum.

Bruksanvisning

1 Lag en CSS-dokument på websiden utviklingsprogrammet for ditt valg. Hvis du bruker et program som Adobe Dreamweaver, har dokumentet allerede vært setup på programmet. Hvis du bruker en litt mindre avansert program, kan du gjøre dokumentet i en CSS-fil ved å lagre filen med et "CSS" forlengelse på slutten av navnet på dokumentet.

2 Lag en erklæring signaliserer du skal bruke HTML som språk. Dette brukes slik at leseren vet hvordan å lese og tolke den trykte teksten. Den grunnleggende erklæringen er "<DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN "

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ".

3 Lagre CSS dokument med et navn du vil kjenne igjen. Du må koble CSS dokumentet til HTML-dokumentet med en eneste linje med kode.

4 Åpne websiden du ønsker å redigere. Du trenger tilgang til koden på siden, så åpne HTML-versjon av den. Dette kan gjøres ved å åpne siden med HTML-redigering program av ditt valg.

5 Type "<link rel =" stylesheet "type =" text / css "href =" NAME.CSS "/>" inn i "<head>" og "<body>" tags på websiden. Bytt ut "NAME.CSS" med navnet på din CSS-fil. De to filene er nå koblet sammen, og du kan layout på siden med CSS.

6 Bruk riktige strukturelle koder når du legger ut på siden din. Kode i "<head>" tag bør bare brukes for innhold på toppen av området, typisk en header eller banner med navigasjonsmuligheter. Mens, vil nesten all annen kode for å legge ut på siden bli plassert i "<body>" tag.

7 Skriv inn forkortelsen for et element laget i HTML-dokumentet, etterfulgt av en "{" for å begynne å gjøre endringer i et element på siden. Når du er ferdig med å redigere et bestemt element, stedet en "}" for å slutte å gjøre endringer i den.

8 Rediger avstands alternativer med "bokstav-avstand", "word-avstand", "line-height", og "text-align" verdier. Å få riktig avstand, spesielt for teksten på siden, er avgjørende for å skape et positivt estetisk utseende på siden. For å bruke disse verdiene, legger et kolon, en tallverdi og et semikolon på slutten av noen av verdiene.

9 Modifisere polstring av et element, for eksempel et bord. Ekstra polstring kan brukes til å lage ekstra plass mellom objekter uten å redigere linjeavstand på hele siden. For å endre polstring av et element, kan du bruke "padding" verdi etterfulgt av et kolon, en tallverdi og et semikolon å betegne slutten av verdien.

10 Endre tykkelsen på grensen til tabellene. Den "border-width" verdi bestemmer tykkelsen av grensen. Type "border-width", etterfulgt av et kolon, til en numerisk verdi, og semikolon full verdien. Det er vanligvis betraktet som god praksis å bare øke bredden grensen av prosenter. For eksempel plassere 150 prosent eller 200 prosent som den numeriske verdien i stedet for 12 px. Dette hjelper siden skalaen til vedtak i ulike størrelser.