Kaip sukurti išorinį stiliaus lapą

CSS svetainės pločio naudojimas

Tinklalapiai yra stiliaus ir struktūros derinys, o šiandieniniame žiniatinklyje geriausia yra išlaikyti šiuos du svetainės aspektus atskirti vienas nuo kito.

HTML visada buvo tai, kas suteikia svetainę su jos struktūra. Pirmosiomis žiniatinklio dienomis HTML taip pat turėjo informaciją apie stilių. Elementai, tokie kaip žymelė, buvo sudėti į HTML kodą, pridėjus informacijos apie išvaizdą ir jausmą kartu su struktūrine informacija. Interneto standartų judėjimas privertė mus pakeisti šią praktiką ir vietoj to stumti visą stiliaus informaciją į CSS arba kaskadinių stilių lakštus. Atsižvelgiant į tai, kad žingsnis toliau, dabartinės rekomendacijos yra tai, kad jūs naudojate tai, kas vadinama "išoriniu stiliaus lapeliu" jūsų svetainės stiliaus poreikiams.

Išorinių stilių lapų pranašumai ir trūkumai

Vienas iš geriausių dalykų, susijusių su "Cascading Style Sheets", yra tai, kad galite juos naudoti, kad jūsų svetainė būtų nuosekli. Paprasčiausias būdas tai padaryti - susieti arba importuoti išorinį stiliaus lapą . Jei naudojate tą pačią išorinio stiliaus lapą kiekvienam jūsų svetainės puslapyje, galite būti tikri, kad visi puslapiai bus tokio pat stiliaus. Taip pat galite lengviau atlikti pakeitimus ateityje. Kadangi kiekviename puslapyje naudojama ta pati išorinio stiliaus lentelė, bet koks šio lapo pakeitimas paveiks kiekvieną svetainės puslapį. Tai daug geriau nei kiekvieno puslapio keitimas atskirai!

Išorinių stilių lapų privalumai

  • Galite kontroliuoti kelių dokumentų išvaizdą vienu metu.
    • Tai ypač naudinga, jei dirbate su žmonių komanda kuriant savo tinklalapį. Daugelį stiliaus taisyklių gali būti sunku prisiminti ir, nors jums gali būti spausdintas stiliaus vadovas, yra neefektyvus ir nuobodus, jei norite nuolat tobulėti, kad nustatytumėte, ar pavyzdinis tekstas turi būti parašytas 12 taškų Arial šriftu arba 14 taškų kurjeriu. Turėdami viską vienoje vietoje ir nuo tos vietos taip pat kur galėsite atlikti pakeitimus, jūs galite padaryti techninę priežiūrą daug lengviau.
  • Galite sukurti stilių klases, kurias vėliau galėsite naudoti įvairiuose HTML elementuose .
    • Jei dažnai naudojate tam tikrą šriftų stilių, skirtą pabrėžti įvairius dalykus savo puslapyje, galite naudoti klasės atributą, kurį nustatėte savo stiliaus lape, kad gautumėte šį išvaizdą ir jausmą, o ne apibrėždami konkretų stilių kiekvienam pabrėžimas.
  • Galite lengvai suskirstyti savo stilių, kad jis būtų efektyvesnis.
    • Visi grupavimo metodai, kuriuos galima naudoti CSS, gali būti naudojami išorinių stilių lentelėse. Tai suteikia jums daugiau galimybių kontroliuoti ir lankstumą jūsų puslapiuose.

Išorinių stilių lapelių trūkumai

  • Išoriniai stiliaus lapai gali padidinti atsisiuntimo laiką, ypač jei jie yra labai dideli. Kadangi CSS failas yra atskiras dokumentas, kuris turi būti įkeltas, tai turės įtakos našumui atlikti, kad atsisiųstumėte.
  • Išoriniai stiliaus lapai greitai didėja, nes sunku pasakyti, kai stilius nebėra naudojamas, nes jis nėra ištrintas, kai puslapis yra pašalintas. Tinkamas CSS failų valdymas yra svarbus, ypač kai keli žmonės dirba toje pačioje byloje.
  • Jei turite tik vieno puslapio svetainę, išorinio CSS failo gali nereikėti, nes jūs turite tik tą vieną stiliaus puslapį. Daugelis išorinio CSS pranašumų prarandami, kai turite tik vieną puslapį.

Kaip sukurti išorinį stiliaus lapą

Išoriniai stiliaus lapai sukurti panašiu sintaksiu, kad būtų galima dokumentuoti lygių stiliaus lapus. Tačiau viską, ką reikia įtraukti, yra parinkiklis ir deklaracija. Kaip ir dokumento lygio stiliaus lentelėje, taisyklės sintaksė yra tokia:

selektorius {property: value;}

Išsaugokite šias taisykles į teksto failą su plėtiniu .css. Tai nereikalinga, tačiau tai yra gera įprotis įsikelti, todėl jūs galite iš karto atpažinti savo stiliaus lapus kataloge.

Kai turite stiliaus lapo dokumentą, turite susieti jį su savo tinklalapiais . Tai galima padaryti dviem būdais:

  1. Susiejimas
    1. Norėdami susieti stiliaus lapą, naudojate HTML žymą. Tai turi atributus rel , type ir href . Rel atributas nurodo, ką jūs susiejate (šiuo atveju stilių), tipas apibrėžia naršyklės MIME tipą, o href - tai kelias į .css failą.
  2. Importuoti
    1. Dokumentų lygio stiliaus lape turėtumėte naudoti importuotą stilių lentelę, kad galėtumėte importuoti išorinio stiliaus lapo atributus, neprarandant jokių konkrečių dokumentų. Jūs skambinate taip, kaip skambinate susietą stiliaus lapą, tik jis turi būti vadinamas dokumento lygio stiliaus deklaracijoje. Galite importuoti tiek daug išorinių stilių lentų, kaip jums reikia išlaikyti savo svetainę.

Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 8/8/17