Suprasti 3 tipus CSS stilių

Inline, įterptųjų ir išorinių stilių lentelės. Štai ką jūs turite žinoti

Front-end svetainių kūrimas dažnai pateikiamas kaip 3-legged taburetė. Šios kojos yra tokios:

Antroji šio išmatų, CSS arba "Cascading Style Sheets" dalis yra tai, ką šiandien mes žiūrime. Konkrečiai, norime išspręsti 3 rūšių stilius, kuriuos galite pridėti prie dokumento.

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

Kiekviena iš šių CSS stilių tipų turi savo privalumų ir trūkumų, todėl pažiūrėkime kiekvieną iš jų atskirai.

Inline stiliai

Įprasti stilius yra stiliai, kurie yra tiesiogiai įrašomi HTML žyma. Įprasti stiliai turi įtakos tik konkrečiai žymei, kurią jie taiko. Čia pateikiamas vidinio stiliaus pavyzdys, taikomas standartinei nuorodai arba inkaro žymelę:

Ši CSS taisyklė pavers įprastą teksto apdailos pagrindą iš šios vienos nuorodos. Tačiau tai nepakeis jokios kitos nuorodos į puslapį. Tai yra vienas iš vidinių stilių apribojimų. Kadangi jie keičia tik tam tikrą elementą, norint pasiekti faktinį puslapio dizainą, jums reikės pamiršti HTML su šiais stiliais. Tai nėra geriausia praktika. Iš tikrųjų, tai yra vienas žingsnis pašalintas iš "šrifto" žymų dienų ir struktūros bei stiliaus mišinio tinklalapiuose.

Inline stilius taip pat turi labai didelę specifiškumą.

Dėl to labai sunku perrašyti kitus, neinternetinius stilius. Pavyzdžiui, jei norite, kad svetainė reaguotų ir keistų, kaip elementas žiūri į tam tikrus ribinius taškus naudodamas žiniasklaidos užklausas , elemento stiliaus stilius tai padarys labai sunkiai.

Galų gale, inline stiliai yra tikrai tinkami, kai naudojamas labai taupiai.

Tiesą sakant, aš retai kada naudoju inline stilių mano tinklalapiuose.

Įterpti stiliai

Įterpti stiliai yra stiliai, įterpti į dokumento galą. Įterptiniai stiliai turi įtakos tik toms puslapio žymoms, kurias jie įterpia. Dar kartą šis metodas paneigia vieną iš CSS privalumų. Kadangi kiekvienas puslapis turi stilių

, jei norėtumėte pakeisti svetainę, pvz., keisti raudonų į žaliųjų nuorodų spalvą, jums reikės atlikti šį pakeitimą kiekviename puslapyje, nes kiekviename puslapyje naudojama įterptųjų stilių lentelė. Tai geriau nei inline stiliai, tačiau daugeliu atvejų tai vis dar problematiška.

Staliniai lakštai, kurie pridedami prie

dokumentas taip pat prideda prie šio puslapio daug žymėjimo kodo, kuris ateityje taip pat gali apsunkinti puslapio valdymą.

Įterptųjų stilių lentelių nauda yra tai, kad apkrova iškart prasideda pačiu puslapiu, o ne reikalaujama, kad būtų įkelti kiti išoriniai failai. Tai gali būti naudinga atsisiuntimo greičiui ir našumui .

Išoriniai stiliaus lapai

Dauguma svetainių šiandien naudoja išorinius stiliaus lapus. Išoriniai stilius yra stiliai, kurie parašyti atskirame dokumente ir pridedami prie įvairių interneto dokumentų. Išoriniai stiliaus lapai gali paveikti visus dokumentus, prie kurių jie pritvirtinti, o tai reiškia, kad jei turite 20 puslapių svetainę, kurioje kiekvienas puslapis naudoja tą pačią stilių lapą (tai paprastai yra kaip tai daroma), galite padaryti vizualų pakeitimą kiekvienam iš šių puslapių paprasčiausiai redaguodami šią stilių lentelę.

Tai daro ilgalaikį svetainių valdymą daug lengvesnį.

Nepriklausomų stilių lapų trūkumas yra tas, kad jiems reikia puslapių, norint gauti ir įkelti šiuos išorinius failus. Ne kiekvienas puslapis CSS lape naudoja kiekvieną stilių, todėl daugelyje puslapių bus įkeltas žymiai didesnis CSS puslapis, nei iš tikrųjų reikia.

Nors tiesa, kad išorinių CSS failų našumas yra greičiausiai sumažintas. Realiai CSS failai yra tik tekstiniai failai, todėl paprastai jie nėra labai dideli. Jei jūsų visoje svetainėje naudojamas 1 CSS failas, jūs taip pat gausite naudos iš šio dokumento, kai jis iš pradžių yra įkeltas į talpyklą.

Tai reiškia, kad pirmajame puslapyje kai kurie apsilankymai gali būti šiek tiek patobulinti, tačiau vėlesni puslapiai naudoja talpykloje saugomą CSS failą, taigi bet koks įvykis bus neigiamas. Išoriniai CSS failai yra tai, kaip kuriu visus mano tinklalapius.