3 CSS stilių tipų supratimas
Įterptieji, įterptieji ir išoriniai stiliaus lapai: štai ką reikia žinoti
Priekinės svetainės kūrimas dažnai vaizduojamas kaip trijų kojų taburetė, kurią sudaro:
Antroji šios taburetės kojelė, pakopiniai stiliaus lapai, palaiko tris skirtingus stilius, kuriuos galite pridėti prie dokumento.
- Inline stiliai
- Įterptieji stiliai
- Išoriniai stiliai
Kiekvienas iš šių CSS stilių turi unikalių privalumų ir trūkumų.
hardik pethani / Getty Images
Įterptieji stiliai
Įterptieji stiliai yra stiliai, kurie įrašomi tiesiai į HTML dokumento žymą. Įterptieji stiliai turi įtakos tik konkrečiai žymai, kuriai jie taikomi:
|_+_|
Ši CSS taisyklė išjungia standartinį šios vienos nuorodos pabraukimo teksto dekoravimą. Tačiau tai nepakeistų jokios kitos puslapio nuorodos. Tai yra vienas iš įterptųjų stilių apribojimų. Kadangi jie keičiasi tik konkrečiame elemente, turėsite užpildyti savo HTML šiais stiliais, kad būtų sukurtas vieningas puslapio dizainas. Tai nėra geriausia praktika: iš tikrųjų tai yra vienas žingsnis nuo tų laikų šriftas žymas ir tinklalapių struktūros bei stiliaus derinį.
Inline stiliai taip pat reikalauja labai didelio specifiškumo. Dėl to juos sunku perrašyti su kitais, neįtrauktais stiliais. Pavyzdžiui, jei norite, kad svetainė būtų interaktyvi ir pakeistų, kaip elementas atrodo tam tikrose pertraukos vietose, naudojant žiniasklaidos užklausos , dėl elemento įterptųjų stilių tai padaryti sunku.
Įterptieji stiliai tinkami tik tada, kai juos naudojate saikingai, taikant metodą „Taisyklės išimtis“, kuris atskiria vieną ar du elementus nuo panašių puslapyje esančių elementų.
Įterptieji stiliai
Įterptieji stiliai yra dokumento galvoje. Jie yra uždengti žymos ir atrodo panašiai kaip išoriniai CSS failai toje dokumento dalyje.
Įterptieji stiliai veikia tik žymas puslapyje, į kurį jie įterpti. Vėlgi, šis metodas paneigia vieną iš CSS pranašumų. Kadangi kiekviename puslapyje yra stilių, apibrėžtų antraštėje, jei norite atlikti visos svetainės pakeitimą, pvz., pakeisti nuorodų spalvą iš raudonos į žalią, šį pakeitimą turėsite atlikti kiekviename puslapyje, nes kiekviename puslapyje naudojamas įterptas stilius. lapas. Šis metodas yra geresnis nei įterptieji stiliai, tačiau daugeliu atvejų vis tiek kelia problemų.
|_+_|Stilių lapai, kurie pridedami prie dokumento antraštės, taip pat prideda nemažą kiekį žymėjimo kodo į tą puslapį, o tai taip pat gali apsunkinti puslapio valdymą ateityje.
Įterptųjų stiliaus lapų pranašumas yra tas, kad jie iškart įkeliami kartu su pačiu puslapiu, o ne reikalaujama įkelti kitų išorinių failų. Ši technika gali būti naudinga atsisiuntimo greičiui ir našumui.
Išoriniai stiliaus lapai
Dauguma svetainių šiandien naudoja išorinius stiliaus lapus. Išoriniai stiliai yra stiliai, kurie parašyti atskirame dokumente ir pridedami prie įvairių žiniatinklio dokumentų. Jie iškviečiami į pagrindinį dokumentą naudojant a žymą dokumento galvoje. Išoriniai stiliaus lapai gali būti tame pačiame serveryje kaip ir HTML, arba gali būti visiškai paimti iš kito serverio. Taip dažnai būna su ištekliais, pvz., šriftais, kuriuos daugelis svetainių skolinasi iš „Google“.
Išoriniai stiliaus lapai turi įtakos bet kuriam dokumentui, prie kurio jie pridedami, o tai reiškia, kad jei turite 20 puslapių svetainę, kurioje kiekviename puslapyje naudojamas tas pats stiliaus lapas (dažniausiai tai daroma), galite atlikti vizualinius kiekvieno iš tų puslapių pakeitimus tiesiog redaguoti tą vieną stiliaus lapą. Dėl šios ekonomijos ilgalaikis svetainės valdymas yra daug lengvesnis.
|_+_|Dauguma profesionalių žiniatinklio dizainerių naudoja pagrindinį CSS failą, kad valdytų svetainės išdėstymą ir dizainą.
Išorinių stiliaus lapų trūkumas yra tas, kad norint gauti ir įkelti šiuos išorinius failus reikia puslapių. Ne kiekviename puslapyje bus naudojamas kiekvienas CSS lapo stilius, todėl daugelis puslapių įkelia daug didesnį CSS puslapį, nei iš tikrųjų reikia.
Nors tiesa, kad išorinių CSS failų našumas pablogėja, jį tikrai galima sumažinti. Tiesą sakant, CSS failai yra tik tekstiniai failai, todėl jie nėra dideli. Jei visoje svetainėje naudojamas vienas CSS failas, jūs taip pat gausite privalumus, nes tas dokumentas bus saugomas talpykloje po to, kai jis pirmą kartą įkeltas, o tai reiškia, kad kai kurių apsilankymų metu pirmame puslapyje gali būti nedidelis našumo smūgis, tačiau vėlesniuose puslapiuose bus naudojamas talpykloje saugomą CSS failą, todėl bet koks įvykis būtų paneigtas.