Trys CSS stilių tipai

„Front-end“ svetainių kūrimas dažnai vaizduojamas kaip trijų kojų išmatos, kurias sudaro:

  • HTML svetainės struktūrai
  • CSS vizualiniams stiliams
  • „Javascript“, skirtas elgesiui

Antroji šios taburetės dalis „Kaskadiniai stiliaus lapai“ palaiko tris skirtingus stilius, kuriuos galite pridėti prie dokumento.

  1. Įterpti stiliai
  2. Įterpti stiliai
  3. Išoriniai stiliai

Kiekvienas iš šių CSS stilių turi unikalių pranašumų ir trūkumų.

Ekrane rodoma nešiojamojo kompiuterio su CSS iliustracija.
hardik pethani / „Getty Images“ 

Įterpti stiliai

Įterptieji stiliai yra stiliai, įrašyti tiesiai į HTML dokumento žymą. Įterptieji stiliai veikia tik konkrečią žymą, kuriai jie naudojami:


Ši CSS taisyklė išjungia standartinį šios vienos nuorodos pabraukimo teksto dekoravimą. Tačiau tai nepakeis jokios kitos nuorodos puslapyje. Tai yra vienas iš inline stilių apribojimų. Kadangi jie keičiami tik tam tikrame elemente, turėtumėte šiukšlinti HTML su šiais stiliais, kad pasiektumėte vieningą puslapio dizainą. Tai nėra geriausia praktika: Tiesą sakant, tai yra vienas žingsnis, pašalintas nuo šriftas žymos ir struktūros bei stiliaus priemaišos tinklalapiuose.

instagram viewer

Įterpti stiliai taip pat reikalauja labai didelio specifiškumo. Tai apsunkina jų perrašymą su kitais, netiesioginiais stiliais. Pvz., Jei norite padaryti svetainę jautrią ir pakeisti, kaip elementas žiūri į tam tikrus lūžio taškus naudodamas žiniasklaidos užklausos, sudėtiniai elemento stiliai tai padaryti sunku.

Įterptieji stiliai yra tinkami tik tada, kai juos naudojate saikingai, taikant metodą „taisyklės išimtis“, kai vienas ar du elementai atskiriami nuo jų bendraamžių puslapyje.

Įterptieji stiliai

Įterptieji stiliai yra dokumento galvutėje. Jie yra apgaubti žymos ir atrodo panašiai kaip išoriniai CSS failai toje dokumento dalyje.

Įterpti stiliai veikia tik žymas puslapyje, į kurį jie yra įterpti. Dar kartą šis požiūris paneigia vieną iš CSS stipriųjų pusių. Kadangi kiekviename puslapyje yra antraštėje apibrėžti stiliai, jei norite pakeisti visos svetainės mastą, pavyzdžiui, pakeisti spalvą nuorodų nuo raudonos iki žalios - šį pakeitimą turėsite atlikti kiekviename puslapyje, nes kiekviename puslapyje naudojamas įdėtas stilius lapas. Šis požiūris yra geresnis nei įterptiniai stiliai, tačiau vis tiek daugeliu atvejų yra problemiškas.


Stiliaus lapai, pridedami prie dokumento galvos, taip pat prideda nemažą kiekį žymėjimo kodo tame puslapyje, o tai taip pat gali apsunkinti puslapio valdymą ateityje.

Įterptųjų stiliaus lapų pranašumas yra tas, kad jie nedelsiant įkeliami kartu su pačiu puslapiu, užuot reikalavus kitų išorinių failų. Ši technika gali būti naudinga atsisiuntimo greičiui ir našumui.

Išoriniai stiliaus lakštai

Daugelyje svetainių šiandien naudojami išoriniai stiliaus lapai. Išoriniai stiliai yra stiliai, kurie rašomi atskirame dokumente ir tada pridedami prie įvairių interneto dokumentų. Jie į pagrindinį dokumentą pakviečiami naudojant a etiketę dokumento galvutėje. Išoriniai stiliaus lapai gali būti tame pačiame serveryje, kuriame yra HTML, arba juos galima visiškai atsisiųsti iš kito serverio. Tai dažnai būna su turtu, pavyzdžiui, šriftais, kuriuos daugelis svetainių skolinasi iš „Google“.

Išoriniai stiliaus lapai paveikti bet kokį dokumentą, prie kurio jie yra pridėti, o tai reiškia, kad jei turite 20 puslapių svetainę, kurioje kiekvienas puslapis naudoja tą patį stiliaus lapą (paprastai tai daroma), galite vizualiai pakeisti kiekvieną iš tų puslapių, paprasčiausiai redaguodami tą vieną stilių lapas. Ši ekonomika palengvina ilgalaikį svetainės valdymą.


Daugelis profesionalių interneto dizainerių naudoja pirminį CSS failą, kad valdytų svetainės išdėstymą ir dizainą.

Išorinių stiliaus lapų minusas yra tas, kad jiems reikia puslapių, kad jie gautų ir įkeltų šiuos išorinius failus. Ne kiekviename puslapyje CSS lape bus naudojami visi stiliai, todėl daugelis puslapių įkels daug didesnį CSS puslapį, nei to reikia iš tikrųjų.

Nors tiesa, kad išorinių CSS failų našumas yra pasiekiamas, jį tikrai galima sumažinti. Realiai, CSS failai yra tik tekstiniai failai, todėl pradžioje jie nėra dideli. Jei visa jūsų svetainė naudoja vieną CSS failą, jūs taip pat gausite naudą, kai tas dokumentas bus talpinamas talpykloje po to, kai jis iš pradžių buvo įkeltas, o tai reiškia, kad Kai kuriuose apsilankymuose pirmajame puslapyje gali būti nedidelis našumas, tačiau kituose puslapiuose bus naudojama talpykloje saugoma CSS byla, todėl bet koks įvykis bus paneigta.