Hvordan legge til et stilark fil til en webside

Eksterne stilark har fordeler sammenlignet med innebygde stiler, den største fordelen er enkle oppdateringer. Ved hjelp av en eller to stilark, kan du oppdatere utformingen av en hel nettside ved å gjøre noen enkle endringer. Den "<link>" tag kan legge stilark filer, også kjent som Cascading Style Sheets (CSS). Legg stilark til hodet på dine websider i stigende rekkefølge av betydning, så det viktigste stilark er sist.

Bruksanvisning

1 Gå til "Start" på oppgavelinjen i Windows og skrive "Notisblokk" i søkeboksen. Hvis du bruker en kode editor, skriv navnet i stedet. Klikk "Fil" på menylinjen og åpne websiden. Sin kode vil vises i redigeringsprogrammet.

2 Legg en "<link>" på linjen under "<title>" tags. Gi "<link>" tag "href", "rel" og "type" -egenskapene:

<Link href = "" rel = "" type = "" />

Merk at i HTML 5, trenger du ikke "type" attributt eller den avsluttende skråstrek på slutten av koden. Utelate disse hvis du kjenner koden din bruker HTML 5, men la dem hvis du ikke vet sikkert hva spesifisering av HTML du bruker.

3 Sett "rel" attributtet til "stylesheet" og sett "type" til "text / css", slik at leseren vet at linken inneholder en CSS style sheet:

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

4 Skriv inn hele eller relativ sti til din CSS fil inne i doble anførselstegn etter den "href" attributt:

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

<Link href = "http://yoursite.com/path/to/stylesheet.css" rel = "stylesheet" type = "text / css" />

I eksemplene ovenfor, viser den første "<link>" tag en relativ bane mens den andre "<link>" tag viser en fullstendig filbane. Hvis du ikke forstår relative baner, bruker fulle baner.

Hint

  • Prøv å sette alle dine CSS-kode i en enkelt stilark. Hver gang nettleseren må laste en fil, bremser det ned nettstedet ditt, så å kombinere stilark inn en vil hjelpe deg med å optimalisere siden lasting.
  • Du kan ikke plassere "<link>" tags utenfor hodet av dine websider. Pass på at du setter dem mellom "<head>" koder.