Inline, ugrađeni i spoljni stilovi: Evo šta treba da znate
Prednji razvoj web stranice je često predstavljen kao stolica sa 3 noge. Ove noge su sledeće:
Drugi deo ove stolice, CSS ili Cascading Style Sheets, je ono što danas gledamo. Konkretno, želimo da se pozabavimo sa 3 vrste stilova koje možete dodati dokumentu.
- Inline stilovi
- Ugrađeni stilovi
- Vanjski stilovi
Svaka od ovih stilova CSS-a ima svoje prednosti i nedostatke, pa hajde da pogledamo svaki od njih pojedinačno.
Inline Styles
Inline stilovi su stilovi koji se pišu direktno u oznaku u HTML dokumentu. Inline stilovi utiču samo na određenu oznaku na koju se primjenjuju. Evo primera inline stila koji se primenjuje na standardnu vezu ili sidro, oznaku:
Ovo CSS pravilo pretvorilo bi standardni naglasak ukidanja teksta ove veze. Međutim, ne bi promenio bilo koji drugi link na stranici. Ovo je jedno od ograničenja inline stilova. Budući da se one mijenjaju samo za određenu stavku, trebali biste da uklonite svoj HTML sa ovim stilovima kako biste postigli stvarni dizajn stranice. To nije najbolja praksa. Zapravo, jedan korak je uklonjen iz dana oznaka "font" i smjesa strukture i stila na web stranicama.
Inline stilovi takođe imaju vrlo visoku specifičnost.
To ih čini veoma teškim za prepisivanje sa drugim, ne-linijskim stilovima. Na primjer, ako želite učiniti web lokaciju odzivnim i promijeniti kako element gleda na određene tačke prekida korištenjem medijskih upita , inline stilovi na elementu će to učiniti vrlo teškim.
Na kraju, inline stilovi su stvarno jedini prikladni kada se koriste veoma pošteno.
U stvari, retko koristim inline stilove na mojim web stranicama.
Ugrađeni stilovi
Ugrađeni stilovi su stilovi koji su ugrađeni u glavu dokumenta. Ugrađeni stilovi utiču samo na oznake na stranici u koju su ugrađeni. Još jednom, ovaj pristup negira jednu od snaga CSS-a. Budući da svaka stranica ima stilove
, ukoliko želite da napravite izmene na celom mestu, kao što je promjena boje veza od crvene do zelene, potrebno je izvršiti ovu promjenu na svakoj stranici, jer svaka stranica koristi ugrađeni stilski stil. Ovo je bolje od inline stilova, ali i dalje problematično u mnogim slučajevima.
Stylesheets koje se dodaju u
dokumenta takođe dodaju značajnu količinu markirajućeg koda na tu stranicu, što takođe može učiniti da se stranica teže upravlja u budućnosti.
Korišćenje ugrađenih stilskih listova je da se opterećenje odmah pokrene sa samom stranom, umjesto da se zahtijeva učitavanje dodatnih eksternih datoteka. Ovo može biti od koristi od brzine prenosa i perspektive performansi .
Spoljašnji stil listovi
Većina web lokacija danas koristi spoljne stil liste. Spoljni stilovi su stilovi koji su napisani u posebnom dokumentu, a zatim priloženi različitim web dokumentima. Vanjski listovi stilova mogu utjecati na bilo koji dokument na koji su priključeni, što znači da ako imate web stranicu od 20 stranica gdje svaka stranica koristi isti stilski stil (to je obično kako je to učinjeno), možete napraviti vizuelnu promjenu za svaku tih stranica jednostavnim uređivanjem tog stila.
To čini mnogo dugoročnije upravljanje mestima.
Nedostatak spoljnih stilskih listova je da oni zahtevaju da stranice preuzmu i učitaju ove spoljne datoteke. Svaka stranica neće koristiti svaki stil u CSS listu, tako da će mnoge stranice učitati mnogo veću CSS stranicu nego što je stvarno potrebno.
Iako je tačno da postoji hitac za performanse za spoljne CSS datoteke, to svakako može biti minimizirano. Realno, CSS datoteke su samo tekstualne datoteke, tako da oni uglavnom nisu veoma veliki za početak. Ako ceo ceo sajt koristi 1 CSS datoteku, dobićete i taj dokument koji se kešira nakon što je prvobitno učitan.
To znači da bi na prvoj strani moglo biti blagih performansi nekoliko poseta, ali naredne stranice će koristiti keširanu CSS datoteku, tako da bi svaki hit bio negiran. Vanjske CSS datoteke su kako ja gradim sve svoje web stranice.