Slik kobler du ekstern CSS til en side - dummier

Hvis du vil koble en HTML-side til et eksternt Cascading Style Sheet (CSS), legger du bare inn en enkelt linje med koden i hodet på siden din som refererer til navn og plassering av den eksterne CSS-filen i forhold til rotenivået til serveren der nettstedet ligger.

Kodelinjen for lenken må plasseres et sted mellom åpnings- og lukkekoder på hver HTML-side på nettstedet ditt som du vil bli stylet med.

Når filnavnet til CSS er angitt nøyaktig i HTML-filen ved hjelp av riktig koblingssyntax, gir koblingskoden instruksjoner til nettleseren om hvordan CSS-stilinformasjonen skal tolkes og brukes på siden, som igjen bestemmer hvordan siden vises i nettleseren.

Her er et eksempel på en kobling til en ekstern CSS-fil med hovednavnet for filnavnet. css, hvor filen som hentes, bruker href-attributtet til koblingsmerket, som er et unclosed tag i HTML:

Når lenskoden er lagt til på en XHTML-side, må koden lukkes ved å legge til et ekstra mellomrom og fremoverstreke før slutten:

De andre attributene i taggen i tillegg til href er Kreves for å hjelpe nettleseren til å tolke dataene på den koblede CSS-filen:

• Rel-attributten angir forholdet mellom det opprinnelige dokumentet og den koblede filen, og den identifiserer den lenke filen som et stilark.

• Typeattributtet spesifiserer typen stilsspråk som brukes i den koblede filen, som i dette tilfellet identifiserer at den lenke filen er skrevet i "text / css" format.

For å sikre konsistens, prøv å plassere CSS-lenken på websidene dine på samme sted innenfor koden fra side til side. For eksempel kan du legge til koblingsmerket direkte etter det siste metatagget, eller plassere det rett over lukkekoden. Å være konsistent kan hjelpe deg med å raskt finne taggen hvis du noen gang trenger å endre den.

I tillegg til plasseringen av lenken i HTML-sidene som bruker den eksterne CSS-filen, bør du også være oppmerksom på hvor CSS-filene er plassert i forhold til de andre filene på nettstedet.

Ofte har hvert nettsted bare en CSS-fil, og den filen sitter på rotnivået, noe som bare er en fin måte å si at CSS-filen ligger på samme sted som indeksen. html-fil, som er hjemmesiden for nettstedet ditt.

Rotenivået refererer til første etasje på nettstedet ditt, enten det er en lokal kopi av nettstedet ditt som sitter på datamaskinen foran deg eller en kopi av nettstedet som er plassert på den eksterne vertsserveren. Med de fleste nettsteder sitter hjemmesiden på rotnivå sammen med en bildemappe og alle de andre hovedsidene på nettstedet.

For større nettsteder lager enkelte designere undermapper på rotnivå for å huse andre ting som eksterne JavaScript- og jQuery-filer, eksterne CSS-filer, CGI-skript eller grupper av sider som faller inn i en lignende kategori (for eksempel alle sider relatert til selskapets produkter eller tjenester).

Hvis nettstedet ditt krever to eller flere Cascading Style Sheets (kanskje en for alle sidene og et sekund for en håndfull sider som skal skrives ut), kan det være gunstig for deg å lage en egen mappe som heter css ved roten nivå på nettstedet og deretter lagre disse CSS-filene sammen inne i det.

Du kan da få tilgang til hvert CSS fra den plasseringen, forutsatt at href av CSS-koblingen din angir den nye plasseringen av mappen sammen med filnavnet:

 href = " css / main. Css " rel =" stylesheet "type =" text / css ">