Slik formaterer websider ved hjelp av CSS

April 10

Cascading Style Sheets, eller CSS, beskrive presentasjon og layout elementer av websider. Du kan definere noen av hundrevis av ulike regler i din CSS-filer, inkludert skriftformatering, utseende, farger og element mellomrom. Du kan også opprette og bruke dine egne klasser og ID-velgere for ekstra programmering frihet. Du bruker CSS-filer ved å referere til dem i HTML-sider. Selv om du kan finne det smertefullt å endre hele området når du legger CSS til det, i det lange løp vil det gjøre å endre hele området raskt og enkelt.

Bruksanvisning

1 Åpne en tom tekstfil og lagre den i rotkatalogen for ditt nettsted filer. Bruk "Css" forlengelse, og gi den et navn, for eksempel "myStyleSheet.css."

2 Lag typen velgere ved å bruke eksisterende HTML-elementer og angi formateringen. For eksempel:

p {

margin: 4px 0px;

text-align: left;

}

Kall dette elementet i HTML-filer ved å skrive "<p>" og skrive inn tekst, og deretter lukke tag med "</ p>".

3 Lag klassen velgere med dot operatør (det "." -symbolet). For eksempel:

.innhold {

height: 50px;

font-size: 12px;

}

Ring denne klassen i HTML-filer ved å skrive "<p class =" content ">" og skrive inn tekst, og deretter lukke klassen ved å skrive "</ p>". Når du kaller "innhold" class i HTML-filer, vil noe i det elementet har disse formaterings reglene anvendes. Hvis du har en "p" type velger samt denne klassen, klassereglene overstyre typevelgeren regler når det brukes med en "p" element i HTML.

4 Lag ID-velgere som bruker hasj (den "#" symbol). For eksempel:

navigasjonsfelt {

width: 900px;

height: 25px;

margin: 15px 0px;

padding: 0px;

}

Kall dette ID i HTML-filer ved å skrive "<div id =" navigationBar ">" og skrive inn tekst, og deretter lukke det ved å skrive "</ div>." Du bør ikke bruke ID-velgere mer enn én gang på HTML-sider. Hvis du bruker dem mer enn en gang for ulike deler av siden, kan du opprette en ID konflikt og se uventet formatering som du er nødt til å korrigere. I dette eksemplet, har du sannsynligvis ikke vil ha mer enn en navigasjonsfeltet per HTML-fil.

5 Lagre og lukk din CSS-fil, og deretter laste den opp til serveren din. Åpne hver av HTML-sider og omfatter følgende linje i "<head>" i hvert dokument:

Kontroller at du bruker riktig bane til CSS-filen i hvert dokument. Lagre HTML-dokumenter, lukke dem og laste dem opp til serveren din.

Hint

Hvis du har flere regler med de samme erklæringer, kan du bruke en linje for å definere dem alle. For eksempel, hvis du vil at den "h1" og "h2" tags å bruke samme font familien, skriv "h1, h2 {font-family: FONT_NAME;}"