forretnings- og arbeidsplassforskrifter

Slik legger du til en hyperkobling til ekstern CSS

Cascading Style Sheets (CSS) er nettleserinstruksjoner for utforming av HTML-elementer som kan legges til websider på en av tre måter: eksternt, internt eller inline. To fordeler ved å bruke eksterne stilark er at en side stiler kan opprettholdes separat fra sidens innhold, og de samme stilene kan inkluderes på flere websider. Brukere kan også endre CSS-filreferanser ved å samhandle med sidens brukergrensesnitt (hyperkoblinger), en funksjon som gjør det mulig for besøkende å dynamisk endre noen av eller en bestemt sidees stiler.

1.

Åpne en tekstredigerer og opprett en ny fil med navnet "externalBlue.css". Prosessen for å lage en ny tekstfil i en tekstredigerer er typisk å velge "Ny" fra "Fil" -menyen.

2.

Definer en enkelt stil i externalBlue.css. Denne stilen er standard og indikerer at websidenes bakgrunnsfarve (kropp) skal være blå. Pass på å bruke riktig stilsyntax (selector, style, attribute) som følger:

kropp {bakgrunn: blå;}

Lagre filen externalBlue.css, og lukk tekstredigering.

3.

Opprett en andre fil med navnet "externalGreen.css" som vil bli åpnet når brukeren velger en hyperkobling på siden. Definer en stil som indikerer at sidens bakgrunns (kropp) farge skal være grønn, og lagre og lukk filen:

kropp {bakgrunn: grønn;}

4.

Opprett en tredje fil med navnet "externalCSS.html". Legg til de grunnleggende HTML-kodene til filen - "", "", "", "", "" og "" - som følger:

5.

Legg til eksternBlue.css stilark til externalCSS.html ved å plassere en koblingsmerke ("") mellom filens åpning og lukking av "" tagger. Legg til taggen, sett merkets rel "attributt til" stilark ", " href "- attributtet til" externalBlue.css "og" id "- attributtet til" stiler ". Koblingen "stiler" refererer nå til eksternBlue.css-stilarket i externalCSS.html.

6.

Legg til et åpent JavaScript-tag til filen. Sett merkets "type" attributt til "text / javascript". Legg denne taggen under referansen til "stiler" -linketiketten.

7.

Legg til en JavaScript-funksjon kalt "changeStyle ()" til externalCSS.html mellom åpning og lukking Klikk her for å endre stilarket

9.

Åpne externalCSS.html i en nettleser. Klikk på hyperkoblingen "Klikk her for å endre stilarket" og bekreft at stilarket externalGreen.css åpnes, og bakgrunnen endres fra blå til grønn.

Ting som trengs

  • Tekstredigerer
  • Tilgang til webserver
  • Nettleser med JavaScript aktivert

Tips

  • Eksterne stilark kan endres ved hjelp av server-side skript, selv om denne metoden krever en serverforespørsel.
  • Attributtet "type" i en tag kan brukes til å spesifisere medietyper, slik at nettlesere som ikke støtter en bestemt medietype for å ignorere CSS.
  • Attributtet "media" i en tag kan brukes til å spesifisere et medium som brukes av stilarket. Disse medier inkluderer alternativer som utskrift, skjerm og tty.
  • Noen eldre versjoner av Internet Explorer kan ikke implementere JavaScript helt.

Advarsel

  • Ikke alle nettlesere støtter alle CSS-stiler, og noen kan implementere dem på en annen måte. Husk å huske på dette når du bruker stiler som endrer det generelle utseendet på nettsiden.

none

Anbefalt