Sådan eksternalisere JavaScripts og CSS filer for hurtigere downloads

JavaScript bruges til at tilføje interaktivitet til en HTML-side. Cascading Style Sheets (CSS) bruges til at skabe præsentationsmæssige dele af en webside som farver eller layout. De to kan anvendes i HTML eller fjernes fra siden (externalized). De externalized filer bliver derefter forbundet til siden. Efter siden er hentet første gang, JavaScript og CSS-filer er i browserens cache. Alle yderligere downloads fra dit websted vil være hurtigere, fordi kun HTML bliver downloadet. Her er hvordan du gør det.

Vejledning

Sådan eksternalisere din CSS

1

I stedet for at gemme dine CSS som en del af HTML-dokumentet, gemme det i en separat fil med en .css fil forlængelse.

2

Opbevar at CSS-fil i en logisk plads i dit websted struktur. Nogle steder har mere end én typografiark og gemme dem alle i en mappe kaldet "css".

3

Link din HTML-side til CSS-fil ved hjælp af enten et link element ellerimport element.

4

Et link element ville blive bragt i HTML-dokumentet hovedet og ville se noget som dette billede. Linket element giver placeringen af ​​css fil (href) på dit websted. Rel = "stylesheet" betyder, at forholdet mellem denne fil til din HTML-fil er, at stylesheet. Den type = "text / css" betyder, at den linkede dokument er en tekstfil med CSS regler. Den media = "screen" betyder, at denne stylesheet er beregnet til skærmvisning. Andre medietyper du måske skrive reglerne stil for inkluderer print og håndholdte.

5

Etimport stil element er også placeret i dokumentet hovedet. Denimport erklæring er inde i en stil element. Du giver den URL til stylesheet du vil linke til på denne måde. Medierne kan være skærmen, udskrive eller anden medietype.

Sådan eksternalisere dine JavaScripts

6

I stedet for at gemme dine JavaScripts som en del af HTML-dokumentet, gemme det i en separat fil med en Js filtypenavn.

7

Store, JavaScript-fil i et logisk sted i dit websted struktur. Nogle steder har mere end en script og gemme dem alle i en mappe kaldet "scripts".

8

Link din HTML-side til JavaScript ved hjælp af et script element. Den script element er placeret i HTML-dokumentet hovedet. Det giver placeringen af ​​kilden fil, der indeholder scriptet.

TIPS

  • Du kan kun bruge ledelementer at linke til dine stylesheets. Eller du kan bruge både ledelementer ogimport udsagn.
  • Hvis du bare har en stylesheet, et link element er den bedste vej at gå.
  • Brug denne samme metode for hver eneste af de HTML-sider i dit websted for at linke dem alle til din CSS og JavaScripts at gøre dit websted både smuk og interaktiv.

relaterade artiklar