Kaip pridėti hipersaitą prie išorinio CSS

Kaskadiniai stiliaus lapai (CSS) yra naršyklės instrukcijos, skirtos HTML elementams, kuriuos galima pridėti prie tinklalapių vienu iš trijų būdų: išoriškai, viduje ar eilutėje. Du išorinio stiliaus lapų naudojimo privalumai yra tai, kad puslapio stilius galima išlaikyti atskirai nuo puslapio turinio, ir tie patys stiliai gali būti įtraukti į kelis tinklalapius. Vartotojai taip pat gali keisti CSS failų nuorodas, sąveikaudami su puslapio vartotojo sąsaja (hipersaitus), kuri leidžia lankytojams dinamiškai pakeisti kai kuriuos arba visus konkrečios puslapio stilius.

1.

Atidarykite teksto redaktorių ir sukurkite naują failą, pavadintą „externalBlue.css“. Paprastai teksto redaktoriuje sukuriant naują tekstinį failą, meniu „Failas“ pasirinkite „Naujas“.

2.

Nustatykite vieną stilių „ExternalBlue.css“. Šis stilius yra numatytasis ir rodo, kad tinklalapio fono (kūno) spalva turėtų būti mėlyna. Būtinai naudokite tinkamą stiliaus sintaksę (selektorių, stilių, atributą) taip:

kūnas {fonas: mėlynas;}

Išsaugokite „ExternalBlue.css“ failą ir uždarykite teksto redaktorių.

3.

Sukurkite antrą failą, pavadintą „externalGreen.css“, kuris bus pasiekiamas, kai vartotojas pasirinks hipersaitą puslapyje. Nustatykite stilių, rodantį, kad puslapio fono (kūno) spalva turi būti žalia, tada išsaugokite ir uždarykite failą:

kūnas {fonas: žalia;}

4.

Sukurkite trečiąjį failą, pavadintą „externalCSS.html“. Pridėkite pagrindines HTML žymas į failą „“, „“, „“, „“, „“ ir „“ - taip:

5.

Pridėkite išorinio „Blue.css“ stiliaus lapą į externalCSS.html, įterpdami nuorodos žymę („“) tarp failo atidarymo „“ ir „uždarymo“ žymių. Pridėkite „“ žymę, nustatykite žymės „rel“ atributą „stilių“, „href“ atributą į „externalBlue.css“ ir „id“ atributą „stiliams“. Nuoroda „stiliai“ dabar rodo „ExternalBlue.css“ stiliaus lapą „ExternalCSS.html“.

6.

Į failą pridėkite atvirą „JavaScript“ žymą. Nustatykite žymės „tipo“ atributą „text / javascript“. Padėkite šią žymą žemiau nuoroda į nuorodą „stiliai“.

7.

Tarp atidarymo ir uždarymo iš išorės pridėkite „JavaScript“ funkciją, pavadintą „changeStyle ()“. Spustelėkite čia, kad pakeistumėte stiliaus lapą

9.

Atidarykite externalCSS.html žiniatinklio naršyklėje. Spustelėkite nuorodą „Spauskite čia norėdami pakeisti stiliaus lapą“ ir patikrinkite, ar atsidarys išorinis „Green.css“ stiliaus lapas ir fonas pasikeičia nuo mėlynos iki žalios spalvos.

Reikalingi dalykai

  • Teksto redaktorius
  • Prieiga prie žiniatinklio serverio
  • Interneto naršyklė su įjungtu „JavaScript“

Patarimai

  • Išorinius stiliaus lapus galima keisti naudojant serverio pusės scenarijus, nors šis metodas reikalauja serverio užklausos.
  • Ženklo „tipo“ atributas gali būti naudojamas norint nurodyti laikmenų tipus, leidžiant naršykles, kurios nepalaiko tam tikros medijos tipo, ignoruoti CSS.
  • Ženklyje esantį atributą „media“ galima naudoti norint nurodyti stiliaus lapo naudojamą terpę. Šiose laikmenose yra tokių parinkčių kaip spausdinimas, ekranas ir tty.
  • Kai kurios senesnės „Internet Explorer“ versijos gali visiškai neveikti „JavaScript“.

Įspėjimas

  • Ne visos naršyklės palaiko visus CSS stilius, o kai kurie gali juos įgyvendinti skirtingai. Būtinai nepamirškite to nepamiršti, kai naudojate stilius, kurie keičia bendrą tinklalapio išvaizdą.

Rekomenduojama