Hvordan lenke 2 websider til Same Style Sheet

Hvordan lenke 2 websider til Same Style Sheet


Utviklere kan bruke Cascading Style Sheet erklæringer skal gjelde samme styling til flere sider på et nettsted. Denne funksjonen er en av de mest nyttige aspekter av CSS, som du kan definere alle stil dine egenskaper innen en enkelt fil og tvinge disse på tvers av alle sidene på et nettsted. Linking til en enkelt CSS-fil fra mer enn én side er ikke vanskelig, krever bare en liten mengde av HTML markup-koden. De fleste store nettsteder bruker et sett med CSS ark eller en enkelt CSS ark til å diktere stil for alle sine HTML-sider.

Bruksanvisning

1 Forbered CSS-kode. Åpne en ny fil i et tekstredigeringsprogram, lagre den med "Css" forlengelse, for eksempel "sitestyle.css" eller et annet navn som gjenspeiler formålet av innholdet. Skriv inn noen grunnleggende CSS erklæringer som følger:

header {

font-weight: bold;

font-size: large;}

innhold {

color: # 660000;}

Dette er bare et utvalg av kode for demonstrasjon, men du kan bruke hva CSS erklæringer du vil.

2 Forbered websidene. Hvis du ikke allerede har HTML-sider klart, lage dem etter tur ved å åpne en ny fil i et tekstredigeringsprogram og lagre det med ".html" forlengelse, for eksempel "contact.html" og "faq.html." Skriv inn HTML-kode kode skape grunnleggende innholdet av en webside som følger:

<Html>

<Head>

</ Head>

<Body>

<Div id = "header"> Website Header </ div>

<Div id = "innhold"> Side innhold </ div>

</ Body>

</ Html>

Kopier dette innholdet i begge dine nettsider. Hvis du allerede har sider med HTML i dem, må du ha innhold som er reflektert i dine CSS erklæringer. I tilfellet med dette eksempel, vil dette omfatte elementer med "topp" og "innhold" som ID-attributter.

3 Legg til din stilark i HTML markup-koden. Inkluder en kobling som følger, mellom åpning og lukking hodet kodene i HTML:

<Link rel = "stylesheet" type = "text / css" href = "sitestyle.css" />

Endre "href" attributt for å gjenspeile navnet du velger for din CSS fil. Ta med link i hodet delen av hver side som du ønsker å bruke stilark. Denne syntaksen fungerer hvis HTML-sider er i samme katalog som CSS-filen. Du kan alternativt inkludere en relativ referanse, for eksempel der CSS-filen er i en underkatalog som heter "style" lagret i samme mappe som websiden:

<Link rel = "stylesheet" type = "text / css" href = "stil / sitestyle.css" />

4 Bruk absolutte referanser for CSS koblinger. Hvis CSS og HTML-filer lagres på forskjellige servere, må du bruke en absolutt referanse i stedet for en slektning en. Følgende eksempel koblingen kobler en webside til en CSS-fil på et annet domene:

<Link rel = "stylesheet" type = "text / css" href = "http://otherdomain.com/style.css" />

Endre "href" attributt for å reflektere den fullstendige banen til CSS-filen hvis den ikke blir lagret på samme domene som websider.

5 Last opp alle filene dine. Last opp dine HTML og CSS-filer til webserveren. Bla til plasseringen av hver av websidene dine, og kontroller at CSS erklæringer blir håndhevet gjennom elementene på begge sider. Hvis stilen ikke blir reflektert riktig, sjekk "href" attributter igjen, og sørg for at du har tatt den riktige filen banen. På dette punktet, kan du gjøre endringer i CSS og vil se disse endringene på alle html sider som er lenket til Cascading Style Sheet.

Hint

  • Ved å bruke samme ID og klasse attributter innenfor alle sider på nettstedet ditt kan du style dem alle i en enkelt CSS-fil.